【早阅】2025 年 CSS 愿望清单

作者：@Juan Diego Rodríguez
原文：https://css-tricks.com/a-css-wishlist-for-2025/

背景

2024 年对于 CSS 来说是一个充满创新和进步的年份，许多新特性如跨文档视图过渡（cross-document view transitions）、滚动驱动动画（scroll-driven animations）、锚点定位（anchor positioning）等被引入。尽管如此，开发者们仍然对 CSS 的未来充满期待，提出了一些新的功能需求。

要点

本文汇总了 Geoff、Ryan、Juandi 等几位 CSS 开发者的愿望清单，涵盖了从条件语句到 CSS 预处理器的功能增强，再到更高效的布局和动画控制等多个方面。

分析

1、条件语句 if()

CSS 工作组（CSSWG）已经决定在 CSS Values Module Level 5 中添加 if() 条件语句，这将有助于实现容器样式查询（Container Style Queries），使得开发者能够根据其他元素的样式来有条件地应用样式。

【第3437期】CSS ::target-text 用于文本高亮显示

2、CSS Mixins

虽然 CSS 预处理器已经提供了类似的功能，但将 mixins 直接集成到 CSS 中将减少对预处理器的依赖，提高开发效率。

3、内联注释 //

增加内联注释功能将使 CSS 代码更易于维护，与 JavaScript 等其他语言的注释风格保持一致。

4、font-size: fit

这个功能将允许字体大小自动适应容器，减少开发者手动计算的麻烦。

5、锚点定位在更多浏览器中的支持

尽管 CSS anchor 定位是一种很有前景的技术，允许开发人员精确定位元素，但浏览器支持仍然有限。截至 2024 年底，只有基于 Chromium 的浏览器支持 anchor 定位，这使得在所有浏览器中建立可靠的后备方案变得具有挑战性。更广泛的采用将取决于所有主要浏览器供应商的支持。

8、元素提升到#top-layer

#top-layer 是一个特殊的图层，用于显示弹出视窗和全屏幕元素等内容。目前，将元素提升到此图层的主要方法是使用弹出视窗。但是，开发人员希望探索其他方法来利用 #top-layer，而无需依赖弹出视窗，这将提供更大的布局灵活性。

7、 标签中的 layer 属性

layer 属性将允许开发人员直接在 HTML 中指定级联图层。这将简化级联图层的管理并允许动态载入和应用样式表。然而，浏览器相容性和后备行为是此提议的复杂因素。

8、获取子元素数量和索引

目前，没有直接的方法可以使用 CSS 获取子元素计数和索引作为整数。开发人员必须依靠变通方法，例如手动将索引添加到 HTML 或 CSS 中。具有专用函数（如 sibling-count() 和 sibling-index()）将简化基于子元素计数或索引的样式化任务。

9、平衡 flex-wrap 布局

当前的 flex-wrap 布局在元素换行时可能会出现空白或元素过度拉伸的问题，开发者希望有更自然的布局平衡方式，避免出现空白或元素过度拉伸的情况。。

10、更易于阅读 CSSWG 讨论

CSSWG 的讨论分散在多个 GitHub 问题和会议记录中，开发者希望有一个更集中的方式来跟踪和参与讨论。

影响

这些新功能的引入将显著提升 CSS 的表达能力和开发效率，减少对 JavaScript 和 CSS 预处理器的依赖。特别是条件语句、mixins 和内联注释等功能将使 CSS 代码更加模块化和易于维护。此外，更强大的布局和动画控制功能将使开发者能够创建更复杂和动态的用户界面。

结论

CSS 在 2024 年已经取得了显著的进步，但开发者们对未来的期待依然很高。随着这些新功能的逐步实现，CSS 将变得更加强大和灵活，进一步推动 Web 开发的发展。

😀 每天只需花五分钟即可阅读到的技术资讯，加入【早阅】共学，可联系 vx：zhgb_f2er

5 分钟技术速览：了解技术资讯的一种方式。

🚀可直接通过阅读原文了解详细内容。