见证 CSS 的演变，我们似乎正处于 CSS 历史上最激动人心的创新时期之一。当所有浏览器都支持 flexbox，随后不久又支持 grid 时，这真是令人振奋。它们彻底改变了 CSS，使其不再是笨拙的技巧集合，而变成了更合理、更符合时代潮流的东西。
这种感觉越来越强烈。就在最近的一段时间里，发生了以下几件事。
⚠️? 最终发布的语法可能与以下代码片段略有不同。?⚠️
原生嵌套已成为第一个公开工作草案，这意味着它比以往任何时候都更接近成为现实。许多人仅仅为了嵌套的方便性而使用预处理器，这对于那些希望简化构建工具以避免这种情况的人来说应该很有帮助。
我尤其喜欢如何嵌套条件规则。
<code>.card {
& .title { }
& .body { }
@media (min-inline-size > 1000px) {
& { }
}
@nest body.dark & { }
}</code>我听说过这种可行方案的传闻，它避免了在简单选择器上需要 &，也完全避免了 @nest。
<code>.card {{
.title { }
.body { }
body.dark & { }
}}</code>容器查询目前只是一个编辑器草案（CSS Containment Module Level 3），但 Chrome 中已经有实现（需要启用标志）。它们意义重大，因为它们允许我们根据容器本身的大小做出样式决策，在当今的组件驱动世界中，这是一个非常好的主意。
查看一个简单示例站点的代码（如果您在 Chrome 中没有启用标志，它可能看起来很奇怪）。
<code>/* 在您要查询的父元素上设置 containment */
.card-container {
/* 目前两者都有效，不确定哪个是正确的 */
contain: style layout inline-size;
container: inline-size;
}
.card {
display: flex;
}
@container (max-width: 500px) {
/* 必须设置子元素的样式，而不是容器 */
.card {
flex-direction: column;
}
}</code>容器单位也有一个草案规范，对我来说，它几乎使容器查询的实用性翻倍。其思想是，您有一个基于容器大小（宽度、高度或“inline-size”/“block-size”）的单位。我认为 qi 单位最有用。
希望很快，我们将编写基于自身大小进行样式设置并可以传递该大小以供内部其他属性使用的容器范围 CSS。font-size 属性就是一个简单的实用示例（根据其容器缩放大小的字体），但我相信容器单位将用于各种用途，例如 gap、padding，以及其他各种用途。
<code>/* 在您要查询的父元素上设置 containment */
.card-container {
/* 目前两者都有效，不确定哪个是正确的 */
contain: style layout inline-size;
container: inline-size;
}
.card h2 {
font-size: 1.5rem; /* 备用 */
}
@container type(inline-size) {
.card h2 {
font-size: clamp(14px, 1rem 2qi, 56px)
}
}</code>级联层（在工作草案规范中）引入了一种全新的范例，用于确定 CSS 选择器在级联中的获胜者。目前，它主要是一个特异性竞赛。具有最高特异性的选择器获胜，只有内联样式和带有 !important 子句的特定规则才能胜过它。但是有了层，更高层上的任何匹配选择器都会获胜。
<code>@layer base;
@layer theme;
@layer utilities;
/* 没有层的重置样式（超低）*/
* { box-sizing: border-box; }
@layer theme {
.card { background: var(--card-bg); }
}
@layer base {
/* 大多数样式？*/
}
@layer utilities {
.no-margin { margin: 0; }
}</code>Tab Atkins 提出的 CSS When/Else 规则已被接受，它是一种表达 @media 和 @supports 查询的方式，您可以更轻松地表达 else 条件。虽然媒体查询已经具有一定的逻辑能力，但表达相互排斥的查询长期以来一直很困难，而这使得它非常简单。
<code>@when media(width >= 400px) and media(pointer: fine) and supports(display: flex) {
/* A */
} @else supports(caret-color: pink) and supports(background: double-rainbow()) {
/* B */
} @else {
/* C */
}</code>作用域样式（这是一个编辑器草案）的想法是，它提供了一种语法来编写仅应用于特定选择器和内部的选择器块的样式，但也具有停止作用域的能力，从而创建作用域环。
我最喜欢的是“邻近性”强度的东西。Miriam 这样解释：
<code>.light-theme a { color: purple; }
.dark-theme a { color: plum; }</code><code><div>
<a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">plum</a>
<div>
<a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">也可能是 plum？？？</a>
</div>
</div></code>对吧？！没有很好的方法来表达您希望该链接与 .light-theme 的邻近性获胜。目前，两个主题的特异性相同，但 .dark-theme 位于后面——因此它获胜。希望作用域样式也能解决这个问题。
<code>@scope (.card) to (.content) {
:scope {
display: grid;
grid-template-columns: 50px 1fr;
}
img {
filter: grayscale(100%);
border-radius: 50%;
}
.content { ... }
}</code><code>/* 邻近性帮助！*/
@scope (.light-theme) {
a {
color: purple;
}
}
@scope (.dark-theme) {
a {
color: plum;
}
}</code>您目前无法在生产网站上使用此列表中的任何内容。在尝试遵循这种事情多年之后，我仍然不知道这一切最终是如何进行的。我认为规范需要首先完成并达成一致。然后浏览器会选择它们，希望不止一个。我认为一旦它们有了，规范就可以最终确定了吗？
我不知道。也许其中一些会消失。也许其中一些会发生得非常快，而另一些则非常慢。可能，其中一些会在某些浏览器中出现，而在其他浏览器中则不会。嘿，至少我们现在有了常青浏览器，因此当事情发生时，它会很快发生。我觉得现在我们正处于大多数最大最好的 CSS 功能都受到所有浏览器支持的阶段，但随着所有这些即将到来，我们将进入一个对最新技术的支持更加零散的阶段。
以上是CSS正在狂热地野性猪，我告诉你什么的详细内容。更多信息请关注PHP中文网其他相关文章！
