首頁 > web前端 > css教學 > CSS @當

CSS @當

尊渡假赌尊渡假赌尊渡假赌
發布: 2025-03-19 10:29:09
原創
546 人瀏覽過

Proposal for CSS @when

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

本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板