審查 CSS 片段
格式化 CSS 片段，複製 CSS 審查報告，再檢查壓縮與色彩對比。
- 1. CSS
格式化片段並複製包含 selector、token、cascade、specificity 與清單信號的報告。
- 2. CSS Min
若要分享壓縮 CSS，請檢查壓縮率、註解移除和 minify 審查報告。
- 3. Color
當片段改變前景或背景色時，用 WCAG 對比標準檢查 color token。
CSS程式碼隱私: 瀏覽器本機
CSS 格式化器
整理壓縮的 CSS 規則，讓選擇器、屬性與媒體查詢更容易檢查。
輸入 / 輸出
先使用工具
輸入、輸出與複製操作集中在這個主要區域。範例和檢查內容放在下方。
本機工作階段
輸入狀態只保存在此瀏覽器中，可在無帳號時恢復上次工作區。
取得結果後再檢查
完成主要輸入/輸出流程後，再開啟需要的範例、檢查清單與相關工具。
3 工具
檢查色彩無障礙
轉換前景/背景色彩，複製 WCAG 對比報告，發布前檢查 CSS token 與視覺資產。
- 1. Color
轉換 HEX/RGB/HSL 配色，檢查 AA/AAA 門檻，然後複製無障礙報告。
- 2. CSS
提交前檢查 CSS token 名稱、selector 與重複色彩值。
- 3. Favicon
確認品牌首字母或小圖示在所選背景上仍清楚可讀。
複製前檢查
- 再次比較原始輸入與輸出形態。
- 確認目標執行環境、編碼、時區與安全政策差異。
- 繼續用相關工具檢查 CSS 格式化器 的結果是否適合下一步。
常見失敗情況
- 整理壓縮的 CSS 規則，讓選擇器、屬性與媒體查詢更容易檢查。
- 如果瀏覽器本機處理方式和真實輸入結構不一致, 輸出不能直接信任。
相關工具
指南
取得結果後再檢查
完成主要輸入/輸出流程後，再開啟需要的範例、檢查清單與相關工具。
範例
此工具的起始範例.card{display:flex;color:#111}@media (min-width:768px){.grid{grid-template-columns:repeat(3,1fr)}}:root{--gap:16px}.panel{padding:var(--gap);border:1px solid #ddd}使用情境
程式碼- 整理壓縮的 CSS 規則，讓選擇器、屬性與媒體查詢更容易檢查。
- 以瀏覽器本機方式處理輸入，並在複製前檢查結果。
- 搭配 CSS 格式化器 與相關工具縮短工作流程。
- 再次比較原始輸入與輸出形態。
- 確認目標執行環境、編碼、時區與安全政策差異。
- 繼續用相關工具檢查 CSS 格式化器 的結果是否適合下一步。