2026-05-16 — CSS Gap Decorations Chrome 149、離開 Tailwind 的 CSS 架構

CSS Gap 裝飾正式落地 Chrome 149：無須假元素的間隔視覺化

Chrome for Developers · 2026-05-15

Chrome 與 Edge 149 正式將 CSS Gap Decorations 推進穩定版，讓開發者能在 Grid、Flexbox、Multi-column 容器的間隔（gap）上直接繪製分隔線，不再需要修改 DOM 結構或使用 ::after 假元素。

背景

過去在 Grid/Flex 佈局中加入視覺分隔線的主要做法有三種：在子元素上設置 border、插入空白 DOM 節點、利用 :not(:last-child) 等選擇器配合假元素。這三種方法都有相同的問題：視覺與結構耦合——改變佈局行數或欄數就要同步調整 CSS 選擇器，響應式設計尤其麻煩。Gap Decorations 把分隔線的繪製職責移入佈局引擎本身，完全與 DOM 結構解耦。

核心改動

新增的 CSS 屬性分為行規則（row-rule）與欄規則（column-rule）兩組，並提供 rule 簡寫。每組都有獨立的 -width、-style、-color 三個子屬性，語法與現有的 border 家族完全對齊。

交叉點控制由 column-rule-break / row-rule-break 決定，提供 normal、none（不連接）、intersection（在交叉點形成角落）三種模式。overlap-join 關鍵字可讓行列裝飾在交叉點融合成完整的格線。

縮排（inset）系列屬性控制裝飾線的兩端延伸範圍：

column-rule-inset / row-rule-inset：整條線整體縮進
column-rule-inset-cap：控制不跨越 gap 的端點
column-rule-inset-junction：控制在交叉點的端點

可見性可由 column-rule-visibility-items / row-rule-visibility-items 精確控制，可選 all、around（只顯示每個子元素周邊的線）、between（只顯示相鄰子元素之間的線）。

Repeat 語法允許在不同 gap 位置交替使用不同寬度或顏色：

row-rule-width: repeat(2, 1px), 4px;
column-rule-color: #fbbf24, #34d399;

寬度、顏色、inset 值均可動畫化，可用於滑鼠懸停時的動態高亮效果。

影響範圍

Gap Decorations 目前僅在 Chrome 149 與 Edge 149 以上版本可用，不支援的瀏覽器會靜默忽略這些屬性，可作為漸進增強使用。Firefox 與 Safari 尚未宣布支援時程，社群 polyfill 仍在開發中。

原始來源：Chrome for Developers

離開 Tailwind 之後：Julia Evans 的純 CSS 架構實錄

jvns.ca · 2026-05-15

Julia Evans（jvns.ca）在 2026 年 5 月記錄了自己將部落格從 Tailwind CSS v2 遷移至手寫原生 CSS 的完整過程，涵蓋原因、分層架構、響應式設計策略，以及過渡期的踩坑紀錄。

原本的問題

Evans 用 Tailwind v2 多年，但升級 v3/v4 需要引入建置系統，而她的部落格刻意維持無建置流程。另一個動機是能力成長：CSS 技能提升後，手寫 CSS 的摩擦降低了，Tailwind 的原子類名反而讓「奇特的 CSS」（Weird Stuff）更難實現。她也注意到在同一個專案中混用 Tailwind 與原生 CSS 會造成維護困境。

採用的方法

新架構分七個層次：

Reset 層：直接沿用 Tailwind preflight，包含 box-sizing: border-box 與一致的 line-height 預設值
Component 層：每個元件有唯一 class，CSS 存在獨立檔案，不覆寫其他元件的樣式，使用巢狀選擇器
Color 系統：集中在 colours.css 以 CSS 變數定義調色盤
Typography 比例：參考 Tailwind 設計 --size-xs 至各級字體，搭配對應的 line-height 變數
Utility 類：僅保留 .sr-only 等極少數
間距策略：佈局元件以「貓頭鷹選擇器」（section > *+*）管理垂直間距
建置：開發期使用原生 @import 與巢狀選擇器，生產期用 esbuild 打包

響應式設計大量依賴 CSS Grid 的 auto-fit + minmax()，消除大多數 @media 查詢。典型範式：

grid-template-columns: repeat(auto-fit, minmax(min(100%, 400px), max-content));

Padding 計算也利用 CSS 函式取代媒體查詢：

padding: 3rem max(1rem, (100% - var(--inner-width))/2);

實際效果

遷移後 CSS 總量從 2.8 MB（Tailwind 未優化）縮減至數十 KB 的手寫樣式表，且不依賴建置工具。Evans 強調這套方法的核心是元件隔離而非工具隔離——每個 class 只管自己，讓追蹤副作用變得容易。這篇文章本身也因大量實際程式碼片段，成為無框架 CSS 架構的可參考範本。

原始來源：jvns.ca

End of article