现代 CSS 你知道多少

写在前面

现代 CSS （Modern CSS）应该是 2023 年前端圈热门话题之一，在最近的 CSS Day 活动上也有这个话题。另外在社区中也不乏现代 CSS 的讨论以及如何使用现代 CSS 特性来编写和组织 CSS 代码，以及如何使用现代 CSS 技术更好的构建出可扩展，未来更友好的 Web 项目。

我在还没有完成《现代 Web 布局》和 《防御式 CSS》小册的时候，就已经准备编写一本有关于 CSS 最新特性方面的小册，我将其命名为《现代 CSS》。

《现代 Web 布局》：可用于 Web 布局的 CSS 特性，比如 Flexbox，Grid，多语言布局等；

《防御式 CSS》：Web 开发者应该具有“万一”的思想准备，在编写代码的时候就需要考虑其所存在的“风险”，使自己编写出来的代码更健壮

《现代 CSS》：CSS 中最新的 CSS 特性理论与实践

开始我们今天的话题，接下来的内容篇幅较长，大约有 10000 字的阅读量！

无论以何种标准衡量，在过去的几年里，CSS 都有很大的进步。它有了更多有用的新特性和改进，其中许多最新的特性都是我们渴望已久的。比如，CSS :has() 选择器、CSS 逻辑属性和逻辑值、视窗动态单位、容器查询单位、容器查询、级联层、相对颜色、混合颜色、CSS 作用域、CSS 嵌套、三角函数、滚动驱动动画、视图过渡和瀑布流布局等。