你現在可以玩下這 5 個 CSS 新功能-有解無憂

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

點贊再看，養成習慣

本文 GitHub https://github.com/qq449245884/xiaozhi 上已經收錄，更多往期高贊文章的分類，也整理了很多我的檔案，和教程資料，歡迎Star和完善，大家面試可以參照考點復習，希望我們一起有點東西，

最近開源了一個 Vue 組件，還不夠完善，歡迎大家來一起完善它，也希望大家能給個 star 支持一下，謝謝各位了，

github 地址：https://github.com/qq449245884/vue-okr-tree

在瀏覽器開始實作它們之前，CSS 新的功能通常需要經過長時間討論之后，才在W3聯盟的規范中定義，有許多值得一提的 CSS 新功能，但是在本文中，我們重點介紹可以瀏覽器的穩定版中進行測驗的五個功能：

CSS Subgrid (子網格)
flex gaps
content-visibility 屬性
contains-intrinsic-size 屬性
: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-new-css-features-you-can-already-test/

交流

文章每周持續更新，可以微信搜索「大遷世界」第一時間閱讀和催更（比博客早一到兩篇喲），本文 GitHub https://github.com/qq449245884/xiaozhi 已經收錄，整理了很多我的檔案，歡迎Star和完善，大家面試可以參照考點復習，另外關注公眾號，后臺回復福利，即可看到福利，你懂的，