前言?

隨著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: /* ... */;

兼容性

字體渲染選項?

相信大家都做過一些倒計時場景，這里我們會發現如果純文本渲染時，會出現一種奇怪的現象 ---- 數字詭異跳動。造成這個現象的主要原因是每個數字的渲染寬度其實并不一樣。

比如這個，數字在變化的過程中，整個文本也在跟隨左右跳動，這里我們可能會為每一個數字包一層盒子，然后將盒子的寬固定，再讓數字劇中就可以避免這種情況了，但這樣很麻煩。今天給大家介紹一種純CSS的解決方案，只需要一行CSS！

font-variant-numeric: tabular-nums

tabular-nums通過為所有數字字符設置相同的寬度來解決上述問題。

我們再來對比看一下：

兼容性