多年來，CSS已經(jīng)超越了背景顏色、邊框、文本樣式、邊距和盒模型。現(xiàn)代CSS能夠提供一系列的功能，而在過去，您需要JavaScript或變通方法來實現(xiàn)這些功能。
為了慶祝它在2021年取得的成就，在這篇文章中，我們想看看一些你可能不知道的令人驚嘆的CSS新特性。我們將強調(diào)web設(shè)計人員和開發(fā)人員可以用現(xiàn)代CSS做的很酷的事情，討論用例，瀏覽器支持，并給你一個快速的例子。
CSS的新功能：現(xiàn)代CSS可以做什么
這是CSS如今具備的一些令人驚奇的功能
自定義屬性/變量
自定義屬性基本上允許你在一個集中的地方定義CSS屬性的替身，以用于你的設(shè)計。要理解為什么這很有用，最好的方法就是去看一個例子。
通常，在構(gòu)建一個主題時，你會選擇一個配色方案，然后每次都要聲明這些顏色。
a {
color: #cd2653;
}
.social-icons a {
background: #cd2653;
}
.wp-block-button.is-style-outline {
color: #cd2653;
}
這種方法的問題是，如果你想對其中一種顏色進行更改，你必須更改它的每一個實例。雖然代碼編輯器可以通過搜索和替換輕松做到這一點，但這仍然很煩人。特別是當你只是想做一個快速的測試，而又要把所有的東西反過來的時候。
有更好的解決方案
自定義屬性可以解決這個問題。在它們的幫助下，你可以將有關(guān)顏色指定給一個變量一次，然后每次使用時只需將該變量作為CSS屬性輸入即可，就像這樣：
:root {
--global--color-primary: #28303d;
}
a {
color: var(--global--color-primary);
}
.social-icons a {
background: var(--global--color-primary);
}
這樣，當您要進行更改時，只需要在一個地方進行更改即可?？岚桑窟^去，你需要采用SASS這樣的預(yù)處理程序來使用變量，現(xiàn)在它是CSS的一個原生功能。
正如您在上面看到的，自定義屬性也非常易于使用。在文檔開頭的 :root選擇器下定義你的變量（注意雙連字符 -- 在變量前面，這就是將它們定義為自定義屬性的原因，而且它們是區(qū)分大小寫的?。Ｖ?，你可以通過 var() 函數(shù)在整個文檔中使用它們。
如果你想改變一個變量，只需改變 :root 下的聲明就可以了。
至于此CSS功能的采用程度如何，瀏覽器支持非常好：
@supports
接下來，我們有一個類似于媒體查詢的CSS規(guī)則。然而，@supports 并不是讓CSS規(guī)則以屏幕大小或手機類型為條件，而是允許你根據(jù)用戶瀏覽器支持的CSS屬性和值來做同樣的事情。
這有什么用？
正如你將在這篇文章中看到的那樣，并非所有的瀏覽器和設(shè)備都支持所有的CSS功能。雖然你通?？梢允褂没赝寺暶鱽硖幚磉@個問題，但在某些情況下，如果你不特別包含對舊技術(shù)的支持，就會嚴重破壞你的網(wǎng)站。
此外，你還可以使用 @supports 為更現(xiàn)代的瀏覽器添加額外的功能或樣式，以便處理它們（這就是為什么使用 @supports 的查詢也被稱為“功能查詢”）。
如何使用功能查詢
如果你熟悉媒體查詢，使用支持檢查將非常容易。下面是如何使用它：
@supports (display: grid) {
.site-content {
display: grid;
}
}
正如你所看到的，它只是簡單的規(guī)則，后面的括號里是你要檢查的屬性或?qū)傩灾祵?。之后就是通常的CSS聲明，如果滿足條件，要應(yīng)用什么規(guī)則。
上面的例子指出，如果瀏覽器支持CSS grid（稍后會有更多的說明），它應(yīng)該將 display: grid; 應(yīng)用到帶有 .site-content 類的元素上。
還需要注意的是，@supports 理解操作符not、and、和 or（也可以組合）來創(chuàng)建更具體的規(guī)則，比如為不支持該特定功能的瀏覽器提供回退。
@supports not (display: grid) {
.site-content {
float: left;
}
}
為了正確地使用@supports，你需要知道哪些瀏覽器支持它，好消息是所有現(xiàn)代瀏覽器都支持。
但是，由于這些查詢的目標是啟用或禁用舊瀏覽器無法處理的特性，所以請確保正確地構(gòu)造它們。這意味著，如果要使用特性查詢，請為支持特性查詢的瀏覽器創(chuàng)建它。
Flexbox Gaps
Flexbox是我們之前詳細討論過的另一個CSS布局模塊。長期以來，它的一個弱點就是flexbox間隙，也就是可以定義行和列之間的中斷。
值得慶幸的是，瀏覽器對這個CSS功能的支持正在改善?，F(xiàn)在您可以開始使用 gap、row-gap 和 column-gap 在使用Grid、Flexbox和Multi-Column Layouts創(chuàng)建的布局中創(chuàng)建空間。
這是一個簡短的示例，說明在flexbox中的外觀：
.flex-gap-test {
display: inline-flex;
flex-wrap: wrap;
gap: 16px;
}
<div class="flex-gap-test">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>
這是在頁面上：
雖然可以通過頁邊距來實現(xiàn)同樣的布局，但它需要更多的標記和變通方法，而不是簡單地聲明間隙大小。
content-visibility
content-visibility 是一個非?？岬男翪SS功能，可以提高網(wǎng)站性能。它的工作原理基本上就像懶惰加載一樣，只是不針對圖片，而是針對任何HTML元素。您可以使用它來阻止網(wǎng)站的任何部分加載，直到其可見為止。
使用也超級簡單，只需將其應(yīng)用到你所選擇的元素上，就像這樣：
.content-below-fold {
content-visibility: auto;
}
content-visibility 有三個值。默認情況下，它被設(shè)置為可見，在這種情況下，元素會像往常一樣加載。另外，你也可以將其設(shè)置為hidden，在這種情況下，無論元素是否可見，都不會被渲染。另一方面，當設(shè)置為 auto時，可見區(qū)域外的元素將被跳過，一旦出現(xiàn)在屏幕上，就會被渲染。
很酷的東西，對不對？
在這種情況下，有一點可能也很重要，那就是 contain-intrinsic-size。由于設(shè)置為 content-visibility: hidden; 的元素實際上大小為零，這讓你可以為隱藏的元素應(yīng)用一個理論上的高度和寬度，以便瀏覽器可以從一開始就考慮到它，而不是在元素渲染時才考慮。這樣，您可以避免在滾動過程中布局突然改變。
瀏覽器對 content-visibility 的支持還有點不完善，但也在不斷完善中。同樣的，對于contain-intrinsic-size的支持也是如此。
一旦被更廣泛地采用，我預(yù)測它將成為加快渲染過程的最有效工具之一。
Transitions, Transforms, Animations
在以前，如果你想讓東西在你的網(wǎng)站上移動，你通常不得不求助于JavaScript（或動畫GIF，對于那些屬于MySpace一代的人）。然而，你可能不知道的是，多年來CSS也有能力讓東西動起來。實現(xiàn)這類事情的三大工具是：
- 過渡 Transitions——允許你使一個屬性值到另一個屬性值的變化（如懸停效果）平滑而不是突然。
- 轉(zhuǎn)換 Transformations——使您可以在2D和3D空間中移動，旋轉(zhuǎn)和縮放元素。
- 動畫 Animations——在CSS中設(shè)置簡單或復(fù)雜的動畫，并配置它們的運行方式和時間。
自然，我們沒有篇幅在這里詳細介紹這三個方面的內(nèi)容。然而，讓我們?yōu)槊總€人做一些速成的例子，讓你對可能的事情有一個印象。
CSS過渡
這是CSS過渡的快速示例：
div {
width: 100px;
height: 100px;
transition: height 3s;
}
div:hover {
height: 500px;
}
當有人懸停在元素上時，上面的標記將使 div 高度的增加速度減慢到3秒。
CSS轉(zhuǎn)換
以下是CSS轉(zhuǎn)換的示例。當有人將鼠標懸停在元素上方時，它將使元素順時針旋轉(zhuǎn)30度：
div:hover {
transform: rotate(30deg);
}
CSS動畫
最后，是展示CSS動畫的簡短代碼段：
@keyframes color-change {
from {background-color: blue;}
to {background-color: yellow;}
}
div:hover {
animation-name: color-change;
animation-duration: 3s;
}
注意如何使用 @keyframes 命名動畫并定義其功能，然后使用 animation-name 將其應(yīng)用于元素。animation-duration 控制完成的時間，還有其他類似的屬性。
如果你想嘗試所有這些，好消息是，瀏覽器的支持非常好，因此，沒有任何障礙可以讓您隨意旋轉(zhuǎn)CSS過渡，轉(zhuǎn)換和動畫。
滾動捕捉
Scroll snapping讓你可以選擇將用戶的視口鎖定在你網(wǎng)站的某個部分或元素上。它對創(chuàng)建酷炫的過渡非常有用，并幫助用戶在向下滾動頁面時關(guān)注最重要的頁面元素。
這種效果在移動應(yīng)用程序中很多可見，但是，通過滾動捕捉，您也可以將其帶到網(wǎng)站上。
在最基本的層面上，使用也相對簡單。你只需將滾動捕捉的類型應(yīng)用到一個容器上，并定義它的子代應(yīng)該捕捉到哪里。
.container {
scroll-snap-type: y mandatory;
}
.container div {
scroll-snap-align: start;
}
瀏覽器的兼容性還算不錯。
然而，請注意，所有可用的滾動捕捉屬性的支持有點不均衡。因此，請務(wù)必檢查您的特定用例。
:is 和 :where
在我們的新CSS特性列表中，你可能不知道的最后一個條目是 :is 和 :where 偽類。它們允許你通過縮短CSS選擇器的列表來減少CSS標記的重復(fù)。
例如，比較一下：
.main a:hover,
.sidebar a:hover,
.site-footer a:hover {
/* markup goes here */
}
對此：
:is(.main, .sidebar, .site-footer) a:hover {
/* markup goes here */
}
相同的東西適用于 :where：
:where(.main, .sidebar, .site-footer) a:hover {
/* markup goes here */
}
如果標記是一樣的，有什么區(qū)別呢？不同的是 :is 更具體。它取括號中最特殊的元素的特殊性程度。相比之下，:where 的特異性永遠是零。因此，再往下覆蓋就容易多了。
瀏覽器的應(yīng)用還有點不穩(wěn)定，但慢慢就會有了。所以，請隨意開始嘗試。
還有其他值得一看的CSS新功能嗎？
像所有其他的Web技術(shù)一樣，CSS標記也在不斷發(fā)展。這意味著，總是有新的CSS功能可以發(fā)現(xiàn)，有新的東西可以嘗試和試驗。
上面，我們已經(jīng)看了一些CSS如今已經(jīng)能夠做到的事情的例子，你可能會忽略。
你最喜歡現(xiàn)代CSS的什么功能？在下面的評論區(qū)分享吧
