5 個 CSS 新功能

做者： Anna Monus
譯者：前端小智
來源：blog.logrocket

點贊再看，微信搜索 【大遷世界】,B站關注 【前端小智】這個沒有大廠背景，但有着一股向上積極心態人。本文 GitHub https://github.com/qq44924588... 上已經收錄，文章的已分類，也整理了不少個人文檔，和教程資料。

最近開源了一個 Vue 組件，還不夠完善，歡迎你們來一塊兒完善它，也但願你們能給個 star 支持一下，謝謝各位了。

github 地址：https://github.com/qq44924588...

在瀏覽器開始實現它們以前，CSS 新的功能一般須要通過長時間討論以後，纔在W3聯盟的規範中定義。 有許多值得一提的 CSS 新功能，可是在本文中，咱們重點介紹能夠瀏覽器的穩定版中進行測試的五個功能：

1. CSS Subgrid (子網格)
2. flex gaps
3. content-visibility 屬性
4. contains-intrinsic-size 屬性
5. :is 和 :where 僞類

瀏覽器對這些特性的支持一直在變化，能夠經過 Can I Use 來查看支持狀況。

1.CSS Subgrid

CSS 網格是一個靈活的佈局模塊，容許開發人員建立複雜的佈局，無需使用JavaScript或使用複雜的 CSS hack。

使用 CSS 網格的語法很簡單，以下所示：

.grid-container { display: grid; }

可使用幾個特定於網格的屬性來設置所需的確切佈局。

例如，在上面的示例中，.grid-container的子元素將是網格項，它們將根據使用grid-template-columns和grid-template-rows屬性定義的規則進行佈局：

.grid-container { display: grid; grid-template-columns: 1fr 2fr 1fr; grid-template-rows: 50px 70vh 50px; }

運行結果以下：

可是，若是你也想在網格佈局中包括.grid-container的某些（或所有）子孫元素怎麼辦？ 這就是CSS Subgrid 發揮做用的地方。

能夠向網格項目添加如下規則，以使其可以採用其父級的網格軌道（包括名稱網格線和區域，即便它也能夠定義本身的網格軌道和區域）。

.grid-item { /* 這些規則指定子網格在佈局中的位置*/ grid-column: 2 / 4; /* 兩列垂直 */ grid-row: 1 / 3; /* 兩行水平 */ /* 這些規則屬於子網格自己 */ display: grid; grid-template-columns: subgrid; grid-template-rows: subgrid; }

grid-column和grid-row屬性定義了網格項目在網格列或行中的位置。 .grid-item的子元素將造成子網格。 一個網格項目能夠跨越多個網格單元。 例如，這裏它分佈在四個像元上（在上面的示例中grid-column和grid-row的值是任意的）。

如上所見，subgrid 不是獨立的CSS屬性，而是能夠添加到grid-template-columns和grid-template-rows屬性的值。 它使.grid-item的子級包含在網格佈局中：

子網格已成爲網格佈局的一部分，而且已定位到咱們想要的確切位置（在第二和第四條垂直網格線之間，以及在第一和第三條水平網格線之間）。

其他的網格項目保持了正常的網格流，第四行也出如今佈局的底部。 可是，因爲咱們僅使用grid-template-rows屬性定義了三行，所以第四行沒有預設值，所以僅取其內容的天然高度。 若是咱們要從最後三個網格項目中刪除文本，則它們甚至不會顯示，由於它們的天然高度爲0。

可使用下面的CodePen演示來測試上面的示例。

咱們也能夠經過僅採用grid-template-columns或grid-template-rows併爲另外一項使用新值來建立一維子網格。

例如，在如下狀況下，子網格僅採用主網格的列，但爲行建立新規則

.grid-item { display: grid; grid-template-columns: subgrid; grid-template-rows: 200px 400px 200px; }

瀏覽器支持狀況

自2020年8月起，CSS 子網格規範已成爲W3C的候選推薦標準。目前，Firefox 71+僅支持該子網格規範，但開源 Web 瀏覽器 Chromium 也已開始使用它，該瀏覽器被用做主要瀏覽器（包括Chrome，Opera， Brave，以及新的Microsoft Edge。

2. Flexbox gaps

長期以來，在 felx 佈局中的行或列之間添加間隙一直是一個難題。 一般能夠經過在 flex 項目中添加 margin 來解決問題，可是margin的問題在於，它們也會被添加到每一個行或列的開頭和結尾。 即便能夠經過 CSS 來解決這些缺陷，但這也不是最理想的解決方案。

目前，瀏覽器對flexbox gap 的支持愈來愈好。 gap，row-gap 和column-gap 屬性存在於不一樣的上下文中，具備不一樣級別的瀏覽器支持。 咱們能夠在如下佈局模塊中使用gap屬性。

• 聲明 display: flex; 的模塊
• 聲明 display: grid; 的模塊
• 多列布局，由column-count或column-width屬性定義

在flexbox上下文中，咱們能夠這裏聲明 flex 項目以前的間距：

.flex-container { row-gap: 10px; column-gap: 15px; }

gap屬性是row-gap和column-gap的簡寫。 若是將它與兩個值一塊兒使用，則第一個表示row-gap，第二個表示column-gap。

.flex-container { gap: 10px 15px; }

若是僅使用一個值，則row-gap和column-gap將採用相同的值。

.flex-container { gap: 10px; }

瀏覽器支持狀況

Edge 84+，Firefox 63+，Chrome 84+和Opera 70+當前支持 gap屬性。 Internet Explorer 和 Safari 目前還不支持它。

3. content-visibility 屬性

在Chromium 85中，content-visibility屬性多是在提升頁面加載性能方面最具影響力的新CSS屬性之一。由於content-visibility可跳過不在屏幕上的內容渲染，包括佈局和渲染，直到真正須要佈局渲染的時候爲止。因此利用它可使初始用戶加載速度更快，還能與屏幕上的內容進行更快的交互。

它有三個值：

• visible — 元素渲染正常進行
• hidden— 跳過元素渲染時，不管是在屏幕外仍是在屏幕上
• auto — 當元素在屏幕外時，將跳過其渲染； 當它出如今屏幕上時，將自動渲染

能夠簡單地將content-visibility屬性添加到咱們但願更改其渲染過程的元素中。

article { content-visibility: auto; }

一個具備content-visibility: auto屬性的元素能夠得到佈局、樣式和繪製的限制（區域）。若是該元素不在屏幕上（而且與用戶無關，則相關元素將是在其子樹中具備焦點或已選擇的元素），它也會得到大小限制（containment）(而且中止繪製和對其內容進行命中測試)。

這意味着什麼呢？簡而言之，若是元素不在屏幕上，這不會渲染其後代。瀏覽器在不考慮元素任何內容的狀況下肯定元素的大小，在此處則跳過大多數渲染（例如元素子樹的樣式和佈局）。

當元素接近視口時，瀏覽器再也不增長大小限制，而是開始繪製並命中測試元素的內容。這使得渲染工做可以及時被用戶看到。

瀏覽器支持

content-visibility依賴於CSS Containement Spec中的原語（primitives）。雖然截止到目前只有Chromium 85中支持content-visibility屬性（and deemed "worth prototyping" for Firefox），可是大多數現代瀏覽器均支持Containement Spec。

contain-intrinsic-size 屬性

contains-intrinsic-size屬性定義激活大小限制的元素的顯式寬度和高度，這意味着元素的大小不受子元素大小的影響。 設置明確的寬度和高度旨在防止這些元素在某些狀況下崩潰爲零

爲了實現content-visibility的潛在好處，瀏覽器須要應用大小限制，以確保內容的呈現結果不會被任何方式影響元素的大小。 若是元素沒有在常規塊佈局中指定的高度，則其高度爲0。

這可能不是理想的，由於滾動條的大小會發生變化，這取決於每一個具備非零高度的內容。

因此， CSS 提供了另外一個屬性contains-intrinsic-size，若是元素受大小限制影響，它能夠有效地指定元素的天然大小。

article { content-visibility: auto; contain-intrinsic-size: 700px 1000px; }

瀏覽器支持

目前Chrome 83+，和支持contains-intrinsic-size`屬性， Firefox不支持。

5.:is 和 :where 僞類

:is() CSS 僞類 函數將選擇器列表做爲參數，並選擇該列表中任意一個選擇器能夠選擇的元素。這對於以更緊湊的形式編寫大型選擇器很是有用。

:where() CSS 僞類函數接受選擇器列表做爲它的參數，將會選擇全部能被該選擇器列表中任何一條規則選中的元素。

:where() 和 :is() 的不一樣之處在於，:where() 的優先級老是爲 0 ，可是 :is() 的優先級是由它的選擇器列表中優先級最高的選擇器決定的。

例如，有如下選擇器列表:

.my-class p em, .my-class li em, .my-class section em { // CSS rules }

若是要保持較高的優先級，以使其更難以用後續聲明覆蓋所屬規則，則可使用:is()縮短列表。

.my-class :is(p, li, section) em { // CSS rules }

若是咱們但願將優先級保持爲0以方便重寫所屬規則，那麼可使用:where()：

.my-class :where(p, li, section) em { // CSS rules }

在上面的示例中，.my-class em選擇器將覆蓋:where規則，但不會覆蓋:is。

瀏覽器支持

:is僞類目前被Firefox 78+和Safari 14+支持。基於 Chrome 的瀏覽器(Chrome 15+、Edge 79+、Opera 15+)使用:-webkit-any()前綴支持其前綴語法。你也能夠經過設置試驗性的網絡平臺特性標誌來啓用該功能:在Chrome 68+、Opera 55+和Edge 79+中選中。

:where僞類的支持較少。 目前，只有Firefox 78+支持它。

總結

目前， 目前還須要謹慎使用本文討論的CSS新功能。 理想狀況下，使用帶前綴的版本，或者等到它們獲得更普遍的實行。

可是，若是你想進行測試，則可使用content-visibility和contains-intrinsic-size屬性。 你能夠在已經支持該功能的瀏覽器中實現性能上的優化（可使用@supports規則測試瀏覽器支持），而且不會影響尚不支持該功能的瀏覽器。

總而言之，CSS新特性的標準化和實現過程值得咱們不斷關注。有許多有用的功能將最終使前端開發更容易和更快。

---

代碼部署後可能存在的BUG無法實時知道，過後爲了解決這些BUG，花了大量的時間進行log 調試，這邊順便給你們推薦一個好用的BUG監控工具 Fundebug。

原文：https://blog.logrocket.com/5-...

交流

文章每週持續更新，能夠微信搜索「 大遷世界 」第一時間閱讀和催更（比博客早一到兩篇喲），本文 GitHub https://github.com/qq449245884/xiaozhi 已經收錄，整理了不少個人文檔，歡迎Star和完善，你們面試能夠參照考點複習，另外關注公衆號，後臺回覆福利，便可看到福利，你懂的。