CSS 正在变得越来越疯狂！ | CSS-Tricks

作为一名旁观者，看着 CSS 的发展，我感觉我们正处于 CSS 历史上最具创新性的时刻之一。当我们终于在所有浏览器上都实现了 flexbox 时，这确实是一件大事，没过多久，grid 也来了。它们将 CSS 从一个笨拙的技巧集合转变为更合理、更符合时代的东西。

这种感觉一直都在加强。就在最近，这里列出了正在发生的事情。

⚠️🤷 当这些功能真正发布时，语法可能与下面提供的代码片段不完全相同。 🤷⚠️

原生嵌套

原生嵌套已成为第一个公开工作草案，这意味着它比以往任何时候都更接近成为现实。许多人使用预处理器仅仅是为了嵌套的便利，而这对于那些希望简化构建工具以避免这种情况的人来说应该是有帮助的。

我特别喜欢你如何嵌套条件规则。

.card {
  & .title { }
  & .body { }

  @media (min-inline-size > 1000px) {
    & { }
  }

  @nest body.dark & { }
}

我听说过关于这种可行方案的传言，它可以避免在简单选择器上使用 &，也完全避免使用 @nest。

.card {{
  .title { }
  .body { }

  body.dark & { }
}}

容器查询

容器查询目前只是一个编辑草案 (CSS Containment 模块级别 3)，但它们已经在 Chrome 中实现了（带有标志）。它们是一件大事，因为它们允许我们根据容器本身的大小做出样式决策，在当今的组件驱动型世界中，这是一个非常好的想法。

查看代码，了解简单的示例网站（如果你在 Chrome 中没有启用标志，可能看起来很奇怪）。

/* Set containment on the parent you're querying */
.card-container {
  /* Both work right now, not sure which is right */
  contain: style layout inline-size;
  container: inline-size;
}
.card {
  display: flex;
}
@container (max-width: 500px) {
  /* Must style a child, not the container */
  .card {
    flex-direction: column;
  }
}

容器单位

容器单位也有草案规范，对我来说，它几乎使容器查询的用途翻倍。想法是，你有一个单位基于容器的大小（宽度、高度或“内联大小”/“块大小”）。我认为 qi 单位是最有用的。

希望很快，我们将能够编写基于自身大小进行样式设置的容器范围内的 CSS，并且可以将该大小传递给其他属性在内部使用。 font-size 属性是一个简单示例，说明了它的用途（根据容器大小缩放的字体），但我相信容器单位将用于各种用途，例如 gap、padding，以及谁知道还有什么其他用途。

/* Set containment on the parent you're querying */
.card-container {
  /* Both work right now, not sure which is right */
  contain: style layout inline-size;
  container: inline-size;
}
.card h2 {
  font-size: 1.5rem; /* fallback */
}
@container type(inline-size) {
  .card h2 {
    font-size: clamp(14px, 1rem + 2qi, 56px)
  }
}

层叠层

层叠层（在工作草案规范中）引入了一种全新的范式，用于确定 CSS 选择器在层叠中的获胜方式。目前，这主要是一个特异性竞赛。特异性最高的选择器获胜，只有内联样式和带有 !important 子句的特定规则才能胜过它们。但有了层，任何在更高层上的匹配选择器都会获胜。

Miriam Suzanne: 简单的示例/演示和一个解释文档。
Bramus Van Damme: CSS 的未来：层叠层 (CSS @layer)

@layer base;      
@layer theme;   
@layer utilities; 

/* Reset styles with no layer (super low) */
* { box-sizing: border-box; }

@layer theme { 
  .card { background: var(--card-bg); }
}

@layer base { 
  /* Most styles? */
}

@layer utilities {
  .no-margin { margin: 0; }
}

@when

Tab Atkins 的提案用于 CSS When/Else 规则已被接受，它提供了一种表达 @media 和 @supports 查询的方式，使你能够更容易地表达 else 条件。虽然媒体查询已经具备了一些执行逻辑的能力，但执行互斥查询一直难以表达，而这使得它变得非常简单。

@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 */
}

作用域

作用域样式（这个是编辑草案）的想法是，它提供了一种语法来编写仅适用于某个选择器及其内部的样式块，但也具有停止作用域的能力，从而创建作用域甜甜圈。

我最喜欢的部分是“接近度”强度的东西。 Miriam 的解释如下

.light-theme a { color: purple; }
.dark-theme a { color: plum; }

<div class="dark-theme">
  <a href="#">plum</a>

  <div class="light-theme">
    <a href="#">also plum???</a>
  </div>
</div>

说得对吧？现在没有很好的方法来表达你想要该链接与 .light-theme 的接近度获胜。现在，由于两种主题的特异性相同，但 .dark-theme 位于后面，因此它获胜。希望作用域样式也有助于解决这个问题。

@scope (.card) to (.content) {
  :scope {
    display: grid;
    grid-template-columns: 50px 1fr;
  }
  img {
    filter: grayscale(100%);
    border-radius: 50%;
  }
  .content { ... }
}

/* Proximity help! */
@scope (.light-theme) {
  a {
    color: purple;
  }
}

@scope (.dark-theme) {
  a {
    color: plum;
  }
}

你现在无法在生产网站上使用列表中的任何东西。经过多年尝试跟踪这类事情，我对最终结果仍然一无所知。我认为规范需要先完成并达成一致。然后浏览器会采用它们，希望不止一个浏览器采用。然后，我认为规范就可以最终确定了？

我不知道。也许其中一些会消失。也许其中一些会发展得非常快，而另一些则非常慢。有可能，其中一些会在某些浏览器中发布，而在另一些浏览器中却不会发布。嘿，至少我们现在拥有常青浏览器，因此当功能发布时，它们会很快发布。我感觉现在我们正处于所有最强大、最好的 CSS 功能都得到所有浏览器支持的阶段，但随着这些新功能的出现，我们将进入一个阶段，对最新功能的支持将会更加零星。

Lee James

# 2021 年 10 月 13 日

一切都看起来如此时髦。请原谅我的双关语。

@when 基本上是一个切换和/或多状态函数（就我看来）。

我记得 Tab Atkins 曾经写过一篇关于 HTML 中原生切换功能的文章（几年前）——我想看看那篇文章！

Bramus

关于容器单位：在 10 月 7 日，CSS 工作组决定使用 cq 前缀（而不是简单地使用 q）来表示这些单位。

Chris Coyier

评论永久链接# 2021 年 10 月 14 日

另外值得注意的是，他们 100% 改变了层叠样式的强度，使非层叠样式成为最强的，而不是最弱的

https://github.com/w3c/csswg-drafts/issues/6284#issuecomment-937262197

Sacha Greif

专业提示：用 Ted Lasso 的语气读 Chris 写的每一篇文章，你的 CSS-Tricks 会变得好 120% 。

Derek Wood

评论永久链接# 2021 年 10 月 18 日

不可能！ Chris 的声音好多了！

Stuart Robson

我不知道你 - 但我仍然在等待 subgrid

Blallo

# 2021 年 10 月 14 日

它们非常有趣……
但也许在浏览器中嵌入 Sass 编译器更快 :P

Kev Bonett

原生 CSS 混合？

它们会成为“主流”吗？

如果没有，我还会继续使用 Sass 一段时间。;)

Raphael

这么多新东西。而我仍然在等待浏览器实现十年前规范中的 attr。我认为没有其他 CSS 功能是我如此渴望使用却无法使用的。

作用域看起来是个好主意，但“邻近强度”的用例似乎很复杂，因为 CSS 变量更适合解决它（并且现在已经可以工作了）。

Zeno

所有这些很酷的东西都会在父选择器面前黯然失色。上帝，我希望有一个父选择器……

Kev Bonett

评论永久链接# 2021 年 10 月 15 日

另一个使用 Sass 的好理由，它的 @at-root 指令可以“跳出”当前选择器上下文以指定父选择器。
Jace

评论永久链接# 2021 年 10 月 15 日
Kev，我认为 Zeno 指的是一个选择器，它可以根据其子元素样式化父元素。所以，例如，div:has(p) 会根据 div 是否有 p 作为后代来定位 div（它不会定位 p）。即使在 Sass 中也无法做到，因为它本质上是 CSS 当前工作方式的直接反面。

@at-root 实际上所做的只是撤销您可能当前所在的嵌套以指定父元素，然后返回样式化子元素。例如
```
.child {
  @at-root .parent & {
    // still affects .child only
  }
}
```
CSS 可以原生做到，你只需要不嵌套
```
.child {
}

.parent .child {
}
```
当然，直到原生嵌套真正成为 CSS，@at-root 就会变成 @nest。

+1 支持真正想要父选择器。它与容器查询相结合将使基于组件的设计在 CSS 中更直观。

Taufik Nurrohman

# 2021 年 10 月 16 日

问题是，CSS 不像 HTML 和 JavaScript。

你听说过 CSS 中过时的功能吗？

原生嵌套

容器查询

容器单位

层叠层

@when

作用域

评论

发表评论 取消回复

发表评论取消回复