CSS 工作流程

CSS 檢查與排版:Inert Selector、捲動吸附及多欄

原生預覽用來理解有界設定,不代表所有目的頁面。測試排版時,須保留來源順序、鍵盤導覽及真實內容。

內容更新: · 維護者與修正回報

讓貼上的 HTML 保持 inert

Selector 測試使用未掛載的 template 所屬文件,匯入元素不進入作用中的頁面,不執行腳本、自訂元素升級或資源;DOM 樹以文字呈現。片段解析可能修復標記,命中不代表原始 HTML 有效。

契約不含動態偽類、偽元素、:scope、跳脫 Selector 及引號值以外的 CSS 註解,查詢不跨 nested template、shadow root 或 iframe。HTML 限 100,000 UTF-8 bytes、1000 節點、32 層;Selector 限 500 bytes、200 命中。結果超限會拒絕,不默默截斷。

只在預覽區吸附,不接管整頁

Mandatory 在捲動結束且有合適位置時要求吸附;proximity 由瀏覽器決定是否夠接近。Scroll padding 改變 snapport,scroll margin 改變元素吸附範圍,不是一般排版 padding 及 margin。

可聚焦預覽使用原生捲動、方向鍵、觸控或只影響該區的上一張/下一張按鈕。仍須檢查過大項目、鍵盤與實際觸控裝置,不可把內容藏在吸附點之間或鎖住整頁。

多欄維持來源閱讀順序

多欄文字先沿一欄向下,再接下一欄。Column-width 是偏好寬度,不是不可突破的最小值;窄容器可能產生更窄欄位,count 與 width 同時指定時限制最大欄數。

避免分割是請求,不保證過大內容永不拆開。預覽不以固定高度裁掉內容;請檢查長字、跨欄標題及窄螢幕,保留完整跳脫 HTML,不只複製視覺上的一部分。

資料可信度

資料來源