2025年的CSS愿望清单

2024年对CSS来说是辉煌的一年：跨文档视图转换、滚动驱动动画、锚点定位、动画高度：自动等等。虽然听起来有点不合时宜，但我们仍然期待CSS的更多功能。许多功能！

我们集思广益，提出了一些想法……其中包括你们的一些想法。

Geoff的愿望清单

我认为我们现在已经拥有了大量的优秀的CSS工具。我们有很多很棒的——而且是新的！——功能，我仍在努力学习它们中的许多。

但是！总是有空间容纳更多好东西，对吧？或者也许有空间容纳四个新东西。如果我可以要求任何新的CSS功能，我会选择这些。

1. 条件if()语句

它即将到来！或者如果你认为CSS工作组（CSSWG）已决定将if()条件添加到CSS值模块第5级规范中，那么它已经存在了。这是一个巨大的进步，即使需要一两年（甚至更多？！）才能得到正式定义并进入浏览器。

我对if()的理解是，它是实现容器样式查询的关键组成部分，这也是我最终想要的。能够根据另一个元素的样式有条件地应用样式可以说是CSS的圣杯。我们已经可以根据其他元素的样式来设置元素的样式：has()，所以这将扩展这种魔法，也包括条件样式。

2. CSS mixin

这更像是一个“锦上添花”的功能，因为我觉得它完全属于CSS预处理器领域，并且相信拥有用于轻量级抽象的工具是很好的，例如在CSS中编写函数或mixin。但是，如果有人向我提供mixin，我当然不会说不。这可能是压垮CSS预处理器的最后一根稻草，并允许我100%的时间编写纯CSS，因为现在当我需要mixin或函数时，我倾向于使用Sass。

我写了一堆关于mixin提案及其规范初始草案的笔记，让您了解我为什么想要这个功能。

3. // 行内注释

是的，请！这是一个次要的开发者便利性，它使CSS与其他语言中的注释编写相媲美。我很确定在我的CSS中编写JavaScript注释应该在我的最愚蠢的CSS错误列表中（即使我没有把它放在那里）。

4. font-size: fit

我就是讨厌算术，好吗？！有时我只是想要一个大小适合其所在容器的单词或简短标题。我们可以使用clamp()之类的工具进行流体排版，但是，这仍然是我不想费心的数学运算。你可能会认为使用容器查询和容器查询单位进行字体大小设置可能是一种解决方案，但这并不比视口单位更好。

Ryan的愿望清单

我只是一个简单的、小镇上的CSS开发者，我对过去几年浏览器中出现的所有新功能都非常满意，我还能要求什么呢？

5. 更多浏览器中的锚点定位！

我不需要更多关于CSS锚点定位的说服，我已经相信了！在11月份的大部分时间里学习了它的工作原理之后，我知道在12月份我不会很快就能使用它。

在2024年结束时，只有基于Chromium的浏览器支持它，不幸的是，回退和渐进增强并不容易。但是，有一个可用的polyfill（这很棒），但这意味着要添加另一块JavaScript代码，这与锚点定位解决的问题形成对比。

不过我很耐心，我等了很长时间才让：has进入浏览器，现在它已经“新可用”在Baseline一年了（你能相信吗？）。

6. 将元素提升到#top-layer无需弹出窗口？

我喜欢锚点定位，我喜欢弹出窗口，它们非常搭配！

弹出窗口的巧妙之处在于它们出现在#top-layer中，因此您可以避免与z-index相关的堆叠问题。这可能是大多数人需要的全部，但是拥有其他方法将元素移动到那里将会很有趣。此外，现在我知道#top-layer存在，我想用它做更多的事情——我想知道那里有什么。到底发生了什么？

好吧，我可能应该从规范开始。事实证明，CSS位置布局模块第4级草案讨论了#top-layer，它的用途以及处理其中包含的元素样式的方法。有趣的是，#top-layer由用户代理控制，似乎是全屏API的副产品。

对话框和弹出窗口是目前可行的方法，但乐观地说，这些功能的存在可能意味着将来可以通过其他方式将元素提升到#top-layer。这很可能是一个郊狼/路跑者类型的情况，因为我不太确定一旦我得到它，我会用它做什么。

7. 向标签添加layer属性

就我个人而言，级联层改变了我编写CSS的方式。我认为如果我们可以在标签上包含一个layer属性，那将会很棒。想象一下，能够在你的项目中包含一个CSS重置，例如：

<code><link href="https://cdn.com/some/reset.css" layer="reset" rel="stylesheet"></code>

或者，根据访问的页面，动态添加CSS部分，融入你的级联层：

<code>
<link href="/styles/main.css" rel="stylesheet">
<link href="/components/card.css" layer="components" rel="stylesheet"></code>

这个功能在CSSWG的repo上被提出，就像生活中的大多数事情一样：这很复杂。

浏览器对它们不认识的属性特别挑剔，加上对处理回退的明确担忧。该主题也被提交给W3C技术架构组（TAG）讨论，所以仍然有希望！

Juandi的愿望清单

我必须承认这一点，在网络狂野且人们有点击计数器的时候，我并不在。事实上，我认为与你们平均的网络鉴赏家相比，我相当年轻。虽然我知道如何使用float制作布局（我选择的第一个网络课程非常过时），但在使用Flexbox或CSS Grid之前，我不必忍受很长时间，并且从未对IE和浏览器支持咬牙切齿。

因此，与过去网络真正需要的功能——甚至现在的一些功能相比，以下愿望可能看起来像是微不足道的请求。无论如何，以下是我希望在2025年看到的三个微不足道的请求：

8. 获取子元素计数和索引作为整数

这是那些你发誓它应该已经可以通过CSS实现的事情之一。情况如下：我发现自己想要知道元素在其同级元素中的索引或子元素的总数。我不能使用counter()函数，因为有时我需要整数而不是字符串。当前的方法是在HTML中硬编码索引：

<code><link href="https://cdn.com/some/reset.css" layer="reset" rel="stylesheet"></code>

• 牛奶
• 鸡蛋
• 奶酪

或者，在CSS中编写每个索引：

<code>
<link href="/styles/main.css" rel="stylesheet">
<link href="/components/card.css" layer="components" rel="stylesheet"></code>

无论哪种方式，我都总是留下这样的感觉：引用这个数字应该更容易；浏览器已经有了这些信息，这只是将其公开给作者的问题。它将使交错动画的代码更漂亮、更简洁，或者只是根据总数更改样式。

幸运的是，已经有一个关于sibling-count()和sibling-index()函数的工作草案提案。虽然语法可能会改变，但我确实希望在2025年听到更多关于它们的信息。

<code></code>

9. 平衡flex-wrap的方法

我从Adam Argyle那里偷来了这个，但我确实希望有一种更好的方法来平衡flex-wrap布局。当元素随着容器缩小而一个接一个地换行时，它们要么被单独留下空隙（我不讨厌），要么增长以填充它（这让我很痛苦）：

我希望有一种更原生方法来平衡换行元素：

这绝对很烦人。

10. 更容易阅读/研究CSSWG讨论的方法

我非常喜欢CSSWG及其所做的一切，所以我花了很多时间阅读他们的工作草案、GitHub问题或关于他们会议的笔记。但是，尽管我喜欢在他们的GitHub中从一个链接跳到另一个链接，但很难找到与特定讨论相关的所有问题。

我认为这提高了表达你对某些主题意见的入门门槛。如果你想参与一个问题，你应该了解所有讨论的大局（说了什么，为什么有些事情不起作用，需要考虑的其他事情等等），但它通常分散在几个问题或会议中。虽然问题可能很冗长，但这并不是问题（我喜欢阅读它们），而是根本不知道讨论的一部分存在于某个地方。

因此，虽然它不是直接的CSS愿望，但我希望有一种更容易的方法来了解讨论的全貌，然后再参与其中。

你的愿望清单上有什么？

我们问了！你们回答了！以下是从人群中选择的几个选择：

• 直接旋转背景图像，例如background-rotate: 180deg
• CSS random()，带有范围、扩展和类型的参数
• 一种CSS锚点定位模式，允许定位鼠标光标、指针或触摸点位置
• 一个字符串选择器，用于查询文本块中的特定单词，并在每次出现该单词时应用样式
• 一个原生的.visually-hidden类。
• position: sticky with a :stuck伪类

祝你2025年一切顺利……

CSS-Tricks的轨迹在过去几年里并不总是那么顺利，所以我们对2025年的最大愿望是继续撰写和激发关于网络的讨论。2025年快乐！

以上是2025年的CSS愿望清单的详细内容。更多信息请关注PHP中文网其他相关文章！