其他查看条件边界半径的技巧

回想一下艾哈迈德（Ahmad）Shaded迷人的Facebook CSS Border-Radius“ Toggle”吗？我以前报道了这种聪明的技术。随后的文章提供了更深入的分析。

米歇尔·巴克（Michelle Barker）的“评估聪明的CSS解决方案”质疑过度聪明的代码的智慧：

尽管不可否认，我同意Robin Rendle的CSS-Tricks新闻通讯的评论：“感觉有点太聪明。”

这种情绪引起了共鸣。这种技术在Facebook的资源中有了自己的位置。但是，优先考虑可读性（例如，使用媒体查询）优先于聪明但潜在的可维护解决方案，通常是最好的。

Stefan Judis探索了使用即将到来的容器查询来实现相同的“条件边界 - 拉迪乌斯”效应：

 /*如果容器的宽度等于或大于 
   视口宽度，卸下边界 - 拉迪乌斯 */
@Container（width> = 100VW）{
  .conditional-Border-radius {
    边界拉迪乌斯：0;
  }
}

这种方法更加清晰。 Stefan还提出了一个假设的@when功能时的潜在好处：

 @when容器（width> = 100vw）{
  .conditional-Border-radius {
    边界拉迪乌斯：0;
  }
}
@别的 {
  .conditional-Border-radius {
    边界拉迪乌斯：1EM；
  }
}

当整合不确定时，这种@when的可行性仍然不确定。但是，其包含将增强CSS的可读性和逻辑一致性。

上一篇文章简要提到了乘法在预防中间值中的作用：结果是8px或0px。为了澄清这一点，下面包括视频演示。 （注意：视频将在实际出版物中插入。）

以上是其他查看条件边界半径的技巧的详细内容。更多信息请关注PHP中文网其他相关文章！