如果机器：将CSS的' IFFY”未来带入当下

CSS工作组决定开发内联条件语句，这一消息在评论区引发热议。一些开发者对此感到兴奋，而另一些开发者则感到担忧，他们担心这会让CSS的未来变得不确定。这是否会滑向一个地狱般的境地，充斥着滥用CSS的开发者，他们在本应是样式语言的地方实现过多的逻辑？不会。即使一些人真的那样做了，也没有主流博客会发表那些假设的疯子的胡言乱语，他们为了自己的目的在CSS中加入疯狂的逻辑。因此，我们知道CSS的未来是安全的。

世界末日？早就结束了

本文的论点进一步证实，内联条件语句可能并非文明终结的预兆：我认为我们现在可以使用样式查询来实现相同的功能，而样式查询正在获得相当好的浏览器支持。

如果我是对的，Lea的提议更像是语法糖，有时会很方便，并允许更简洁的标记。任何关于内联条件语句会毁掉CSS的恐慌性言论，都相当于夸大其词地将三元运算符添加到已经支持if语句的语言中。

事实上，Lea谈到她提出的语法时说：“就像JS中的三元运算符一样，对于只有一小部分值变化的情况，它也可能更符合人体工程学。”她还提到，CSS一直都是有条件的。并非CSS中条件语句是被禁止的，而是CSS并不总是擅长处理它。

我想要一个条件Oompa Loompa！

我也是。还有许多其他人，正如Lea精心整理的令人惊叹的复杂技巧列表所证明的那样，人们已经发现了使用当前CSS模拟内联条件语句的方法。其中一些技巧复杂到我仍然不确定自己是否理解它们，但它们的名字确实很酷。Lea总结道：“如果您知道任何其他技术，请告诉我，以便我可以添加它们。”

嗯……我肯定错过了一些关于这些技巧解决的问题。我注意到Lea有博士学位，而我是一个白痴。所以我向上滚动并重新阅读，但我无法停止思考：这些人是否正在努力避免在他们的部件周围添加额外的div并使用样式查询？

如果人们想避免DOM中多余的元素，这是公平的，但Lea的技巧列表显示，替代方案非常复杂，因此值得尝试一下使用包装div的样式查询能带我们走多远。

有说服力的例子

Lea的例子围绕着在提示框上设置一个“variant”属性展开，并指出我们几乎可以用样式查询实现她想要的东西，但这个假设的语法很遗憾是无效的：

<code>.callout { 
  @container (style(--variant: success)) {
    border-color: var(--color-success-30);
    background-color: var(--color-success-95);

    &::before {
      content: var(--icon-success);
      color: var(--color-success-05);
    }
  }
}</code>

她想根据--variant设置容器本身及其子元素的样式。现在，在这个具体的例子中，我可以使用z-index来修改::after伪元素，以产生它是容器的错觉。然后我可以设置它的边框和背景。不幸的是，这个解决方案和我一样脆弱，在这个其他的例子中，Lea想根据variant设置容器的flex-flow。在这种情况下，我的伪元素解决方案不够好。

记住，Lea的提案被纳入CSS规范，就像宇宙送给她的生日礼物一样，所以试图用我在Temu上买到的那些廉价假容器来代替她的礼物是不公平的。她应该得到一个真正的容器。

让我们再试一次。

使用包装器

Lea提案的评论中提到类型研磨，但称其为“一种非常（我再说一次，非常）复杂但有效的”解决内联条件语句旨在解决的问题的方法。这不太公平。类型研磨让我花了一点时间才理解，但我认为它比其他技巧更容易理解，而且缺点更少。尽管如此，当你查看示例时，这种在生产环境中的代码会让人感到厌烦。因此，让我们咬紧牙关，尝试构建Lea的flexbox变体示例的替代版本。我的版本不使用类型研磨或任何技巧，而是使用“老式”（并非那么老式）的样式查询以及包装div，来解决我们无法使用样式查询来设置容器本身样式的问题。

包装器对比类型研磨

比较Lea的示例和我的版本的代码，可以帮助我们理解复杂性的差异。

以下是CSS的两个版本：

以下是标记的两个版本：

因此，更简单的CSS和稍微多一点的标记。也许我们找到了方向。

我喜欢样式查询的原因是，Lea的提案使用了style()函数，所以如果她的提案被浏览器采用，那么将样式查询迁移到内联条件语句并移除包装器似乎是可行的。如果我不提到迁移这种代码可能是AI的一个可行的用例，这篇文章就不是2025年的文章了。当我们获得内联条件语句时，也许AI就不会那么糟糕了。

但我们有点跑题了。你有没有尝试过采用一些在“待办事项”示例中看起来很优雅的炫酷JavaScript框架？如果有的话，你会知道，在简单的示例中看起来引人注目的解决方案，在真实的示例中可能会挑战你的生存意志。因此，让我们看看在更真实的示例中使用样式查询的效果如何。

寻求验证

将我上面的示例与MDN关于HTML5验证的示例和Seth Jeffery关于变形纯CSS图标的酷炫演示结合起来，然后将它们全部输入“What If”机器以获得下面的演示。

如果您使表单有效，则对提示框所做的所有更改都基于一个自定义属性。此属性从未直接用于提示框的CSS属性值中，但它控制设置提示框的边框颜色、图标、背景颜色和内容的样式查询。我们在.callout-wrapper级别设置--variant属性。我使用CSS设置它，如下所示：

<code>.callout { 
  @container (style(--variant: success)) {
    border-color: var(--color-success-30);
    background-color: var(--color-success-95);

    &::before {
      content: var(--icon-success);
      color: var(--color-success-05);
    }
  }
}</code>

但是，该变量可以由JavaScript或HTML中的内联样式设置，就像Lea的示例一样。表单验证只是我使演示更具交互性的方法，以显示提示框可以根据--variant动态更改。

总结

我写一篇文章来反对那些将CSS弯曲到我们意志的技巧，这与我的风格不符，而且我完全赞成“欺骗”语言来做我们想做的事情。但是，在获得内联条件语句的支持之前，使用包装器和样式查询可能是最简单的方法。如果我们想感觉更像生活在未来，我们可以将上述方法作为内联条件语句的polyfill或使用Parcel插件或PostCSS插件之类的预处理器魔法的基础——但对于这种妥协，我的扳机手指总是会渴望Delete键。Lea承认，“如果你可以用样式查询做某事，那就尽情使用样式查询——它们几乎肯定是一个更好的解决方案。”

通过本文中的实验，我已经说服自己，即使在Lea的例子中，样式查询仍然是一个不错的选择——但我仍然期待内联条件语句。与此同时，至少与其他已知的解决方法相比，样式查询更容易理解。具有讽刺意味的是，我同意那些质疑内联条件语句需求的评论，不是因为它会毁掉CSS，而是因为我相信我们现在已经可以用现代CSS实现Lea的例子，而且不需要任何技巧。所以，我们可能不需要内联条件语句，但它们可以让我们编写更易读、更简洁的代码。如果您能想到一些使用样式查询而不是内联条件语句会遇到复杂性障碍的例子，请在评论区告诉我。

以上是如果机器：将CSS的' IFFY”未来带入当下的详细内容。更多信息请关注PHP中文网其他相关文章！