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

最近關于這種可能性的chat不休

盡管今天這些事情都不可用，但在去年，關于通用有條件CSS的概念的聊天很多：

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

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

想象為什么有條件的CSS有用

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

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

一個共同的主題

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

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

一個把戲！使用@keyframes進行狀態(tài)

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

讓我們通過使用動畫播放屬性來查看這一點：

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

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

第一個范圍輸入修改了-100和0范圍之間的動畫 - 延遲。

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

在我們直接進入工作示例之前，值得更詳細地討論此技巧，因為您應該知道一些細微差別。

首先，技巧僅適用于數(shù)字值。因此，顏色值或字符串是因為它嚴格執(zhí)行數(shù)學。

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

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

clamp（）就像一個智能的calc（），因為它允許我們嚴格地將計算值限制在范圍內(nèi)，同時聲明理想值。該范圍就是實現(xiàn)布爾變量所需的一切。

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

這是這樣做的方法：

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

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

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

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

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

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

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

CSS布爾人的目的是，有許多方法可以使用它們來實現(xiàn)某個目標，并且必須發(fā)揮創(chuàng)造力，找到一個簡短且可讀性的公式。

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

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

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

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

以上是CSS開關案例條件的詳細內(nèi)容。更多信息請關注PHP中文網(wǎng)其他相關文章！