日日操夜夜添-日日操影院-日日草夜夜操-日日干干-精品一区二区三区波多野结衣-精品一区二区三区高清免费不卡

公告:魔扣目錄網(wǎng)為廣大站長(zhǎng)提供免費(fèi)收錄網(wǎng)站服務(wù),提交前請(qǐng)做好本站友鏈:【 網(wǎng)站目錄:http://www.ylptlb.cn 】, 免友鏈快審服務(wù)(50元/站),

點(diǎn)擊這里在線咨詢客服
新站提交
  • 網(wǎng)站:51998
  • 待審:31
  • 小程序:12
  • 文章:1030137
  • 會(huì)員:747

在瀏覽器開始實(shí)現(xiàn)它們之前,css 新的功能通常需要經(jīng)過長(zhǎng)時(shí)間討論之后,才在W3聯(lián)盟的規(guī)范中定義。有許多值得一提的 CSS 新功能,但是在本文中,我們重點(diǎn)介紹可以瀏覽器的穩(wěn)定版中進(jìn)行測(cè)試的五個(gè)功能:

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

瀏覽器對(duì)這些特性的支持一直在變化,可以通過 Can I Use 來查看支持情況。

1.CSS Subgrid

CSS 網(wǎng)格是一個(gè)靈活的布局模塊,允許開發(fā)人員創(chuàng)建復(fù)雜的布局,無需使用JAVAScript或使用復(fù)雜的 CSS hack

使用 CSS 網(wǎng)格的語法很簡(jiǎn)單,如下所示:

.grid-container {
    display: grid;
}

可以使用幾個(gè)特定于網(wǎng)格的屬性來設(shè)置所需的確切布局。

例如,在上面的示例中,.grid-container的子元素將是網(wǎng)格項(xiàng),它們將根據(jù)使用grid-template-columns和grid-template-rows屬性定義的規(guī)則進(jìn)行布局:

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

運(yùn)行結(jié)果如下:

你現(xiàn)在可以玩下這 5 個(gè) CSS 新功能

 

但是,如果你也想在網(wǎng)格布局中包括.grid-container的某些(或全部)子孫元素怎么辦?這就是CSS Subgrid 發(fā)揮作用的地方。

可以向網(wǎng)格項(xiàng)目添加以下規(guī)則,以使其能夠采用其父級(jí)的網(wǎng)格軌道(包括名稱網(wǎng)格線和區(qū)域,即使它也可以定義自己的網(wǎng)格軌道和區(qū)域)。

.grid-item {
    /* 這些規(guī)則指定子網(wǎng)格在布局中的位置*/
    grid-column: 2 / 4;      /* 兩列垂直 */
    grid-row: 1 / 3;         /* 兩行水平 */

    /* 這些規(guī)則屬于子網(wǎng)格本身 */
    display: grid;
    grid-template-columns: subgrid;
    grid-template-rows: subgrid;
}

grid-column和grid-row屬性定義了網(wǎng)格項(xiàng)目在網(wǎng)格列或行中的位置。.grid-item的子元素將形成子網(wǎng)格。一個(gè)網(wǎng)格項(xiàng)目可以跨越多個(gè)網(wǎng)格單元。例如,這里它分布在四個(gè)像元上(在上面的示例中g(shù)rid-column和grid-row的值是任意的)。

如上所見,subgrid 不是獨(dú)立的CSS屬性,而是可以添加到grid-template-columns和grid-template-rows屬性的值。它使.grid-item的子級(jí)包含在網(wǎng)格布局中:

你現(xiàn)在可以玩下這 5 個(gè) CSS 新功能

 

子網(wǎng)格已成為網(wǎng)格布局的一部分,并且已定位到我們想要的確切位置(在第二和第四條垂直網(wǎng)格線之間,以及在第一和第三條水平網(wǎng)格線之間)。

其余的網(wǎng)格項(xiàng)目保持了正常的網(wǎng)格流,第四行也出現(xiàn)在布局的底部。但是,由于我們僅使用grid-template-rows屬性定義了三行,因此第四行沒有預(yù)設(shè)值,因此僅取其內(nèi)容的自然高度。如果我們要從最后三個(gè)網(wǎng)格項(xiàng)目中刪除文本,則它們甚至不會(huì)顯示,因?yàn)樗鼈兊淖匀桓叨葹?。

可以使用下面的CodePen演示來測(cè)試上面的示例。

我們也可以通過僅采用grid-template-columns或grid-template-rows并為另一項(xiàng)使用新值來創(chuàng)建一維子網(wǎng)格。

例如,在以下情況下,子網(wǎng)格僅采用主網(wǎng)格的列,但為行創(chuàng)建新規(guī)則

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

瀏覽器支持情況

自2020年8月起,CSS 子網(wǎng)格規(guī)范已成為W3C的候選推薦標(biāo)準(zhǔn)。目前,F(xiàn)irefox 71+僅支持該子網(wǎng)格規(guī)范,但開源 Web 瀏覽器 Chromium 也已開始使用它,該瀏覽器被用作主要瀏覽器(包括Chrome,Opera, Brave,以及新的Microsoft Edge。

2. Flexbox gaps

長(zhǎng)期以來,在 felx 布局中的行或列之間添加間隙一直是一個(gè)難題。通常可以通過在 flex 項(xiàng)目中添加 margin 來解決問題,但是margin的問題在于,它們也會(huì)被添加到每個(gè)行或列的開頭和結(jié)尾。即使可以通過 CSS 來解決這些缺陷,但這也不是最理想的解決方案。

目前,瀏覽器對(duì)flexbox gap 的支持越來越好。 gap,row-gap 和column-gap 屬性存在于不同的上下文中,具有不同級(jí)別的瀏覽器支持。我們可以在以下布局模塊中使用gap屬性。

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

在flexbox上下文中,我們可以這里聲明 flex 項(xiàng)目之前的間距:

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

gap屬性是row-gap和column-gap的簡(jiǎn)寫。如果將它與兩個(gè)值一起使用,則第一個(gè)表示row-gap,第二個(gè)表示column-gap。

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

如果僅使用一個(gè)值,則row-gap和column-gap將采用相同的值。

.flex-container {
  gap: 10px;
}

瀏覽器支持情況

Edge 84+,F(xiàn)irefox 63+,Chrome 84+和Opera 70+當(dāng)前支持 gap屬性。Internet Explorer 和 Safari 目前還不支持它。

3. content-visibility 屬性

在Chromium 85中,content-visibility屬性可能是在提高頁面加載性能方面最具影響力的新CSS屬性之一。因?yàn)閏ontent-visibility可跳過不在屏幕上的內(nèi)容渲染,包括布局和渲染,直到真正需要布局渲染的時(shí)候?yàn)橹埂K岳盟梢允钩跏加脩艏虞d速度更快,還能與屏幕上的內(nèi)容進(jìn)行更快的交互。

它有三個(gè)值:

  • visible — 元素渲染正常進(jìn)行
  • hidden— 跳過元素渲染時(shí),無論是在屏幕外還是在屏幕上
  • auto — 當(dāng)元素在屏幕外時(shí),將跳過其渲染;當(dāng)它出現(xiàn)在屏幕上時(shí),將自動(dòng)渲染

可以簡(jiǎn)單地將content-visibility屬性添加到我們希望更改其渲染過程的元素中。

article {
  content-visibility: auto;
} 

一個(gè)具有content-visibility: auto屬性的元素可以獲得布局、樣式和繪制的限制(區(qū)域)。如果該元素不在屏幕上(并且與用戶無關(guān),則相關(guān)元素將是在其子樹中具有焦點(diǎn)或已選擇的元素),它也會(huì)獲得大小限制(containment)(并且停止繪制和對(duì)其內(nèi)容進(jìn)行命中測(cè)試)。

這意味著什么呢?簡(jiǎn)而言之,如果元素不在屏幕上,這不會(huì)渲染其后代。瀏覽器在不考慮元素任何內(nèi)容的情況下確定元素的大小,在此處則跳過大多數(shù)渲染(例如元素子樹的樣式和布局)。

當(dāng)元素接近視口時(shí),瀏覽器不再增加大小限制,而是開始繪制并命中測(cè)試元素的內(nèi)容。這使得渲染工作能夠及時(shí)被用戶看到。

瀏覽器支持

content-visibility依賴于CSS Containement Spec中的原語(primitives)。雖然截止到目前只有Chromium 85中支持content-visibility屬性(and deemed "worth prototyping" for Firefox),但是大多數(shù)現(xiàn)代瀏覽器均支持Containement Spec。

contain-intrinsic-size 屬性

contains-intrinsic-size屬性定義激活大小限制的元素的顯式寬度和高度,這意味著元素的大小不受子元素大小的影響。設(shè)置明確的寬度和高度旨在防止這些元素在某些情況下崩潰為零

為了實(shí)現(xiàn)content-visibility的潛在好處,瀏覽器需要應(yīng)用大小限制,以確保內(nèi)容的呈現(xiàn)結(jié)果不會(huì)被任何方式影響元素的大小。如果元素沒有在常規(guī)塊布局中指定的高度,則其高度為0。

這可能不是理想的,因?yàn)闈L動(dòng)條的大小會(huì)發(fā)生變化,這取決于每個(gè)具有非零高度的內(nèi)容。

所以, CSS 提供了另一個(gè)屬性contains-intrinsic-size,如果元素受大小限制影響,它可以有效地指定元素的自然大小。

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

瀏覽器支持

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

5.:is 和 :where 偽類

:is() CSS 偽類 函數(shù)將選擇器列表作為參數(shù),并選擇該列表中任意一個(gè)選擇器可以選擇的元素。這對(duì)于以更緊湊的形式編寫大型選擇器非常有用。

:where() CSS 偽類函數(shù)接受選擇器列表作為它的參數(shù),將會(huì)選擇所有能被該選擇器列表中任何一條規(guī)則選中的元素。

:where() 和 :is() 的不同之處在于,:where() 的優(yōu)先級(jí)總是為 0,但是 :is() 的優(yōu)先級(jí)是由它的選擇器列表中優(yōu)先級(jí)最高的選擇器決定的。

例如,有以下選擇器列表:

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

如果要保持較高的優(yōu)先級(jí),以使其更難以用后續(xù)聲明覆蓋所屬規(guī)則,則可以使用:is()縮短列表。

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

如果我們希望將優(yōu)先級(jí)保持為0以方便重寫所屬規(guī)則,那么可以使用:where():

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

在上面的示例中,.my-class em選擇器將覆蓋:where規(guī)則,但不會(huì)覆蓋:is。

瀏覽器支持

:is偽類目前被Firefox 78+和Safari 14+支持。基于 Chrome 的瀏覽器(Chrome 15+、Edge 79+、Opera 15+)使用:-webkit-any()前綴支持其前綴語法。你也可以通過設(shè)置試驗(yàn)性的網(wǎng)絡(luò)平臺(tái)特性標(biāo)志來啟用該功能:在Chrome 68+、Opera 55+和Edge 79+中選中。

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

總結(jié)

目前, 目前還需要謹(jǐn)慎使用本文討論的CSS新功能。理想情況下,使用帶前綴的版本,或者等到它們得到更廣泛的實(shí)行。

但是,如果你想進(jìn)行測(cè)試,則可以使用content-visibility和contains-intrinsic-size屬性。你可以在已經(jīng)支持該功能的瀏覽器中實(shí)現(xiàn)性能上的優(yōu)化(可以使用@supports規(guī)則測(cè)試瀏覽器支持),并且不會(huì)影響尚不支持該功能的瀏覽器。

總而言之,CSS新特性的標(biāo)準(zhǔn)化和實(shí)現(xiàn)過程值得我們不斷關(guān)注。有許多有用的功能將最終使前端開發(fā)更容易和更快。

作者:Anna Monus 譯者:前端小智 來源:blog.logrocket
原文:https://blog.logrocket.com/5-new-css-features-you-can-already-test

分享到:
標(biāo)簽:新功能 CSS
用戶無頭像

網(wǎng)友整理

注冊(cè)時(shí)間:

網(wǎng)站:5 個(gè)   小程序:0 個(gè)  文章:12 篇

  • 51998

    網(wǎng)站

  • 12

    小程序

  • 1030137

    文章

  • 747

    會(huì)員

趕快注冊(cè)賬號(hào),推廣您的網(wǎng)站吧!
最新入駐小程序

數(shù)獨(dú)大挑戰(zhàn)2018-06-03

數(shù)獨(dú)一種數(shù)學(xué)游戲,玩家需要根據(jù)9

答題星2018-06-03

您可以通過答題星輕松地創(chuàng)建試卷

全階人生考試2018-06-03

各種考試題,題庫,初中,高中,大學(xué)四六

運(yùn)動(dòng)步數(shù)有氧達(dá)人2018-06-03

記錄運(yùn)動(dòng)步數(shù),積累氧氣值。還可偷

每日養(yǎng)生app2018-06-03

每日養(yǎng)生,天天健康

體育訓(xùn)練成績(jī)?cè)u(píng)定2018-06-03

通用課目體育訓(xùn)練成績(jī)?cè)u(píng)定