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中文網其他相關文章!