Changhao Han
為什麼我們要製作 CSS 格線工具？
CSS 格線是功能強大的 CSS 版面配置系統，可讓網站開發人員建立複雜的二維版面配置，並設定格線中每個子項的大小、對齊方式和順序。CSS 格線是在 Flexbox 開始流行後推出，兩者可協助開發人員打造更優質的回應式設計，無須使用複雜的對齊技巧或 JavaScript 輔助版面配置。
由於 CSS 格線是相對較新的版面配置系統，因此也難以正確設定。其語法相當多元 (只要搜尋「格線速查表」)，而且有許多方法可以達成相同的版面配置，加上彈性大小和隱含軌跡，因此很難推論版面配置為何「會」或「不會」正常運作。因此，我們決定在 DevTools 中提供專屬的 CSS 格線工具，讓開發人員能更深入瞭解 CSS 程式碼的運作方式，以及如何取得正確的版面配置。
工具設計
Chrome 和 Edge 的共同努力
CSS 格線工具引起了 Chrome 開發人員工具和 Edge 開發人員工具的注意。我們決定從一開始就合作。我們分享了兩個團隊的產品、工程和設計資源，並每週協調合作，以便實現這項目標。
功能摘要
CSS 格線工具有三項主要功能：
- 特定格式的持續疊加層，可協助處理維度和排序資訊
- DOM 樹狀結構中的徽章，用於強調 CSS 格線容器和切換格線疊加層
- 可讓開發人員自訂 DOM 重疊層顯示效果的側邊欄窗格 (例如變更規則的顏色和寬度)
- 「Styles」窗格中的 CSS 格線編輯器
接下來，我們就來深入瞭解這些功能。
格線持續重疊
在開發人員工具中，疊加層是強大的工具，可提供個別元素的版面配置和樣式資訊：