[css] css 界的人生重來槍 - revert


Posted by vii120 on 2020-11-17

認識 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),例如背景色的初始值就是透明:
initial value

inherit

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

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

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

unset

unsetinheritinitial 的結合
在屬性有繼承性時,設定 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

小總結

  • initial:恢復為該 css 屬性的初始值
  • inherit:繼承最近的父層 css 屬性值
  • unset:有繼承性時等同 inherit;無繼承性時等同 initial
  • revert:先恢復為瀏覽器預設;無瀏覽器預設則等同 unset

以九品芝麻官來說,當包龍星拿著他爸給的一半的餅給尚書大人時
尚書大人可選擇以下幾種設定 (他最後選了以下皆非)

  • initial:「我不認識你爸,我沒看過這個餅」
  • inherit:「我問問我媽,她說什麼就是什麼」
  • unset
    • 有繼承性:等同 inherit
    • 無繼承性:等同 initial
  • revert
    • 有瀏覽器預設:「我來看看京城手冊,該怎麼處理這件事」
    • 無瀏覽器預設:等同 unset

[註1] user agent stylesheet

在 devtool -> elements -> styles 下可查看

user agent sheet


參考資料


#css #revert #initial #inherit #unset







Related Posts

[ 筆記 ] Express 03 - Deployment

[ 筆記 ] Express 03 - Deployment

# 第一次夜訪鹽巴,就失敗

# 第一次夜訪鹽巴,就失敗

用 node.js 的 request library 串接 API

用 node.js 的 request library 串接 API


Comments