寫了這麼多年 CSS,initial 和 inherit 以及 unset 和 revert 還傻傻分不清楚?

ChokCoco 發表於 2021-07-22
CSS

經常會碰到,問一個 CSS 屬性,例如 position 有多少取值。

通常的回答是 staticrelativeabsolutefixed 。當然,還有一個稍微生僻的 sticky 。其實,除此之外, CSS 屬性通常還可以設定下面幾個值:

  • initial
  • inherit
  • unset
  • revert
{
  position: initial;
  position: inherit;
  position: unset

  /* CSS Cascading and Inheritance Level 3 */
  position: revert;
}

瞭解 CSS 樣式的 initial(預設)和 inherit(繼承)以及更新的 unsetrevert 是熟練使用 CSS 的關鍵。

initial

initial 關鍵字用於設定 CSS 屬性為它的預設值,可作用於任何 CSS 樣式。(IE 不支援該關鍵字)

inherit

每一個 CSS 屬性都有一個特性就是,這個屬性必然是預設繼承的 (inherited: Yes) 或者是預設不繼承的 (inherited: no)其中之一,我們可以在 MDN 上通過這個索引查詢,判斷一個屬性的是否繼承特性。

譬如,以 background-color 為例,由下圖所示,表明它並不會繼承父元素的 background-color:

image

可繼承屬性

最後羅列一下預設為 inherited: Yes 的屬性:

  • 所有元素可繼承:visibility 和 cursor
  • 內聯元素可繼承:letter-spacing、word-spacing、white-space、line-height、color、font、 font-family、font-size、font-style、font-variant、font-weight、text- decoration、text-transform、direction
  • 塊狀元素可繼承:text-indent和text-align
  • 列表元素可繼承:list-style、list-style-type、list-style-position、list-style-image
  • 表格元素可繼承:border-collapse

還有一些 inherit 的妙用可以看看這裡:談談一些有趣的CSS題目(四)-- 從倒影說起,談談 CSS 繼承 inherit,合理的運用 inherit 可以讓我們的 CSS 程式碼更加符合 DRY(Don‘’t Repeat Yourself )原則。

這裡簡單舉一個例子,利用 inherit 實現圖片倒影功能。

利用 inherit 實現圖片倒影功能

給定一張有如下背景圖的 div:

寫了這麼多年 CSS,initial 和 inherit 以及 unset 和 revert 還傻傻分不清楚?

製作如下的倒影效果:

寫了這麼多年 CSS,initial 和 inherit 以及 unset 和 revert 還傻傻分不清楚?

方法很多,但是我們當然要尋找最快最便捷的方法,至少得是無論圖片怎麼變化,div 大小怎麼變化,我們都不用去改我們的程式碼。

可以使用 -webkit-box-reflect 專門用於製作映象圖形,當然另外一種巧妙的方式就是使用 inherit 關鍵字。

我們對圖片容器新增一個偽元素,使用 background-image: inherit 繼承父值的背景圖值,就可以做到無論圖片如何變,我們的 CSS 程式碼都無需改動:

div::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    bottom: -100%;
    background-image: inherit;
    transform: rotateX(180deg);;
}

我們使用偽元素 background-image: inherit; 繼承父元素的背景圖,再使用 transform 旋轉容器達到反射的效果,結果如下:

寫了這麼多年 CSS,initial 和 inherit 以及 unset 和 revert 還傻傻分不清楚?

CodePen Demo -- 利用 inherit 實現圖片倒影功能

unset

名如其意,unset 關鍵字我們可以簡單理解為不設定。其實,它是關鍵字 initialinherit 的組合。

什麼意思呢?也就是當我們給一個 CSS 屬性設定了 unset 的話:

  1. 如果該屬性是預設繼承屬性,該值等同於 inherit
  2. 如果該屬性是非繼承屬性,該值等同於 initial

舉個例子,先列舉一些 CSS 中預設繼承父級樣式的屬性:

  • 部分可繼承樣式: font-size, font-family, color, text-indent
  • 部分不可繼承樣式: border, padding, margin, width, height

使用 unset 繼承父級樣式:

看看下面這個簡單的結構:

<div class="father">
    <div class="children">子級元素一</div>
    <div class="children unset">子級元素二</div>
</div>
.father {
    color: red;
    border: 1px solid black;
}

.children {
    color: green;
    border: 1px solid blue;
}

.unset {
    color: unset;
    border: unset;
}
  1. 由於 color 是可繼承樣式,設定了 color: unset 的元素,最終表現為了父級的顏色 red

  2. 由於 border 是不可繼承樣式,設定了 border: unset 的元素,最終表現為 border: initial ,也就是預設 border 樣式,無邊框。

CodePen Demo -- unset Demo;

unset 的一些妙用

例如下面這種情況,在我們的頁面上有兩個結構類似的 position: fixed 定位元素。

image

區別是其中一個是 top:0; left: 0;,另一個是 top:0; right: 0;。其他樣式相同。

假設樣式結構如下:

<div class="container">
    <div class="left">fixed-left</div>
    <div class="right">fixed-right</div>
</div>

通常而言,樣式如下:

.left,
.right {
    position: fixed;
    top: 0;    
    ...
}
.left {
    left: 0;
}
.right {
    right: 0;
}

使用 unset 的方法:

.left,
.right {
    position: fixed;
    top: 0;    
    left: 0;
    ...
}
.right {
    left: unset;
    right: 0;
}

CodePen Demo -- unset Demo;

revert

revert 是更為新的一個關鍵字。源自於 CSS Cascading and Inheritance Level 3 (CSS Cascading 3),直接意譯的意思為 -- 恢復。

它與關鍵字 unset 非常類似,在大部分情況下,他們的作用是一模一樣的!唯一的區別是:

  • revert:屬性應用了該值後,將還原到具有由瀏覽器或使用者建立的自定義樣式表(在瀏覽器側設定)設定的值
  • unset: 屬性應用了該值後,樣式將完全被還原

unsetrevert 的不同之處

可能有點繞,我們通過一個實際的 DEMO 看看 unsetrevert 的異同:

<div class="father">
    <b class="color unset">設定了 unset,我的 font-weight 會被完全清除</b>
    <br>
    <b class="color revert">設定了 revert,我的 font-weight 將會被還原到瀏覽器預設樣式的 font-weight: bold;</b>
</div>
.unset {
    font-weight: unset;
}

.revert {
    font-weight: revert;
}

當然,這裡有個前提,我當前測試的瀏覽器(Chrome 92.0.4515.107)對 <b> 標籤,有設定預設的瀏覽器使用者代理樣式,會對它進行加粗處理:

寫了這麼多年 CSS,initial 和 inherit 以及 unset 和 revert 還傻傻分不清楚?

上面的程式碼實際效果:

寫了這麼多年 CSS,initial 和 inherit 以及 unset 和 revert 還傻傻分不清楚?

CodePen Demo -- Difference between revert and unset keyword in CSS

總結一下,瞭解 CSS 樣式的 initial(預設)和 inherit(繼承)以及更為新的 unsetrevert 是熟練使用 CSS 的關鍵。

雖然有點繞,但是熟練掌握之後,在很多小地方都有著妙用,靈活使用讓你的程式碼更加精簡。

最後

好了,本文到此結束,希望對你有幫助 😃

更多精彩 CSS 技術文章彙總在我的 Github -- iCSS ,持續更新,歡迎點個 star 訂閱收藏。

如果還有什麼疑問或者建議,可以多多交流,原創文章,文筆有限,才疏學淺,文中若有不正之處,萬望告知。