CSS @when 属性提案

最近 CSS 发展势头强劲。再一次，我听说了一些从未见过的全新事物，而且又是通过 Miriam 知道的：CSS 条件语句。

🎉 CSSWG 刚刚决定将 @tabatkins 的 when/else 提案纳入下一级 CSS 条件语句。以下是提案：https://#/IXEOK7xKcL

— Mia, on Bass (@TerribleMia) 2021 年 9 月 15 日

媒体查询中已经存在 逻辑。实际上，媒体查询本身就是逻辑。

@media (min-width: 600px) {
  /* WHEN this media query is true, do these styles. */
}

如果您希望拥有与上述条件互斥的样式，则需要编写两个媒体查询

@media (min-width: 600px) {
  /* ... */ 
}
@media (max-width: 599px) {
  /* ... */
}

这有点... 繁琐。在新提案中，语法更加简洁

@when media(min-width: 600px) {
  /* ... */ 
}
@else {
  /* ... */ 
}

看起来您可以通过 and 来设置多个条件，使用多个 @else 语句创建瀑布式逻辑堆栈，并且不仅可以使用 @media，还可以使用 @supports。

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

在我看来，这非常合乎逻辑，也很实用！

我看到了 关于命名的小争论。@if 也可以是一个逻辑名称。但 Sass 使用了 @if，如果开发人员不得不将其所有 Sass 逻辑重构为新语法，或者最终以其他方式进行重构，那将会非常令人厌烦。CSS 应该向任何预处理器让步吗？当然不是，但 Sass 已经存在很长时间了，而且非常流行，并且有一个非常好的替代方案，所以为什么要造成这种麻烦呢？在那条线程中，不只是关于 Sass 的问题 — 一些人认为 @when 反而是一个更好的名称。