First touch of CSS if()
Introduction
Chrome VER.137 推出了一個非常有趣的支援 — CSS > if()。簡單地說就是可以在 CSS 裡頭下 if 判斷式來動態改變屬性的值。除了一般屬性外，連同 custom property 都可以透過 if() 來進行賦值的動作。對於 CSS 樣式描述上可以更加的簡約，大大減少了 media()、supports() 以及 style() 這些 media / container query 的區塊描述。
以下將針對 if() 的初體驗介紹自己的使用心得與時機。
How to use ?
我們來看一下它基本定義：
property: if(condition-1: value-1; condition-2: value-2; condition-3: value-3);透過 if() 這樣的 function 進行包覆，然後有點類 switch case 的用法，依序設定不同的條件陳述式 condition-1 / condition-2 / condition-3，一但滿足便立即賦值不再往下判斷。
condition 基本上可以由 media()、supports() 以及 style() 宣告（未來應有機會支援 scroll-state()），相信大家都對這些條件陳述再熟悉不過了，應是沒有什麼上手難度。
除了上面的基本用法外，它也支援 else 的描述，用法如下：
background-color: if(
media(width > 500px): white;
...
else: black;
);背景顏色當 width 超過 500px 時為白色反之則為黑色。某些狀況下有了 else 就不需要窮舉一堆條件陳述亦可提升 CSS 的可閱讀性。
除此之外，它也支援嵌套寫法，所以我們可以稍加變形讓它類 else if 陳述：
background-color: if(
media(width > 500px): red;
else: if(
media(width > 360px): green;
else: blue;
)
);（需特別注意不然很有機會寫成波動拳）
How to detect current environment support or not？
可以透過 at-supports 來判斷當前環境是否有支援 if()。
@supports (color: if(media(width > 10px): white;)) {
/* current environment is if() ready */
...
...
...
}如上面的 CSS code，筆者透過 detect 賦值陳述式看當前環境是否支援 if() 的用法，倘若有支援便可以大膽啟用。
Use Case 1 > custom property
筆者喜歡將於那種會變動的 value 抽離成 custom property，方便管理與閱讀，避免撒在各處不好維護，所以非常在乎 if() 能否被應用在 custom property 上，經實驗後，以下的 code 可以確實的被執行：
--size: if(
media(width <= 500px): 120px;
else: 60px;
);Use Case 2 > combine custom property & style()
style() 可以針對 custom property 的直進行偵測，所以也可以將兩者做一結合：
<style>
.if-target {
--content: 'mei';
--border-color: if(
style(--content: 'mei'): black;
else: white;
);
&.if-target--switch {
--content: 'others';
}
border: 2px solid var(--border-color);
&::before {
content: var(--content);
}
}
</style>
<div class="if-target"></div>簡單導讀：上述的 border-color 會跟隨 custom property — content 變化，當 content 的值為 mei 時為 black，反之則為 white。可以透過 classname — if-target — switch 的置入來更動 content 的值。
Use Case 3 > combine attr() & style()
早些時候 Chrome 針對 attr() 做了些升級，讓 attr() 可以指定拿下來要做哪樣的型態處理，不再只是呆板的 string only 了。
<style>
div {
color: attr(data-foo type(<color>), red);
}
</style>
<div data-foo="blue">test</div>如上所述，可以透過 data attribute 的設置，直接指定 div 的背景顏色。
這次的升級有個特殊的 type 設定，即 type(<custom-ident>)。只要是無法被有效歸類型態的均可使用這樣的陳述，這亦是我們接下來要用的宣告。
<style>
.card {
--status: attr(data-status type(<custom-ident>));
border-color: if(
style(--status: pending): royalblue;
style(--status: complete): seagreen;
else: gray
);
background-color: if(
style(--status: pending): #eff7fa;
style(--status: complete): #f6fff6;
else: #f7f7f7
);
}
.cards {
}
</style>
<ul class="cards">
<li class="card" data-status="initial">
card 1
</li>
<li class="card" data-status="pending">
card 2
</li>
<li class="card" data-status="complete">
card 3
</li>
</ul>簡單導讀：先設定 custom property — status，透過 attr() 讓它從 data attribute 取值並設定其型態 <custom-ident>。border-color 以及 background-color 便可以透過 style() 來依照 custom property — status 的值做三種變化（initial、pending以及 complete）。
Conclusion
以上便是針對 CSS if() 的一些使用上的心得分享，if() 的推出提供了另類的動態賦值方式，在某些情境下確實能有效地讓 CSS 的撰寫更簡約。當然也可以用現有的陳述來達成 if() 能做到的功能，所以均需視當下的情境做出最佳的選擇，不需要為了用而用～ #CSS #if()