2022年鮮為人知的CSS 特性瞭解起來~

前言

隨著CSS的不斷髮展，一些很酷且有用的屬性要麼完全被忽視，要麼由於某種原因不像其他常見屬性那樣被開發者熟練應用。這篇文章我們將一起學習那些CSS中陌生但非常有用的CSS屬性，這些屬性你可能聽說過，也可能沒聽說過，但瞭解之後你會覺得它們是如此的實用。

如果這篇文章有幫助到你，❤️關注+點贊❤️鼓勵一下作者，文章公眾號首發，關注 前端南玖 第一時間獲取最新文章～

`:is()`和`:where()`偽選擇器

這兩個偽選擇器在去年獲得了更廣泛的瀏覽器支援，並且都是用來處理分組和特異性。

:is()

它是一個匹配偽類，:is()接受選擇器列表作為它的引數來嘗試匹配

:is()選擇器列表的幾個獨特行為：

如果列出的選擇器無效，規則將繼續匹配有效的選擇器。鑑於:is(-ua-invalid, article, p)規則將匹配article和p。
計算出的特異性將等於傳遞的具有最高特異性的選擇器的特異性。例如，:is(#id, p)將具有#id— 1.0.0 — 的特異性，而:is(p, a)將具有 0.0.1 的特異性。

CSS 中的偽選擇:is()器讓你可以更簡潔地編寫複合選擇器。

例子：

我們或許看過這樣的CSS，為大量元素賦予同一段CSS樣式

section h1, section h2, section h3, section h4, section h5, section h6, 
article h1, article h2, article h3, article h4, article h5, article h6, 
aside h1, aside h2, aside h3, aside h4, aside h5, aside h6, 
nav h1, nav h2, nav h3, nav h4, nav h5, nav h6 {
  color: #BADA55;
}

使用:is()寫法後看起來就簡潔了許多

:is(section, article, aside, nav) :is(h1, h2, h3, h4, h5, h6) {
  color: #BADA55;
}

相容性

:where()

這個偽類除了它總是具有零特異性這一特點外，其餘跟:is()基本相同。它同樣是接受選擇器列表來作為它嘗試匹配的引數，將會選擇所有能被該選擇器列表中任何一條規則選中的元素。

例子：

當header、main、footer中的p標籤被hover時，給它新增如下樣式，我們可能會這麼寫：

header p:hover,
main p:hover,
footer p:hover {
  color: red;
  cursor: pointer;
}

我們也可以用:where()來實現：

:where(header, main, footer) p:hover {
  color: red;
  cursor: pointer;
}

這樣看起來就比上面簡潔了許多。

:where() 和 :is()總是為 0，但是 :is() 的優先順序是由它的選擇器列表中優先順序最高的選擇器決定的。

我們可以使用:is和:where將多個選擇器組合成一個表示式。使用:where，我們可以使用複雜的選擇器設定安全的預設樣式，這些選擇器可以很容易地用簡單的實用程式類覆蓋，而無需增加特異性。

相容性

currentColor

通常被稱為「第一個 CSS 變數」，currentColor是一個等於元素color屬性的值。它可用於將等於屬性值的color給任何接受顏色值的 CSS 屬性。它強制 CSS 屬性繼承該color屬性的值。

這個值對於避免將相同的值分配給多個 CSS 屬性非常有用，這些屬性在同一選擇器中接受顏色，例如border-color, background,box-shadow等。

例子：

如果我們需要將每個段落的文字顏色、邊框、陰影做到統一，我們或許會這麼寫：

.green {
  color: darkgreen;
  border-left: 5px solid darkgreen;
  box-shadow: 5px 5px 10px darkgreen;
}

.brown {
  color: darkgoldenrod;
  border-left: 5px solid darkgoldenrod;
  box-shadow: 5px 5px 10px darkgoldenrod;
}

.red {
  color: darkred;
  border-left: 5px solid darkred;
  box-shadow: 5px 5px 10px darkred;
}

但有了currentColor我們便可以這麼寫

.box {
  border-left: 5px solid currentColor;
  box-shadow: 5px 5px 10px currentColor;
}
.green {
  color: darkgreen;
}
.brown {
  color: darkgoldenrod;
}
.red {
  color: darkred;
}

相容性

自定義屬性備用值

自定義屬性通過允許開發人員在其樣式表中建立可重用的值而無需像 SASS 這樣的 CSS 前處理器，從而顯著改進了 CSS。自定義屬性立即被採用並在今天被廣泛使用併產生了巨大的影響，尤其是在主題化和與 JavaScript 的互動方面。但很多人可能都忽略了var函數的第二個引數，它作為一個備用選項，在自定義屬性無效時應用。

定義變數 `--`

以-- 開頭，大小寫敏感
變數的定義必須有作用域，不能在外部直接定義，這點與scss和less不同

:root {
	--myColor: blue;
  --color-default: black;
}

使用變數 `var(variable_name, def_value)`

var的第一個引數為變數名，第二個引數為變數找不到時的備用值

div {
	background-color: var(--myColor, 'red');
}

我們還可以設定另外一個變數作為備用值

color: var(--myColor, var(--color-default));

互動媒體查詢

在建立響應式網站時，我們通常會根據螢幕尺寸對輸入機制做出假設。我們假設螢幕尺寸1920px屬於臺式電腦或筆記型電腦，並且使用者使用滑鼠和鍵盤與網站進行互動，但是帶有觸控式螢幕或智慧電視螢幕的筆記型電腦呢？

這就是互動媒體功能的用武之地，它允許我們根據主要的輸入機制——觸控、手寫筆、滑鼠，微呼叫戶可以與之互動的元件的可用性（輸入、畫布外選單、下拉式選單、模式等）指標等。

@media (pointer: fine) {
  /* 使用滑鼠或手寫筆 */
}
@media (pointer: coarse) {
  /* 觸控 */
}
@media (hover: hover) {
  /* 可以hover */
}
@media (hover: none) {
  /* 不能hover */
}

scroll-padding

在實現固定頭部時，頁面錨點捲動連結導致固定頁首覆蓋部分內容。在之前我們必須使用 JavaScript 來解決這個問題並實現自定義捲動邏輯以考慮固定的標題偏移量。如果檔頭高度在斷點處發生變化，事情只會變得更加複雜，幸運的是，我們不必再為此依賴 JavaScript。我們可以scroll-padding-top使用標準 CSS 媒體查詢指定和更改它的值。

html {
  scroll-padding-top: 6rem;
  scroll-behavior: smooth;
}

我們也可以設定其他方向或使用普通的 scroll-padding。

scroll-padding: /* ... */;

scroll-padding-top: /* ... */;
scroll-padding-right: /* ... */;
scroll-padding-bottom: /* ... */;
scroll-padding-left: /* ... */;