我告诉你， CSS正在走向*Gosh*-*Darned Hog Wild*

在下不才
109 阅读5分钟

原文链接：css-tricks.com/css-is-goin…

当有人坐下来观看 CSS 的发展时，感觉就像我们正处于 CSS 历史上最热门的创新时刻之一。当我们在所有浏览器中使用 flexbox 时，这真的是一件很重要的事情，而且不久之后，我们又在网格上运行了。他们将玩具从 CSS 感觉就像一个笨拙的技巧集合变成了更明智和时代的东西。

这种感觉一直在变得越来越真实。就在不久前，发生了一系列的事情。

⚠️🤷 当它们真正发布时，语法可能与下面的任何片段都不完全相同。 🤷⚠️

原生嵌套

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

我特别喜欢嵌套条件规则的方法。

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

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

  @nest body.dark & { }
}

我也听说过这也是一个可行的想法，它避免了在简单选择器上使用&并且完全避免了@nest 。

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

  body.dark & { }
}}

容器查询

容器查询 目前只是编辑器草案（ CSS Containment Module Level 3 ），但它们已经在 Chrome 中实现（带有标志）。这些非常重要，因为它们允许我们根据容器本身的大小做出样式决定，这在当今组件驱动的世界中，这绝对是一个好主意。

请参阅一个简单示例站点的代码（如果您在 Chrome 中没有打开标志，可能看起来很奇怪）。

.card-container {
  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;
  }
}

容器单位

Container Units也有一个草案规范，对我来说，它几乎使容器查询的实用性增加了一倍。这个想法是你有一个基于容器大小的单位（宽度、高度或“内联大小”/“块大小”）。我想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 选择器在 Cascade 中获胜。现在它主要是一个特殊性竞赛。具有最高特异性的选择器获胜，只输给内联样式和带有!important子句的特定规则。但是对于层，更高层上的任何匹配选择器都会获胜。

@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; }
}

@什么时候

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

范围界定

Scoped Styles （这是一个 Editor's Draft ）的想法是它提供了一种语法，用于编写仅适用于某个选择器和内部的样式块，但也有能力停止范围，创建范围圈。

我最喜欢的部分是“接近”强度的东西。 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 { ... }
}

@scope (.light-theme) {
  a {
    color: purple;
  }
}

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

您现在不能在您的生产网站上使用此列表中的任何内容。经过这么多年尝试跟进这类事情，但我仍然不知道这一切最终会怎样。我认为规格需要先完成并达成一致。然后浏览器会选择它们，希望不止一个。一旦他们有了，那么我认为规格可以最终确定？

我不知道。也许其中一些会死。也许其中一些会发生得非常快，而另一些会发生得非常慢。很可能，其中一些会在某些浏览器中丢失，但不会在其他浏览器中丢失。嘿，至少我们现在有常青浏览器，所以当事情确实发生时，它发生得很快。我觉得现在我们正处于所有浏览器都支持大多数最广和最好的 CSS 功能的阶段，但是随着这一切的到来，我们将进入一个支持最新和最好的阶段更加参差不齐。

avatar
文章
阅读
粉丝