CSS開關案例條件

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

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

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

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

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

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

一定量的滾動後，也許是視覺上的變化。數字輸入後的視覺更改在一定範圍內。具有少數狀態的組成部分。

有一個非常流行的UI的JavaScript庫（例如React，Vue等）的整個類型，這些庫基本上用於基於狀態的UI。顯然，這是開發人員的需求。如果我們能夠將基於州的樣式移至CSS，那就是我們可能需要的JavaScript，也許可以更好地分開關注點。

一個共同的主題

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

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

一個把戲！使用@keyframes進行狀態

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

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

這是那支筆的發生：

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

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

現實世界中的用例

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

首先，技巧僅適用於數字值。因此，顏色值或字符串是因為它嚴格執行數學。

其次，這是布爾的技巧。考慮一個變量 - 值：10，它可以在0到100之間進行任何數字值。如果值高於5，我們想應用顏色。我們如何知道該值是以下還是低於5？即使我們知道，這對我們有什麼幫助實際幫助我們？

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

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

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

這是這樣做的方法：

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

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

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

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

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

好的，太好了，但是我們如何使用它來選擇特定的密鑰幀？通過使用max（）函數：

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

CSS布爾人的目的是，有許多方法可以使用它們來實現某個目標，並且必鬚髮揮創造力，找到一個簡短且可讀性的公式。

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

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

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

我敢肯定，這個小技巧還有許多其他用例，很高興看到社區的創造力還能實現什麼。

以上是CSS開關案例條件的詳細內容。更多資訊請關注PHP中文網其他相關文章！