Chrome 引入 CSS if 實現 CSS 原生條件樣式
喂，大家知唔知，Chrome 最新版本137入面，有個新嘅 CSS 功能叫 if() function，呢個功能可以讓你喺 CSS 屬性入面直接做條件判斷，實現原生嘅條件樣式，唔使再用好多唔同嘅 media queries 或者 style queries 嚟處理 dynamic styles 啦。
呢個 if() function 嘅語法好簡單，就係 property: if(condition-1: value-1; condition-2: value-2; else: value-3); 咁樣，你可以放好多條件-value pairs，系統會由左到右檢查，第一個符合嘅條件就用嗰個 value，如果全部唔符合，就用 else 嗰個 fallback value 嚟做後備。
目前，if() 支持三種條件類型：style() 用嚟查詢自訂屬性或者 data attributes；media() 用嚟做 inline media queries，例如檢查裝置嘅 pointer type；supports() 用嚟測試瀏覽器能力，例如支援唔支援某種 color space。呢啲 query types 讓開發者可以創造更靈活、根據上下文調整嘅樣式，唔使依賴外部嘅 rule sets。
舉個例子，假設你想根據 pointer type 調整 button 大細，喺 touchscreen 上要大啲方便 touch，喺 mouse 上可以細啲。傳統方法要用 media query 分開寫，但用 if() 就可以 inline 搞掂：button { aspect-ratio: 1; width: if(media(any-pointer: fine): 30px; else: 44px); } 咁樣，細 pointer 就 30px，粗 pointer 就 44px，確保 touch accessibility 更好，而且所有相關樣式都集中喺一處，維護起來容易好多。
另一個例子係檢查瀏覽器支援 wide-gamut colors，例如 OKLCH color space：body { background-color: if(supports(color: oklch(0.7 0.185 232)): oklch(0.7 0.185 232); else: #00adf3); } 如果支援，就用 vivid color，唔支援就 fallback 到 hex color。甚至可以用喺 ::after content 入面顯示訊息：::after { content: if(supports(color: oklch(0.7 0.185 232)): “Your browser supports OKLCH”; else: “Your browser does not support OKLCH”); } 咁樣，可以直接視覺化 browser capabilities。
再講個 UI state 嘅應用，例如 styling progress cards 根據 status：想像有個 div class=”card” data-status=”complete”，然後 CSS 入面：.card { –status: attr(data-status type(
呢個功能嘅好處係 inline logic，減少分開 media queries 或者 style rules，改善 code organization。而且好靈活，支持多種 query types，可以應付唔同 use cases，例如 responsive design、feature detection、state-based styling。未來，可能會整合 range querying 或者 @function proposal，令 CSS 更強大。
不過，目前只喺 Chrome 137 支援，其他瀏覽器仲未跟上，但相信會慢慢普及。開發者可以用呢個功能嚟寫更簡潔、易讀嘅 CSS，尤其喺大型 project 入面，可以減少重複 code，提高效率。
總之，CSS if() function 係一個重大進步，讓 CSS 更接近 programming language 嘅邏輯能力，唔使再依賴 JS 或者 preprocessor 嚟 handle conditions。如果你係 web developer，唔妨試下呢個新功能，相信會讓你嘅 styling 工作更輕鬆愉快。
呢個功能嘅引入，標誌住 CSS 正在向更智能、更條件化嘅方向發展。傳統 CSS 係 declarative，但 if() 帶來咗 imperative-like 控制，讓樣式可以根據 runtime conditions 動態調整，而唔使寫好多 boilerplate code。例如，喺 responsive design 入面，以前要用 @media rules 分開定義唔同 breakpoints，現在可以用 if() inline 處理部分邏輯，雖然唔完全取代，但可以補充。
另外，喺 accessibility 方面，if() 可以幫手，例如根據 user preferences 調整 colors 或者 sizes，如果瀏覽器支援 prefers-reduced-motion，就可以 if() 停用 animations。或者根據 color-scheme dark/light，inline 切換 themes，而唔使 load 兩個 stylesheets。
對於 performance，inline conditions 可能比多個 rulesets 更好，因為 browser 可以一次 parse 晒，唔使 match 多層 selectors。但當然，要小心使用，太多複雜 conditions 可能影響 readability。
總結嚟講，Chrome 引入 CSS if() function 係一個 exciting update，讓 native CSS 條件樣式成為現實，開發者可以寫更 clean、更 powerful 嘅 code。期待更多瀏覽器支持，同埋未來 extensions。原文連結