作者: Anna Monus
譯者:前端小智
來源:blog.logrocket
點贊再看,養成習慣
本文
GitHub
https://github.com/qq449245884/xiaozhi 上已經收錄,更多往期高贊文章的分類,也整理了很多我的檔案,和教學資料。歡迎Star和完善,大家面試可以參照考點複習,希望我們一起有點東西。
最近開源了一個 Vue 元件,還不夠完善,歡迎大家來一起完善它,也希望大家能給個 star 支援一下,謝謝各位了。
github 地址:https://github.com/qq449245884/vue-okr-tree
在瀏覽器開始實現它們之前,CSS 新的功能通常需要經過長時間討論之後,才在W3聯盟的規範中定義。 有許多值得一提的 CSS 新功能,但是在本文中,我們重點介紹可以瀏覽器的穩定版中進行測試的五個功能:
content-visibility
屬性contains-intrinsic-size
屬性:is
和 :where
偽類瀏覽器對這些特性的支援一直在變化,可以通過 Can I Use 來檢視支援情況。
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。
長期以來,在 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 目前還不支援它。
在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。
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不支援。
: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和完善,大家面試可以參照考點複習,另外關注公眾號,後臺回覆福利,即可看到福利,你懂的。