作為一名長年與代碼打交道的專業 CSS 編寫者，我見證了這門語言從單純的排版工具演變成如今強大且靈活的設計系統基礎。在過去的幾十年裡，我們一直在尋求一種在 CSS 內部處理邏輯的方法。就在最近，隨著 Chrome 137 版本的發佈，我們終於迎來了歷史性的時刻：CSS 正式開始支援原生 if 函式。這不僅僅是一個新特性，它標誌著 CSS 邁向了真正的程式化與宣告式邏輯並行的階段。
If 函式就是判斷式，是所有的程式最基礎的條件指令。
傳統 CSS 在條件判斷上的限制是長久以來的痛點
在 if 函式出現之前，CSS 在處理條件邏輯時面臨著巨大的限制。最根本的問題在於，CSS 缺乏一種直接在屬性值中進行「如果……則……」判斷的機制。這導致開發者不得不依賴於各種曲線救國的方法：
- 笨重的繼承與覆蓋：我們習慣於通過特定的類名或父元素狀態來覆蓋樣式。這雖然有效，但往往會增加選擇器的優先級複雜度，且代碼散落在各處，一旦規模擴大，樣式衝突將變得極難維護。
- 依賴預處理器：為了獲得邏輯處理能力，我們大量使用 SASS 或 POSTCSS。雖然預處理器提供了條件判斷陳述式，但它們是在編譯階段運行的，生成的依然是靜態的 CSS。這意味著它們無法根據瀏覽器的運行時環境（如實時視窗寬度或元素樣式狀態）動態調整屬性值。
- 數學運算的黑魔法：一些頂尖的開發者曾提出利用 Calc 進行二進位模擬判斷。例如，將變數設為 0 或 1，然後進行複雜的數學乘法來決定最終數值。這種方法雖然巧妙，但僅限於數值計算，且極其難以閱讀和除錯。
- 空間開關與複雜 hacks：開發者們甚至發明了空間開關（Space Toggle）等技術，利用自定義屬性在空值與初始值之間的切換來達成邏輯判斷。這些技術被稱為「美麗而恐怖的黑魔法」，雖然解決了問題，卻讓樣式表變得像謎團一樣難懂。
而即將支援的 if 函式將為樣式選擇器帶來什麼樣的變格呢？
CSS 迎來曙光，即支援 if 函式的核心優勢
原生 if 函式的引入，直接解決了上述所有痛點，並為前端開發帶來了顯著的好處：
- 減少對預處理器與 JavaScript 的依賴：開發者可以直接在樣式文件中編寫宣告式的條件邏輯，無需再為了簡單的數值切換而動用腳本或編譯工具。
- 提升代碼的內聚性與可讀性：邏輯被封裝在單一的屬性宣告中，一旦條件達成，瀏覽器就會套用對應的值並忽略其餘部分。這降低了因為偽類順序錯誤或選擇器衝突導致 ui 崩潰的風險。
- 強大的運行時動態性：if 函式可以與樣式查詢、媒體查詢及功能查詢結合，這意味著樣式可以根據環境實時變化。
- 更好的封裝性：if 函式提供了一個標準化的介面，讓組件的樣式邏輯更易於封裝，且不需要依賴父元素來進行狀態查詢。
if 函式的使用範例與運作機制
根據最新的規範，if 函式的語法結構非常直觀，它接受一系列的分號分隔的條件分支出現。基本格式如下：
property: if( condition-1: value-1; condition-2: value-2; else: value-3 );
目前的 if 函式支援三種核心查詢類型：style()、media() 和 supports()。
內嵌媒體查詢範例以往我們需要寫一大塊 @media 區塊，現在可以精確到單一屬性：
button {width: if( media(width >= 1200px): 150px; media(width >= 768px): 120px; else: 100px );}
這讓單一屬性隨螢幕尺寸變化的邏輯一目瞭然，且代碼更加緊湊。
樣式查詢與狀態管理這是 if 函式最強大的地方。我們可以根據自定義屬性的值來決定樣式，甚至不需要依賴容器查詢：
.card {--status: attr(data-status);border-color: if(style(--status: pending): orange;style(--status: complete): green;else: gray);}
功能支援查詢針對實驗性功能，我們可以使用 inline 的方式提供回退方案：
.element {color: if( supports(color: oklch(0.7 0.185 232)): oklch(0.7 0.185 232); else: #00adf3 );}
此外，if 函式還支援邏輯運算子，如 and、or 和 not，並且可以進行嵌套使用或放在 calc 中參與運算。
核心函式的詳細解析
CSS 的函式化趨勢早已開始，if 函式只是這個宏大版圖中的重要拼圖。目前的 CSS 已經支援了豐富的函式供我們調用，這些函式在與 if 結合後，能發揮出更驚人的威力：
- calc()：這是 CSS 中最基礎的數學運算函式。它支援加、減、乘、除，並允許在不同單位（如百分比與像素）之間進行計算。在 if 函式出現前，它是實現動態佈局的唯一工具。
- var()：用於插入自定義屬性（變數）的值。它是建立可重用樣式系統的基礎，讓 CSS 具備了變數引用的能力，也是 if 函式進行樣式查詢的核心對象。
- rgb()：定義顏色的基本函式。透過紅、綠、藍三原色的數值（0-255）來合成色彩。在現代規格中，它也被擴展來處理透明度。
- url()：用於引用外部資源，如圖片、字體或外部樣式表。這是將外部資產整合進 CSS 的標準途徑。
- min()：從一組數值中選擇最小值。這在建立響應式邊界時非常有用，例如確保元素的寬度既能隨螢幕縮放，又不會超過某個固定上限。
- attr()：用於取得 html 元素的屬性值並將其用於樣式中。雖然過去常用於內容生成，但在現代 CSS 中，它常與自定義屬性配合，用來傳遞數據給 if 函式。
這些函式的存在，讓 CSS 從單純的「賦值」演變成了「運算」與「處理」。
偽類函式也很好用
除了在屬性值中使用函式，CSS 還提供了一系列函式偽類，讓選擇器本身也具備強大的邏輯判斷能力。
- :is()：接受一個選擇器列表，只要元素符合其中任何一個選擇器，就會被選中。它能有效簡化冗長的重複選擇器。
- :not()：這是一個排除邏輯，選取不符合特定條件的元素。
- :where()：語法與 :is() 相同，但它的一個關鍵特性是特異性永遠為零。這對於建立易於被覆蓋的基礎樣式框架非常重要。
- :has()：這被譽為 CSS 的「關係選擇器」。它允許我們根據子元素或後續元素的狀態來選擇父元素，這在 if 函式出現前是無法想像的結構邏輯。
- :nth-child()：現代版本支援更複雜的參數，允許我們在選中的子集進行更精確的索引過濾。
當我們使用這些偽類選中元素，再配合 if 函式微調其內部屬性時，我們就擁有了一套極其精密的樣式控制系統。
我們何時能全面擁抱 if 函式？
雖然 if 函式令人興奮，但作為專業編寫者，我們必須考慮到生產環境的穩定性：
- 瀏覽器支援度：目前 if 函式仍處於實驗性階段，主要由 Chrome 137+ 正式支援。Firefox 和 Safari 雖然對此表示關注，但要達到完全對齊標準仍需時間。
- 普及時間預測：根據以往經驗，像這種重大的語法變更，通常需要兩年以上的時間才能在各大主要瀏覽器中達到穩定的基準狀態。
- 開發策略建議：現階段不建議直接拋棄回退方案。我們應該配合 else 子句提供預設值，或者使用傳統的 CSS 宣告作為 fallback。此外，現在已經有基於 postcss 或 lightning css 的 polyfill 套件，可以幫助我們在構建階段處理這些邏輯。
資料來源：https://www.techzine.eu/news/devops/135681/css-finally-gets-support-for-if-function/
在 EPUB 電子書上的環境有可能支援嗎？
關於 EPUB 格式是否會支援 if() 函式是一個非常深刻且具備前瞻性的問題。
從目前技術規範的演進與渲染引擎的關聯性來看，EPUB 非常有機會在未來獲得支援，但這取決於電子書閱讀器（Reading Systems）核心引擎的更新速度以及 W3C 標準的推進。
只是 EPUB 的標準通常會落後於瀏覽器標準。只有當從草案轉為正式建議案，並在多個瀏覽器中達到穩定狀態後，EPUB 官方規範才可能將其納入建議或強制支援的範疇。
其實測試後會發現，不用說 if 這種未來的函式，連早已支援許久的偽類 :where、:is 在台灣的書城平台上都還是支援的零零落落……所以就只能等 W3C 正式發表讓 CSS 支援 if 函式，才有機會督促那些閱讀平台的廠商能好好的去支援該支援的語法。
結論
CSS if 函式的出現，代表這門語言終於補齊了缺失已久的邏輯拼圖。它將樣式的判斷從笨拙的黑魔法轉化為優雅的宣告式代碼。
想像一下，CSS 就像一個進化中的有機體，if 函式的加入就像是為它安裝了神經網路，讓它能更聰明地對環境與狀態做出反應。我們不再是單純地寫樣式，而是在定義一套會思考的視覺邏輯。雖然要達到全瀏覽器普及仍需時日，但 CSS 的未來確實從未如此燦爛。
