[css] css 界的人生重來槍

認識 revert

Google Chrome 在 version 84 的其中一項更新是對 css revert 的支援

Support for the revert CSS keyword

revert 的功能是將 css 屬性還原，舉例來說：
如果專案初始化時有將 <a> 的底線統一移除：text-decoration: none
但在某些情況下又希望顯示底線（AKA 還原狀態）
這時除了寫 text-decoration: underline 重新設定以外
也可以用 text-decoration: revert 來處理～

瀏覽器支援度

firefox 及 safari 都在滿早的版本就開始支援了
IE 則是~~不意外的~~不支援
caniuse

長得很像的朋友

🙉 此時有個謎之音：這個人在做的事怎麼很熟悉？用 initial, unset 不行逆！
他們揪竟有什麼差異勒？

initial

initial 比較容易理解，顧名思義是設定回初始值（又回到最初的起點～
每個 css 屬性都有其初始值（initial value），例如背景色的初始值就是透明：

inherit

在提到 unset 之前，需要先介紹一下 inherit（繼承）
就像初始值一樣，每個 css 屬性也都有繼承性（inherited）
像是 color 就有繼承性， background-color 則無：

若在 body 設定 color: white 時，其子元素的顏色都會繼承這個白色，不需另外設定
但在 body 設定 background-color: black，其子元素仍會保有原本的透明背景，不會繼承父層的背景色
若希望背景色繼承，則可使用 inherit

.wrapper { background-color: orange; }
.wrapper div { background-color: inherit; } /* 繼承父層的值 */

unset

unset 是 inherit 和 initial 的結合
在屬性有繼承性時，設定 unset 會等同於 inherit 的功能
無繼承性時，設定 unset 則等同於 initial

body { font-size: 24px; margin: 24px; }
p { font-size: 12px; margin: 12px; }
p.box { font-size: unset; margin: unset; }

/* p.box 的 style：
 * [inherit] font-size 有繼承性，所以會繼承 body 的 24px
 * [initial] margin 無繼承性，所以會是 margin 的初始值 0px
 * */

revert

先看一下 MDN 的說明：

The revert keyword works exactly the same as unset in many cases.
The only difference is for properties that have values set by the browser or by custom stylesheets created by users (set on the browser side).

revert 的功能跟 unset 大致上是相同的
但 revert 會多做一件事：先查看屬性在 browser 的預設值 [註1]
延續剛剛 unset 的例子，若替換成 revert，則結果會稍有不同

body { font-size: 24px; margin: 24px; }
p { font-size: 12px; margin: 12px; }
p.box { font-size: revert; margin: revert; }

/* p.box 的 style：
 * font-size
    * [browser] p tag 在瀏覽器沒有 font-size 預設值
    * [✅ inherit] 但有繼承性 -> 24px
 * margin
    * [✅ browser] p tag 在瀏覽器有 margin 預設值 -> 1em
    * [initial] 不需再判斷初始值
 * */

文章最初提到的 a 連結在 chrome 下的瀏覽器預設值如下
a tag user agent