Elements 之 CSS 進階

從基礎到進階#

上一章把 Elements panel 的 CSS 基礎走過一遍，這一章繼續深入 Styles 分頁上方的工具列、狀態鎖定、class 操作，以及 Computed 分頁的應用。

狀態鎖定#

CSS 裡常會用虛擬類別（Pseudo-class）如 :hover、:active、:focus 來定義使用者互動時的樣式。這些樣式在 Debug 時很麻煩：你想看 :hover 的長相，可是滑鼠一移到 DevTools 上面、:hover 就解除了；想看 dropdown menu 在 :hover 出現時的樣子，DevTools 還沒選到目標、選單就消失了。

這時候需要「狀態鎖定」，把元素強制鎖在某個狀態。

最直覺的方式：

Inspect 元素 ➡️ 對該元素按右鍵 ➡️ Force state ➡️ 選擇 :hover、:active、:focus 等

被鎖定的元素左側會出現一個小橘點，方便辨識。

實務上更快的入口是 Styles 分頁頂部的 :hov 按鈕，點下去會展開狀態切換清單，可以一次切換多種狀態，比右鍵選單方便很多。

class 操作#

.cls 按鈕#

:hov 按鈕右邊就是 .cls 按鈕，點開可以展開目前元素套用的 class 列表：

用 checkbox 開關各個 class，即時觀察樣式變化
在 Add new class 輸入框可以新增 class
輸入時會出現自動補完，把目前頁面定義過的 class 列出
用方向鍵移動、即時預覽套用該 class 的效果

如果專案使用 atomic CSS（例如 TailwindCSS），.cls 配合自動補完會非常順手，可以快速組合與預覽各種 utility class。

新增 Style Rule#

:hov .cls 右邊的 + 用來新增規則。預設行為：

自動產生一個能選到目前選定元素的 CSS 選取器（Selector）
新增到一個暫時的 CSS 檔
不會動到原本的 inline style 或現有 CSS 規則

按住 + 不放會出現下拉選單，可以指定新規則要寫進哪一份 CSS 檔。建立後點規則右側的「來源」連結，就會跳到 Sources panel 對應位置繼續編輯。

刪除線代表什麼#

某條 style 上出現刪除線，代表該規則沒有實際生效，常見原因：

被優先度更高的規則覆蓋
值不合法（左邊會跳出驚嘆號提示）

優先度的判斷規則：

Styles 分頁的規則由上而下按優先度排序
同一個 CSS property 只有出現在最高優先度的規則中才會生效
加了 !important 的規則會超越沒加 !important 的規則
同一個選取器（Selector）的情況下，越晚出現優先度越高

Computed 分頁#

當規則很多、覆蓋來覆蓋去的時候，光看 Styles 分頁很難看出某個 property 最終的「計算後樣式（Computed Style）」。這時候需要 Computed 分頁。

展開 Computed 分頁裡的某個 property，可以看到：

這個 property 的最終計算值
每一條相關規則與檔案來源
被覆蓋掉的規則（劃刪除線）

這個視角對於追蹤「為什麼最終值是這個」非常有用，特別是繼承（Inheritance）的情境。

要注意 short-hand 的展開行為：寫 background: #ff2525; 等於同時設定了 background-image、background-size、background-color 等多個 property。Computed 分頁裡看到的會是展開後的個別 property，而不是 background 本身。

Search 與 Show all#

有些 property 預設是隱藏的（值與初始值相同的那些），勾選 Show all 才會列出全部。再搭配 Filter 輸入框可以快速過濾到想看的 property，這在處理 inherited 屬性、debug 字體繼承時很實用。

Rendered Fonts#

Computed 分頁最下方有 Rendered Fonts 區塊，遇到字體相關問題時可以在這裡看到：

元素實際渲染用了哪個字體
字體的來源
渲染了幾個字元

例如某段文字標示「Tahoma — 13 glyphs」，代表這段文字實際用了 Tahoma 渲染了 13 個字元；如果預期是顯示中文卻 fallback 到了某個英文字體，這裡可以一眼看出問題。

另外一個快速管道：在 Inspect 元素的時候，hover 提示框其實就會即時顯示字體、box-model、Contrast Ratio 等基本資訊。快速瀏覽字體大小時直接看 hover 提示框是最快的。

銜接#

至此 Elements panel 的 CSS 相關功能已經走過一輪，下一章進入 DOM 結構操作（搜尋、編輯、複製、隱藏、$0 等）。

原文出處#

原書/iThome：https://ithelp.ithome.com.tw/articles/10238903