如果除了@Media查詢的特定性質(zhì)以及具有CSS自定義屬性的一些深度欺騙之外，CSS尚未具有開關(guān)規(guī)則或條件。讓我們看一下為什麼這樣做的話為什麼會(huì)有用，看看今天可以使用它的技巧。

最近關(guān)於這種可能性的chat不休

儘管今天這些事情都不可用，但在去年，關(guān)於通用有條件CSS的概念的聊天很多：

• 布萊恩·卡爾德爾（Brian Kardell）在上面提出了一個(gè)Switch（）語句和Atkins Riff。
• 喬納森·尼爾（Jonathan Neal）提出了有關(guān)條件價(jià)值的媒體查詢變化，這引發(fā)了很多對(duì)話。
• Lea Verou提出了“更高級(jí)別的自定義屬性”（這是Bramus van Damme的觀察），這似乎非常有用。

所以，是的。有條件的CSS的需求在那裡。

想像為什麼有條件的CSS有用

一定量的滾動(dòng)後，也許是視覺上的變化。數(shù)字輸入後的視覺更改在一定範(fàn)圍內(nèi)。具有少數(shù)狀態(tài)的組成部分。

有一個(gè)非常流行的UI的JavaScript庫（例如React，Vue等）的整個(gè)類型，這些庫基本上用於基於狀態(tài)的UI。顯然，這是開發(fā)人員的需求。如果我們能夠?qū)⒒吨莸臉邮揭浦罜SS，那就是我們可能需要的JavaScript，也許可以更好地分開關(guān)注點(diǎn)。

一個(gè)共同的主題

我們已經(jīng)在CSS中具有自定義屬性，並且可以將狀態(tài)變化的邏輯基於它們，從而將樣式塊作為自定義屬性更改為某些值的副作用。

的確，我們已經(jīng)有了改變樣式塊的機(jī)制。我們可以通過JavaScript更改課程，並且該類可以應(yīng)用CSS中的任何內(nèi)容。但這並不意味著CSS中的基於州的樣式不會(huì)有用。我們並不總是具有或可能不想為此編寫任何JavaScript，而是以其他方式更改自定義屬性（例如媒體查詢，HTML更改等）。在CSS中進(jìn)行此操作意味著幫助分開業(yè)務(wù)邏輯和視覺樣式邏輯。

一個(gè)把戲！使用@keyframes進(jìn)行狀態(tài)

CSS @KeyFrames可用於切換特定的更改。通過動(dòng)畫屬性的力量，有可能確切地選擇要顯示哪個(gè)幀並在該框架上暫停，從而有效地模仿開關(guān)語句或基於狀態(tài)的樣式。

讓我們通過使用動(dòng)畫播放屬性來查看這一點(diǎn)：

這是那支筆的發(fā)生：

• 動(dòng)畫延遲：負(fù)延遲值迫使特定的幀（或之間）生效（正值不起作用）。我們將使用此技巧來強(qiáng)迫狀態(tài)。
• 動(dòng)畫播放狀態(tài)：暫停：我們實(shí)際上並沒有為任何動(dòng)畫動(dòng)畫，因此動(dòng)畫會(huì)暫停。
• 動(dòng)畫效果：實(shí)際持續(xù)時(shí)間無關(guān)緊要，它只需要一個(gè)，因此有一個(gè)時(shí)間跨度可以容納不同的密鑰幀。我們將使其成為100.001之類的值，以便如果我們延遲100秒，最後一個(gè)密鑰幀仍將起作用。持續(xù)時(shí)間需要長於延遲值。

第一個(gè)範(fàn)圍輸入修改了-100和0範(fàn)圍之間的動(dòng)畫 - 延遲。

現(xiàn)實(shí)世界中的用例

在我們直接進(jìn)入工作示例之前，值得更詳細(xì)地討論此技巧，因?yàn)槟鷳?yīng)該知道一些細(xì)微差別。

首先，技巧僅適用於數(shù)字值。因此，顏色值或字符串是因?yàn)樗鼑?yán)格執(zhí)行數(shù)學(xué)。

其次，這是布爾的技巧。考慮一個(gè)變量 - 值：10，它可以在0到100之間進(jìn)行任何數(shù)字值。如果值高於5，我們想應(yīng)用顏色。我們?nèi)绾沃涝撝凳且韵逻€是低於5？即使我們知道，這對(duì)我們有什麼幫助實(shí)際幫助我們？

 -is-above-5：夾具（0，var（ -  value）-5，1）

clamp（）就像一個(gè)智能的calc（），因?yàn)樗试S我們嚴(yán)格地將計(jì)算值限制在範(fàn)圍內(nèi)，同時(shí)聲明理想值。該範(fàn)圍就是實(shí)現(xiàn)布爾變量所需的一切。

在夾具（）的第二個(gè)參數(shù)中寫入任何數(shù)學(xué)，然後輸出0（或以下）或1（或更高）。確保不要寫任何可能導(dǎo)致數(shù)字在0到1之間的數(shù)學(xué)。

這是這樣做的方法：

範(fàn)圍輸入的唯一工作是通過定義-Min和-max的值來“廣播”其值，然後使用ONINTUT事件修改-Value。這是可以完成的最小的事情，可以在CSS中獲得類似狀態(tài)的行為。不需要JavaScript。

使用CSS數(shù)學(xué)功能，可以從相同變量中推斷出進(jìn)度欄的“完成”百分比：

 - 完成：calc（（var（ -  value） -  var（-min）） /（var（-max） -  var（-min）） * 100）;

現(xiàn)在，我們知道該價(jià)值是否超過一定百分比，這為我們提供了另一種按國家進(jìn)行更改的方法：

 -over-30：夾具（0，var（ - 完成）-30，1）;
-over-70：夾具（0，var（ - 已完成）-70，1）;
/* ...等等... */

好的，太好了，但是我們?nèi)绾问褂盟鼇磉x擇特定的密鑰幀？通過使用max（）函數(shù)：

 - 框架：max（ 
    計(jì)算（1-var（ - 超過30））， 
    var（ - 超過30） * 2， 
    var（ -  70） * 3， 
    var（-is-100） * 4 
）；

CSS布爾人的目的是，有許多方法可以使用它們來實(shí)現(xiàn)某個(gè)目標(biāo)，並且必鬚髮揮創(chuàng)造力，找到一個(gè)簡短且可讀性的公式。

在上面的公式中，如果布爾值的值為1，則布爾值將“切換”幀號(hào)。由於我們使用的是最大函數(shù)，因此最大的切換幀號(hào)將是-frame的計(jì)算值。

請(qǐng)注意，顏色變化有輕微的過渡。我們本可以在背景下做到這一點(diǎn)：CurrentColor；在填充區(qū)域（從父母那裡繼承顏色），但我選擇使用CSS Houdini來說明通過聲明其類型將過渡分配給CSS變量的力量。

可以在下面的筆中查看嚴(yán)重的CSS布爾特技巧的一個(gè)示例，這是一個(gè)僅CSS的組件，其中有很多變量允許廣泛的自定義：

我敢肯定，這個(gè)小技巧還有許多其他用例，很高興看到社區(qū)的創(chuàng)造力還能實(shí)現(xiàn)什麼。

以上是CSS開關(guān)案例條件的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！