新的Chrome：CSS概述

Chrome 推出了一個酷炫的實驗性新功能！現在，我們可以快速查看網站使用的CSS 概覽，從顏色數量到未使用的聲明數量，甚至包括已定義的媒體查詢總數。

需要注意的是，這是一個實驗性功能。這意味著它仍在開發中，您需要先啟用它才能在DevTools 中使用。

• 打開DevTools（Mac 上按Command Option I；Windows 上按Control Shift I）
• 前往DevTools 設置（Mac 上按? 或Function F1；Windows 上按? 或F1）
• 點擊打開實驗部分
• 啟用CSS 概覽選項

然後，您會在DevTools 菜單欄中看到一個新的“CSS 概覽”選項卡（設置關閉後）。如果您沒有看到它，請確保它沒有隱藏在溢出菜單中。

請注意，報告分為多個部分，包括顏色、字體信息、未使用的聲明和媒體查詢。這些信息非常全面，而且一目了然。

這個功能非常實用！我很喜歡這種工具開始集成到瀏覽器中的趨勢。想想看，這不僅能幫助前端開發者，還能促進我們與設計師的協作。例如，設計師可以打開它，檢查我們的工作，確保從調色板到字體堆棧的一切都完整無缺。

以上是新的Chrome：CSS概述的詳細內容。更多資訊請關注PHP中文網其他相關文章！