css新特性

宣言：合抱之木，生于毫末；九層之臺，起于累土

本篇可能有些屬性已經不是那么新了，還是寫了一下并有人知道有人不知道嘛！對于本篇的例子我寫的那可謂是相當簡單，非常易于理解。嘻嘻，至少我覺得是那樣！如果看了本文的同學真的有所收獲那我也是非常幸運，如果沒什么收獲，看看就好啦！我會再接再厲的！！！

:is()

:is()css偽類函數可將選擇器列表作為參數，并選擇該列表中任意一個選擇器可以選擇的元素。就是說is它的參數是一個列表可以選擇列表任意的元素。

利用:is()來對css進行代碼的重復部分的刪減。

舉個例子：

//選擇header,main,footer任意一個懸浮狀態的段落p :is(header,main,footer)p:hover{color:red;cursor:pointer; } //上面的css相當于下面： header p:hover, main p:hover, footer p:hover {color: red;cursor: pointer; }

是不是覺得有了這個元素確實可以減少一些代碼呢 。從下面的瀏覽器支持情況來看的話還不是很好ie完全不支持，其他的基本只支持高版本的瀏覽器。不建議在項目中直接使用。

:where()

:where()與:is()具有相同的語法和功能，但是:where()不會增加整體選擇器的特殊性，因此我們可以使用:where()來降低特殊性.

什么是特殊性呢？就是某條css規則的特殊性越高，它的樣式被應用的優先級越高

:where() 的優先級總是為 0 ，但是 :is() 的優先級是由它的選擇器列表中優先級最高的選擇器決定的。

:not()

Selectors Level 3 只允許:not()偽類接受一個簡單的選擇器，元素不能匹配任何一個。因此不能寫成：
not(a, .b, [c])或者:not(a.b[c])。但是在Selectors Level 4中允許:not()偽類接收一個列表選擇器。因此可以支持:not(a, .b, [c])的寫法。

:not()的用法

//設置所有未設置.header的標簽內字體顏色 <p>第一行</p> <p class="header">第二行</p> <p>第三行</p> <p class="header">第四行</p> <p>第五行</p>

:has()

:has()表示只選擇包含指定元素的內容。比如div:has(>img)

:empty

:empty()標識空的元素

//如果p標簽內無元素，背景則為紅色 p:empty{background-color:red}

這個偽類我感覺對于空的處理還是比較好的，無需if語句判斷就可以直接css搞定。可以應用的場景也挺多。

比如列表某行為空時，可以利用empty為其添加為空的圖片示意。但是如果說你想在空的地方插入內容，那只使用empty是遠遠不夠的。我們可以使用:empty+:before/:after向標簽內插入內容、圖形，并不影響empty偽類的匹配。如下：

p:empty::before{content:'_______'}<p>假如生活欺騙了你</p><p></p><p>不要心急</p>

并且瀏覽器對與它的支持也比較好。

:blank

:blank選擇輸入框為空的元素比如和

目前:blank的瀏覽器完全無法支持，CSSWG正在持續改進它。

display：contents

display對于我們來說是最常見的屬性，但是contents這個取值我們幾乎用不到。但是它早在 2016 年就已經得到了 Firefox 的支持。

當前大多數瀏覽器對 display: contents; 的實現是：將設置了該值的元素從可訪問性樹中移除，但保留其子代元素。這會導致該元素自身不再被屏幕閱讀技術訪問zh。

設置display:contents的元素本身不會被渲染，但是其子元素可以正常被渲染。

那它可以做什么呢？

我覺得設置了它就類似于小程序里面的或者vue里面的.用來充當無語義的包裹框。而和不會被渲染在DOM樹中，查看頁面結構也無法看到，但是display:contents是存在于頁面結構中的，只是沒有生成任何盒子。

找個別人例子給大家看一下：

.container {width: 200px;height: 100px;background: #bbb;}.wrap {border: 2px solid red;padding: 20px;box-sizing: border-box;}.inner {border: 2px solid green;padding: 20px;box-sizing: border-box;}<div class="container"><div class="wrap" style="display: contents"><div class="inner"></div></div></div>

未設置contents屬性值的展示：

設置之后的展示：

目前這個屬性值的瀏覽器支持情況如下：

css滾動快照

css引入滾動快照，它強制滾動位置，即滾動容器的滾動端口在滾動操作完成后可能結束的滾動位置。

它擁有滾動容器屬性和滾動子元素上的屬性。具體屬性這里就不列舉了地址貼在這里：

css滾動快照：容器屬性和子屬性

下面舉個例子：利用滾動容器屬性scroll-snap-type和子屬性scroll-snap-align完成當滑動時一定落在一個整塊內

ul {display: flex;width: 300px;flex-direction: row;flex-wrap: nowrap;overflow-x: auto;scroll-snap-type: x mandatory; }li {width: 300px;height: 100px;flex-shrink: 0;background-color: aqua;scroll-snap-align: center;//使得不規則子元素每次滾動后居于容器中間border-right: 2px solid #fff; }

scroll-snap-type含有以下屬性：

/* 關鍵值 */ scroll-snap-type: none; //當這個滾動容器的可視的 viewport 是滾動的，它必須忽略臨時點。 scroll-snap-type: x; //滾動容器只捕捉其水平軸上的捕捉位置。 scroll-snap-type: y; //滾動容器只捕捉其垂直軸上的捕捉位置。 scroll-snap-type: block; //滾動容器僅捕捉到其塊軸上的捕捉位置。 scroll-snap-type: inline; //滾動容器僅捕捉到其內聯軸上的捕捉位置。 scroll-snap-type: both; //滾動容器會獨立捕捉到其兩個軸上的位置（可能會捕捉到每個軸上的不同元素）/* 可選 mandatory | proximity*/ scroll-snap-type: x mandatory; //捕捉x軸上的滾動，每次滾動后強制停留到規定的位置 scroll-snap-type: y proximity; //捕捉y軸上的滾動，每次滾動后強制停留到規定的位置 scroll-snap-type: both mandatory; //mandatory:當滾動動作結束，如果可能，它會臨時在那個點上。如果內容被添加、移動、刪除或者重置大小，滾動偏移將被調整為保持靜止在臨時點上。 //proximity:如果它當前沒有被滾動，這個滾動容器的可視視圖將基于用戶代理滾動的參數去到臨時點上。如果內容被添加、移動、刪除或者重置大小，滾動偏移將被調整為保持靜止在臨時點上。/* 全局值 */ scroll-snap-type: inherit; scroll-snap-type: initial; scroll-snap-type: unset;

scroll-snap-align的屬性值：

• start:指定滾動到子元素的開始位置
• end：指定滾動到子元素的結束位置
• center：指定滾動到子元素的中間位置

看完感覺捕捉快照這個css特性還是相當好用，不僅增強了用戶體檢并且更容易實現滾動體驗。

下面是目前這屬性的瀏覽器支持情況：

background-repeat

一直使用background-repeat這個屬性，只了解這幾個屬性no-repeat或repeat(repeat-x/repeat-y)，但是對于剩余的屬性round和repeat確實從未使用過。下面大概講一下這些屬性的特點：

repeat:有時候會造成背景圖片在平鋪的時候被裁剪

round:可以讓背景圖片在平鋪的時候根據容器的寬高對背景圖片做相應的尺寸調縮放，不會裁剪圖片。

space:可以讓背景圖裁剪至容器大小，不會縮放。

@supports功能查詢

這個特性可以指定依賴于瀏覽器中的一個或者多個特定的css功能的支持聲明。被稱為特性查詢。

在javascript中，我們可以通過css對象模型接口CSSSupportsRule來訪問@supports。

@supports支持由一組樣式聲明和一條支持條件構成。支持條件由一條或者多條使用and\or\not組成；可以使用圓括號調整操作符的優先級。

@supports (display: grid){//判斷瀏覽器是否支持display: grid.site-content {display: grid;}}/* @supports理解操作符 not\and\or來創造更具體的規則 */

比如可能移動端經常會使用它來解決iphonex的底部的黑條：

// 判斷瀏覽器是否支持 bottom: env(safe-area-inset-bottom） @supports (bottom: env(safe-area-inset-bottom)) { body::after{ //如果兼容，則給底部添加安全距離content:'',display:block,height:constant(safe-area-inset-buttom), //高度等于小黑條的高度background-color:white,} }

下面是目前這個特性的瀏覽器支持情況：

Gaps

經過查詢資料發現gaps發布于2016年，在當時的話還并不適用，那經過了這么多年現在它的兼容性基本良好，可以應用在項目中。什么是gaps，翻譯過來就是縫隙的意思。它一共有6個屬性：

• row-gap
• column-gap
• gap
• grid-row-gap
• grid-column-gap
• grid-gap

我們基本可以忽略后面的這3個屬性，因為隨著使用漸漸被廢棄了。雖然瀏覽器還支持，但是基本會忽略它的前綴 grid-

現在我們來講件這前三個屬性，gap是前兩個屬性的縮寫，因此我們只要搞懂了前兩個row-gap和column-gap，自然會明白gap作用啦

看個例子吧！

.flex-column-gap{display: flex;column-gap: 16px;}.flex-row-gap{display: grid;row-gap: 16px;gap: 16px;}

（1）藍色區域是使用了column-gap在列間中引入空隙
（2）紅色區域使用了row-gap 在行間中引入空隙

現在我們對這幾個屬性清楚了吧，看一下兼容性，這里只貼了gap這個綜合屬性的兼容性，其它兩個屬性與這個基本類似，感興趣可以去查查：

這個是gap和grid搭配使用的兼容性，與flexbox搭配的兼容情況如下：

content-visibility

content-visibility控制元素是否呈現其內容，能讓用戶潛在地控制元素的呈現。就像懶加載一樣，僅渲染可視區域內的元素，讓頁面渲染性能極大提升。它包含三個屬性值：visible、hidden、auto

• visible:沒有效果。元素的內容按照正常的方式布局和呈現。
• hidden: 無論元素是否在可視區域內，都不渲染。類似于display:none比如：頁面內查找、選項卡順序導航等也是不能可選擇的或者可聚焦的。
• auto：可視區域外的元素將會被跳過，一旦出現在可視區域內就會被渲染。

這個屬性雖好，但是當前瀏覽器的支持率比較低。之后如果瀏覽器支持了那將會很nice哦

:target 和 :target-within

:target與我們熟知的錨點定位關系密切。那錨點定位是怎樣子的呢？

錨點定位有以下幾種方法：

1.id定位:任意標簽都可 <a href='#content1'> <div id="head"></div> <div id="content1">....</div> 2.name定位:只能對a標簽進行定位，其他標簽不可以 <a href='#content1'> <a name="content1">....</a> 3.js定位: <div onclick='javascript:document.getElementById('here').scrollIntoView'></div>

為什么說它們關系密切，因為:target表示一個唯一的活動元素（目標元素），它的id與當前的URL跳轉地址匹配。根據id，設置目標元素跳轉后的樣式。

/* :target{width: 200px;border-radius: 4px;background-color: rgb(57, 100, 86);} *//* 或者這樣 */#content1:target,#content2:target,#content3:target {width: 200px;border-radius: 4px;background-color: rgb(57, 100, 86);} <p><a href="#content1">跳轉到1號位</a></p><p><a href="#content2">跳轉到2號位</a></p><ul><li id="content1">1號位的背景</li><li id="content2">2號位的背景</li></ul>

當然不僅僅可以做這種，我們也可以利用這個選擇器做tab的切換或者抽屜式菜單（target和not:target）

既然這么好用了當然有人肯定要問兼容性了，看下圖：還是很不錯的哦

與此屬性相關的一些屬性還有:target-text和:target-within但是兼容性都不好基本沒法使用。感興趣的可以去體驗一下這里就不講啦。

總結

以上是生活随笔為你收集整理的css新特性的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。