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

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

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

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

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

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

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

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

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

有說(shuō)服力的例子

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

<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來(lái)修改::after偽元素，以產(chǎn)生它是容器的錯(cuò)覺(jué)。然後我可以設(shè)置它的邊框和背景。不幸的是，這個(gè)解決方案和我一樣脆弱，在這個(gè)其他的例子中，Lea想根據(jù)variant設(shè)置容器的flex-flow。在這種情況下，我的偽元素解決方案不夠好。

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

讓我們?cè)僭囈淮巍?

使用包裝器

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

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

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

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

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

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

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

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

尋求驗(yàn)證

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

如果您使表單有效，則對(duì)提示框所做的所有更改都基於一個(gè)自定義屬性。此屬性從未直接用於提示框的CSS屬性值中，但它控制設(shè)置提示框的邊框顏色、圖標(biāo)、背景顏色和內(nèi)容的樣式查詢。我們?cè)?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é)

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

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

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