CSS @當

CSS 領域最近發展迅速。我又聽說了一件從未見過的全新事物，同樣是通過Miriam 了解到的：CSS 條件語句。

? CSS 工作組剛剛決定將@tabatkins 的when/else 提案納入下一級CSS 條件語句。這是該提案： https://www.php.cn/link/2d3bd60a2d899b49827efa1d74476809

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

媒體查詢中已經存在邏輯。事實上，媒體查詢本身就是一種邏輯。

 <code>@media (min-width: 600px) { /* 当此媒体查询为真时，执行这些样式。 */ }</code>

如果您想要互斥的樣式，則需要編寫兩個媒體查詢：

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

這有點……繁瑣。新的提案中的語法簡潔得多：

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

看起來您可以通過and 使用多個條件，使用多個@else 語句創建級聯邏輯堆棧，並且不僅可以使用@media，還可以使用@supports。

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

在我看來，這非常合乎邏輯且方便！

我看到關於命名的一個小爭論。 @if 也可能是一個合乎邏輯的名稱。但是Sass 使用@if，如果他們必須將所有Sass 邏輯重構為新的東西，或者無論如何都會出現這種情況，對大量的開發者來說都會非常煩人。 CSS 應該向任何預處理器讓步嗎？不，但Sass 已經存在很長時間了，而且非常流行，而且有一個非常好的替代方案，所以為什麼要造成痛苦呢？在那條討論中，不僅僅是關於Sass 的問題——一些人認為@when 本身就是一個更好的名稱。

以上是CSS @當的詳細內容。更多資訊請關注PHP中文網其他相關文章！