CSS工作組決定開發(fā)內(nèi)聯(lián)條件語句，這一消息在評(píng)論區(qū)引發(fā)熱議。一些開發(fā)者對(duì)此感到興奮，而另一些開發(fā)者則感到擔(dān)憂，他們擔(dān)心這會(huì)讓CSS的未來變得不確定。這是否會(huì)滑向一個(gè)地獄般的境地，充斥著濫用CSS的開發(fā)者，他們在本應(yīng)是樣式語言的地方實(shí)現(xiàn)過多的邏輯？不會(huì)。即使一些人真的那樣做了，也沒有主流博客會(huì)發(fā)表那些假設(shè)的瘋子的胡言亂語，他們?yōu)榱俗约旱哪康脑贑SS中加入瘋狂的邏輯。因此，我們知道CSS的未來是安全的。

世界末日？早就結(jié)束了

本文的論點(diǎn)進(jìn)一步證實(shí)，內(nèi)聯(lián)條件語句可能并非文明終結(jié)的預(yù)兆：我認(rèn)為我們現(xiàn)在可以使用樣式查詢來實(shí)現(xiàn)相同的功能，而樣式查詢正在獲得相當(dāng)好的瀏覽器支持。

如果我是對(duì)的，Lea的提議更像是語法糖，有時(shí)會(huì)很方便，并允許更簡潔的標(biāo)記。任何關(guān)于內(nèi)聯(lián)條件語句會(huì)毀掉CSS的恐慌性言論，都相當(dāng)于夸大其詞地將三元運(yùn)算符添加到已經(jīng)支持if語句的語言中。

事實(shí)上，Lea談到她提出的語法時(shí)說：“就像JS中的三元運(yùn)算符一樣，對(duì)于只有一小部分值變化的情況，它也可能更符合人體工程學(xué)。”她還提到，CSS一直都是有條件的。并非CSS中條件語句是被禁止的，而是CSS并不總是擅長處理它。

我想要一個(gè)條件Oompa Loompa！

我也是。還有許多其他人，正如Lea精心整理的令人驚嘆的復(fù)雜技巧列表所證明的那樣，人們已經(jīng)發(fā)現(xiàn)了使用當(dāng)前CSS模擬內(nèi)聯(lián)條件語句的方法。其中一些技巧復(fù)雜到我仍然不確定自己是否理解它們，但它們的名字確實(shí)很酷。Lea總結(jié)道：“如果您知道任何其他技術(shù)，請(qǐng)告訴我，以便我可以添加它們?！?/p>

嗯……我肯定錯(cuò)過了一些關(guān)于這些技巧解決的問題。我注意到Lea有博士學(xué)位，而我是一個(gè)白癡。所以我向上滾動(dòng)并重新閱讀，但我無法停止思考：這些人是否正在努力避免在他們的部件周圍添加額外的div并使用樣式查詢？

如果人們想避免DOM中多余的元素，這是公平的，但Lea的技巧列表顯示，替代方案非常復(fù)雜，因此值得嘗試一下使用包裝div的樣式查詢能帶我們走多遠(yuǎn)。

有說服力的例子

Lea的例子圍繞著在提示框上設(shè)置一個(gè)“variant”屬性展開，并指出我們幾乎可以用樣式查詢實(shí)現(xiàn)她想要的東西，但這個(gè)假設(shè)的語法很遺憾是無效的：

<code>.callout { 
  @container (style(--variant: success)) {
    border-color: var(--color-success-30);
    background-color: var(--color-success-95);

    &::before {
      content: var(--icon-success);
      color: var(--color-success-05);
    }
  }
}</code>

她想根據(jù)--variant設(shè)置容器本身及其子元素的樣式?，F(xiàn)在，在這個(gè)具體的例子中，我可以使用z-index來修改::after偽元素，以產(chǎn)生它是容器的錯(cuò)覺。然后我可以設(shè)置它的邊框和背景。不幸的是，這個(gè)解決方案和我一樣脆弱，在這個(gè)其他的例子中，Lea想根據(jù)variant設(shè)置容器的flex-flow。在這種情況下，我的偽元素解決方案不夠好。

記住，Lea的提案被納入CSS規(guī)范，就像宇宙送給她的生日禮物一樣，所以試圖用我在Temu上買到的那些廉價(jià)假容器來代替她的禮物是不公平的。她應(yīng)該得到一個(gè)真正的容器。

讓我們再試一次。

使用包裝器

Lea提案的評(píng)論中提到類型研磨，但稱其為“一種非常（我再說一次，非常）復(fù)雜但有效的”解決內(nèi)聯(lián)條件語句旨在解決的問題的方法。這不太公平。類型研磨讓我花了一點(diǎn)時(shí)間才理解，但我認(rèn)為它比其他技巧更容易理解，而且缺點(diǎn)更少。盡管如此，當(dāng)你查看示例時(shí)，這種在生產(chǎn)環(huán)境中的代碼會(huì)讓人感到厭煩。因此，讓我們咬緊牙關(guān)，嘗試構(gòu)建Lea的flexbox變體示例的替代版本。我的版本不使用類型研磨或任何技巧，而是使用“老式”（并非那么老式）的樣式查詢以及包裝div，來解決我們無法使用樣式查詢來設(shè)置容器本身樣式的問題。

包裝器對(duì)比類型研磨

比較Lea的示例和我的版本的代碼，可以幫助我們理解復(fù)雜性的差異。

以下是CSS的兩個(gè)版本：

以下是標(biāo)記的兩個(gè)版本：

因此，更簡單的CSS和稍微多一點(diǎn)的標(biāo)記。也許我們找到了方向。

我喜歡樣式查詢的原因是，Lea的提案使用了style()函數(shù)，所以如果她的提案被瀏覽器采用，那么將樣式查詢遷移到內(nèi)聯(lián)條件語句并移除包裝器似乎是可行的。如果我不提到遷移這種代碼可能是AI的一個(gè)可行的用例，這篇文章就不是2025年的文章了。當(dāng)我們獲得內(nèi)聯(lián)條件語句時(shí)，也許AI就不會(huì)那么糟糕了。

但我們有點(diǎn)跑題了。你有沒有嘗試過采用一些在“待辦事項(xiàng)”示例中看起來很優(yōu)雅的炫酷JavaScript框架？如果有的話，你會(huì)知道，在簡單的示例中看起來引人注目的解決方案，在真實(shí)的示例中可能會(huì)挑戰(zhàn)你的生存意志。因此，讓我們看看在更真實(shí)的示例中使用樣式查詢的效果如何。

尋求驗(yàn)證

將我上面的示例與MDN關(guān)于HTML5驗(yàn)證的示例和Seth Jeffery關(guān)于變形純CSS圖標(biāo)的酷炫演示結(jié)合起來，然后將它們?nèi)枯斎搿癢hat If”機(jī)器以獲得下面的演示。

如果您使表單有效，則對(duì)提示框所做的所有更改都基于一個(gè)自定義屬性。此屬性從未直接用于提示框的CSS屬性值中，但它控制設(shè)置提示框的邊框顏色、圖標(biāo)、背景顏色和內(nèi)容的樣式查詢。我們在.callout-wrapper級(jí)別設(shè)置--variant屬性。我使用CSS設(shè)置它，如下所示：

<code>.callout { 
  @container (style(--variant: success)) {
    border-color: var(--color-success-30);
    background-color: var(--color-success-95);

    &::before {
      content: var(--icon-success);
      color: var(--color-success-05);
    }
  }
}</code>

但是，該變量可以由JavaScript或HTML中的內(nèi)聯(lián)樣式設(shè)置，就像Lea的示例一樣。表單驗(yàn)證只是我使演示更具交互性的方法，以顯示提示框可以根據(jù)--variant動(dòng)態(tài)更改。

總結(jié)

我寫一篇文章來反對(duì)那些將CSS彎曲到我們意志的技巧，這與我的風(fēng)格不符，而且我完全贊成“欺騙”語言來做我們想做的事情。但是，在獲得內(nèi)聯(lián)條件語句的支持之前，使用包裝器和樣式查詢可能是最簡單的方法。如果我們想感覺更像生活在未來，我們可以將上述方法作為內(nèi)聯(lián)條件語句的polyfill或使用Parcel插件或PostCSS插件之類的預(yù)處理器魔法的基礎(chǔ)——但對(duì)于這種妥協(xié)，我的扳機(jī)手指總是會(huì)渴望Delete鍵。Lea承認(rèn)，“如果你可以用樣式查詢做某事，那就盡情使用樣式查詢——它們幾乎肯定是一個(gè)更好的解決方案?！?/p>

通過本文中的實(shí)驗(yàn)，我已經(jīng)說服自己，即使在Lea的例子中，樣式查詢?nèi)匀皇且粋€(gè)不錯(cuò)的選擇——但我仍然期待內(nèi)聯(lián)條件語句。與此同時(shí)，至少與其他已知的解決方法相比，樣式查詢更容易理解。具有諷刺意味的是，我同意那些質(zhì)疑內(nèi)聯(lián)條件語句需求的評(píng)論，不是因?yàn)樗鼤?huì)毀掉CSS，而是因?yàn)槲蚁嘈盼覀儸F(xiàn)在已經(jīng)可以用現(xiàn)代CSS實(shí)現(xiàn)Lea的例子，而且不需要任何技巧。所以，我們可能不需要內(nèi)聯(lián)條件語句，但它們可以讓我們編寫更易讀、更簡潔的代碼。如果您能想到一些使用樣式查詢而不是內(nèi)聯(lián)條件語句會(huì)遇到復(fù)雜性障礙的例子，請(qǐng)?jiān)谠u(píng)論區(qū)告訴我。

以上是如果機(jī)器：將CSS的' IFFY”未來帶入當(dāng)下的詳細(xì)內(nèi)容。更多信息請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！