关于条件边框半径技巧的其他看法

还记得 Ahmad Shadeed 撰写关于他在 Facebook 的 CSS 中发现的 border-radius “切换” 吗？这很有趣！我介绍过它。 在链接激增的几周后，出现了两篇文章深入探讨了它。

在 “评估聪明的 CSS 解决方案” 中，Michelle Barker 思考了多么聪明的解决方案才算过于聪明？

虽然毫无疑问很聪明，并且阅读起来超级有趣，但我赞同 Robin Rendle 在 CSS-Tricks 电子邮件简报 中所说的话

我禁不住觉得它有点太聪明了。

我必须同意这一点。像这样的技巧有其用途，而 Facebook（显然可以负担得起聘用最优秀的 CSS 开发人员）可能是其中之一。但就我个人而言，当被迫在像这样的技巧和一个稍微不那么理想但更易读的解决方案（例如，媒体查询）之间做出选择时，在 99% 的情况下，我都会选择后者。

Michelle 意识到媒体查询在这里并不是相同的解决方案。一个不那么聪明的解决方案将是容器查询。我同意。我几乎从不在生产环境中选择棘手的解决方案，因为即使它们看起来有效，我仍然担心长期维护，有时甚至担心解决方案的脆弱性。

Stefan Judis 观察了我们如何仅使用即将推出的容器查询语法来实现相同的“条件边框半径”想法。

/* If the container's width is equal to or greater than 
   the viewport width, remove the border-radius */
@container (width >= 100vw) {
  .conditional-border-radius {
    border-radius: 0;
  }
}

对我来说，这非常清楚。Stefan 还提到，如果我们可以使用理论上即将推出的 @when 功能，它可能会更清晰

@when container(width >= 100vw) {
  .conditional-border-radius {
    border-radius: 0;
  }
}
@else {
  .conditional-border-radius {
    border-radius: 1em;
  }
}

这可能是一个很大的假设，因为没有证据表明这些全新的规范会像这样重叠。不过我希望它们能做到。多年来，CSS 变得更加逻辑化和易读，这将保持这种趋势。

---

哦，我在 上一篇文章中提到了这一点……

9999 的乘法意味着您永远不会得到小的正数。这是一个切换。您将得到 8px 或 0px，介于两者之间。尝试删除该部分，调整屏幕大小，并查看当视口接近组件大小时它会发生怎样的变化

但我后悔没有在其中添加视频来使概念更清晰，因此我将在本文中纠正这一点。