CSS五個最新的特性怎么使用

今天小編給大家分享一下CSS五個最新的特性怎么使用的相關(guān)知識點，內(nèi)容詳細，邏輯清晰，相信大部分人都還太了解這方面的知識，所以分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后有所收獲，下面我們一起來了解一下吧。

案例：創(chuàng)建一個新聞提要（Newsfeed）

通過一個新聞提要為例，分不同的步驟向大家闡述這個新聞提要是怎么制作的，以及在制作這個案例的時候，這五個CSS特性是如何在案例中得到運用。

Step1：新聞提要的HTML模板

我們這個案例其實很簡單，并未使用任何JavaScript框架，還是使用原始的HTML結(jié)構(gòu)來做這個Demo。所以我們需要一些簡單的HTML的標簽，幫助我們創(chuàng)建Demo。這里使用了一個類名為 .container 的 div ，該 div 包含了一個類名為 .feed 的 ul ，然后創(chuàng)建了十個 li ，每個 li包含了一個類名為 .card 的 div 。

在第五個和第六個 li 之間創(chuàng)建了另一個名為 nested 的 li ，其包含了一個無序列表 ul ,而且包含了三個 li 創(chuàng)建三個卡片。

<div class="container">

<ul class="feed">

<li><div class="card">Card 1</div></li>

<li><div class="card">Card 2</div></li>

<li><div class="card">Card 3</div></li>

<li><div class="card">Card 4</div></li>

<li><div class="card">Card 5</div></li>

<li class="nested">

<ul>

<li><div class="card">Card A</div></li>

<li><div class="card">Card B</div></li>

<li><div class="card">Card C</div></li>

</ul>

</li>

<li><div class="card">Card 6</div></li>

<li><div class="card">Card 7</div></li>

<li><div class="card">Card 8</div></li>

<li><div class="card">Card 9</div></li>

<li><div class="card">Card 10</div></li>

</ul>

</div>

在沒有任何樣式的情況之下，你看到的效果是這樣的：

Step2：添加樣式

現(xiàn)在要給示例添加一些基本樣式，使其看起來更像一個新聞提要：

body {

background-color: grey;

.container {

max-width: 800px;

margin: 0 auto;

.card {

background-color: #fff;

padding: 10px;

margin: 10px;

min-height: 300px;

最后，在 .feed 上使用Flexbox相關(guān)的特性，讓每行有兩張卡片：

.feed {

display: flex;

flex-wrap: wrap;

li {

flex: 1 0 50%;

效果如下：

如果你從未接觸過Flexbox相關(guān)的知識， 強烈建議你花點時間閱讀這些文章 。因為Flexbox發(fā)展到今天，已經(jīng)開始取代 float 來布局，成為最主流的布局方式之一，特別是在移動端上的布局。

Step03：解決布局問題

當你向下滾動列表時，你會發(fā)現(xiàn) .nested 下的三個 li （對應的是 CardA ~ CardC ）影響了整體的布局效果：

其實我們想要的，或者說理想狀態(tài)下，所有的卡片按流的方式排列，但事實并未如此。造成這種現(xiàn)象的原因是Flex容器 &mdash;&mdash; ul.feed 設(shè)置了 display:flex （創(chuàng)建了一個Flex容器），創(chuàng)建Flex容器之后，只會對其子元素（ ul.feed > li.card ）有影響，即可子元素自動會變成Flex項目。但不會影響其后代子元素，換句話說， .nested > li 是無法自動變成Flex項目。

通常解決這個問題的唯一方法是更改HTML模板，但有些情況之下，比如說在CMS系統(tǒng)中（假設(shè)你沒有修改HTML標簽的權(quán)利），那么面對這種情況，你就會束手無策了。當然，你也許會想到使用JavaScript來處理?；蛟S以前你會這么想，但時至今日，咱們可以通過新的CSS特性來解決這個問題 &mdash;&mdash; display:contents 。

W3C規(guī)范是這樣對 display:contents 描述 的：

“The element itself does not generate any boxes, but its children and pseudo-elements still generate boxes as normal. For the purposes of box generation and layout, the element must be treated as if it had been replaced with its children and pseudo-elements in the document tree.“

大至意思是：“ 元素本身不產(chǎn)生任何邊界框，而元素的子元素與偽元素仍然生成邊界框，元素文字照常顯示。為了同時照顧邊界框與布局，處理這個元素時，要想象這個元素不在元素樹型結(jié)構(gòu)里，而只有內(nèi)容留下。這包括元素在原文檔中的子元素與偽元素，比如 ::before 和 ::after這兩個偽元素，如平常一樣，前者仍然在元素子元素之前生成，后者在之后生成。 ”

那么 display: contents 這一簡單的代碼實際上讓元素表現(xiàn)得好像不存在一樣。但仍然可以看到元素的后代，而且元素自身并不影響布局。也就是說， .nested 的子元素 .card 也將變成Flex項目。

首先刪除現(xiàn)有 .feed li 的類名，然后在 ul 和 li 是使用 display: contents ：

.feed ul,

.feed li {

display: contents;

這個時候 .feed 下所有的 .card 都變成了Flex項目（不僅是 .feed 下的子元素 li ，還包括后代的 li 元素）：

五個最新的CSS特性以及如何使用它們

現(xiàn)在你看到的所有卡片都是有序的排列，但是尺寸不對：

可以通過在 .card 上添加 flex 屬性來解決這個問題：

.card {

flex: 1 0 40%;

這個時候每張卡片的尺寸就又恢復正常了：

這個時候就好象 ul 不存在了一樣。如果你夠仔細的話，你可以發(fā)現(xiàn) flex-basis 的值設(shè)置為 40% 了，雖然我們設(shè)置了所有元素的 box-sizing 的值為 border-box ，但大家都知道， box-sizing 可以影響盒模型的計算，但對 margin 不包括在內(nèi)，所以為了有足夠的空間放置卡片，把 flex-basis 的值重新計算了，也就是大家所看到的 40% 。

這個示例也再次向大家說明了 display:contents 的神奇之處。當然，這里并沒有對 display:contents 做詳細的介紹，但也足夠向大家展示其強大之處。如果你對該特性感興趣，或者想深入的學習，建議閱讀下面這幾篇文章：

Step04：探索CSS查詢特性

盡管 display:contents 實現(xiàn)了我們想要的效果，但它仍然處于W3C的工作草案狀態(tài)。目前只在Chrome 65+、Firefox 59+ 中看到效果。

如果你在瀏覽器開發(fā)者工具中，禁掉 display: contents ，你可以看到你的布局又開始混亂了。這樣做只是模擬瀏覽器不支持該屬性時的效果。那么我們接下來能做什么呢？這就引出了下一個CSS新特性 &mdash;&mdash; CSS查詢特性 。

它的原理有點類似于CSS中的媒體查詢（ @media ）一樣，但是它允許你單獨使用CSS表達式，類似于JavaScript語言中的 if / else 之類。如果條件符合應用對應塊中的樣式。接下來讓我們把 display:contents 作為查詢特性的條件，然后將對應的CSS樣式放置在 {...} 塊中。就像下面這樣：

@supports (display: contents) {

.feed ul,

.feed li {

display: contents;

.card {

flex: 1 0 40%;

在CSS中，查詢特性很多時候也被稱為CSS的條件特性，其主要包括 @media 、 @supports和 @viewport 。

可能你第一次接觸到 @supports() 的話會感到很好奇，并不知道該屬性的具體使用。

Step05: 使用 not 關(guān)鍵讓代碼變得更清晰

在CSS的世界中，像 @supports 這樣其實也就是一種 漸進增強和優(yōu)雅降級的方案 。我們可以使用 @supports 來添加新的樣式，但也可以添加降級所需的一些原始樣式。

如果忽略IE瀏覽器的話， @supports 已得到很好的支持。實際上你可能希望使用的是CSS查詢特性，而不是某一種操作符。它的工作方式和你預期的一樣，因此我們可以通過 @supports 的 not 關(guān)鍵詞對那些不支持 display: contents 瀏覽器添加對應的樣式?；谶@個原因，我們可以把示例的代碼修改成：

// 支持 display: contents的瀏覽器，采用的是這段代碼

@supports (display: contents) {

.feed ul,

.feed li {

display: contents;

.card {

flex: 1 0 40%;

// 不支持display:contents的瀏覽器，采用下面這段代碼

@supports not (display: contents) {

.feed li {

flex: 1 0 50%;

.feed li.nested {

flex-basis: 100%;

.feed li.nested ul {

display: flex;

flex-wrap: wrap;

在支持 display:contens 的瀏覽器，你將看到的效果如下：

在不支持 display:contents 的瀏覽器，看到的效果又像下面這樣：

Step06: 更進一步優(yōu)化

經(jīng)過上面的示例，估計你已經(jīng)體會到了CSS查詢特性的魅力與潛力了，上面用到的僅僅是查查詢特性中的部分功能，更強大的是你可以 and 、 or 和 not 結(jié)合起來，讓你的條件表達式更為強大。比如說，你的降級方案除了考慮 display:contents 之外，還會說有可能用戶的瀏覽器對 display:flex 也不支持。在這樣的情況之下，咱們可以繼續(xù)降級到 float 的布局。

不過我們在這里不會考慮降級到 float 的布局。但我們可以對 display: flex 和 display:contents 進行降級處理。這里會用到 @supports 中的 and 和 not 關(guān)鍵詞。上面的代碼就變成像下面這樣：

@supports (display: flex) and (display: contents) {

.feed ul,

.feed li {

display: contents;

.card {

flex: 1 0 40%;

@supports (display: flex) and (not (display: contents)) {

.feed li {

flex: 1 0 50%;

.feed li.nested {

flex-basis: 100%;

.feed li.nested ul {

display: flex;

flex-wrap: wrap;

甚至你還可以在 @supports 中使用CSS的自定義屬性，比如像下面這樣：

@supports (--foo: green) {

...

如果你對 @supports 或CSS查詢特性相關(guān)的知識點還不足夠滿足的話，建議你閱讀下面的文章，深入的學習這方面的知識：

案例：聊天框

現(xiàn)在我們有了一個漂亮的新聞提要（Newsfeed），接下來在前面的Newsfeed基礎(chǔ)上添加一個小的聊天框，這個聊天框固定在屏幕的右下角。

Step7: 添加聊天框

我們需要一個消息列表和一個文本域字段，方便用戶輸入消息。那么在 <body> 標簽的后面添加這個聊天框所需要的HTML標簽：

<div class="chat">

<div class="messages">

<ul>

<li><div class="message">Message 1</div></li>

<li><div class="message">Message 2</div></li>

<li><div class="message">Message 3</div></li>

<li><div class="message">Message 4</div></li>

<li><div class="message">Message 5</div></li>

<li><div class="message">Message 6</div></li>

<li><div class="message">Message 7</div></li>

<li><div class="message">Message 8</div></li>

<li><div class="message">Message 9</div></li>

<li><div class="message">Message 10</div></li>

</ul>

</div>

<input type="text" class="input">

</div>

在沒有給聊天添加任何樣式的情況下，我們看到的效果是：

Step08：給聊天框添加樣式

先給聊天框添加一些基本樣式，讓它看起來有點像聊天框的樣子：

.chat {

background: #fff;

border: 10px solid #000;

bottom: 0;

font-size: 10px;

position: fixed;

right: 0;

width: 300px;

.messages {

border-bottom: 5px solid #000;

overflow: auto;

padding: 10px;

max-height: 300px;

.message {

background: #000;

border-radius: 5px;

color: #fff;

margin: 0 20% 10px 0;

padding: 10px;

.messages li:last-child .message {

margin-bottom: 0;

.input {

border: none;

display: block;

padding: 10px;

width: 100%;

效果看起來像下面這樣：

Step09：滾動鏈接

現(xiàn)在頁面上可以看到已經(jīng)美化好的聊天框了，這個聊天框有一個可滾動的消息列表和一個文本輸入框，而且位于前面創(chuàng)建子的Newsfeed上面（如果沒有的話，你可以把你的瀏覽器縮小），如下：

看上去是不是不錯。但是你有沒有注意到，當你滾動聊天框中的信息列表到底部的時候，會發(fā)生什么？感興趣的話，親自試一試。咱們做兩個小測試，先滾動頁面 body ，看看效果：

然后再聊天框的信息列表中滾動，一直滾動到最底端，滾不動為止，看看效果以是：

滾動Newsfeed，和我們想象的并沒有差異；但滾動聊天框中的消息列表時，卻不一樣，滾動到消息列表末端時，可以看到頁面 body 將開始滾動。這種效果被稱為 滾動鏈接 ，即 Scroll Chaining 。

在我們這個示例中，這可能不是什么大問題，但在某些情況下，它可能就是一大問題了。比如Modal彈框，那就很有必要解決這樣現(xiàn)象。

比較拙的解決方案就是給 body 添加 overflow:hidden ，但這有可能會影響我們的操作，甚至影響你瀏覽你的頁面。但值得慶幸的是，CSS有一個新特性可以做得更為完美，體驗更佳，而且使用起來并不復雜，只需要一行代碼即可，那就是CSS的 overscroll-behavior ，這個屬性有三個可取值：

overscroll-behavior 屬性是 overscroll-behavior-x 和 overscroll-behavior-y 的簡寫，如果你只想控制其中一個方向的滾動行為，可以使用其中的某一個屬性。

回到我們的示例來，在 .messages 類中添加下面這行代碼：

.messages {

overscroll-behavior-y: contain;

現(xiàn)在你再嘗試一下，在聊天框中的消息列表中上下滾動。此時你再滾動到消息列表末端時，它不再會影響 body 的滾動了（頁面的滾動）：

如果你想在PWA中實現(xiàn)下拉刷新的效果，比如下拉時刷新Newsfeed，那么這個屬性就非常方便。只需要在 body 或 html 元素中添加 overscroll-behavior:contain 即可。

值得注意的是，這個屬性還不是W3C標準，而是Web孵化器WICG的一個建議。不過，說不定哪一天，這個特性就進入到W3C工作組中，成為W3C的一個標準。

有關(guān)于這方面的更多介紹，建議閱讀下面幾篇文章：

Step10：折疊聊天框

目前，聊天框占據(jù)了相當大的空間，如果我們不與其交互的話，會有點分散用戶的注意力。辛運的是，我們可以用CSS的選擇器特性來解決這個問題。這也是CSS的另一新特性，再一次向大家展示了CSS的魔力。

首先調(diào)整一下現(xiàn)有的樣式。默認情況下，我們希望聊天框是處理一個折疊狀態(tài)，因此把 .message 的 max-height 值重置一下，在此設(shè)置為 0 ，并且把 padding 也重置為 0 。因為這個值剛剛好折疊了聊天框，而且又不影響其美觀。為了讓聊天框折疊和展開時有一個過渡的動畫效果，借助 CSS的 transition 屬性來實現(xiàn)。

.messages {

...

max-height: 0;

padding: 0;

transition: max-height 500ms;

效果看起來還不錯，如下所示：

Step11：當聊天框得到焦點時，展開聊天框

現(xiàn)在我們的聊天框中的信息列表是看不到。因為我們前面把信息列表折疊起來了。現(xiàn)在我們要思考的是如何通過CSS來將其展開。這就會用到CSS的另一新特性 &mdash;&mdash; :focus-within 。

有點類似于 :focus 偽類選擇器一樣，但是 :focus-within 與其不同之處是， 如果元素的任何后代元素得到焦點，它就會被匹配 。這就是這個屬性特別之處，因為它與CSS通常的工作方式相反，通常我們只能根據(jù)元素的祖先來選擇元素。

在我們這個示例中，當 .chat 區(qū)域內(nèi)的任何內(nèi)容得到焦點時，重置一下 .message 的 max-height 和 padding 值。請記住，一個元素必須接受鍵盤或鼠標事件或其他形式的輸入，以便接收焦點。比如我們這個示例，點擊 <input> 輸入框就符合這個要求，可以達到我們想要的預期效果。

.chat:focus-within .messages {

max-height: 300px;

padding: 10px;

你現(xiàn)在可以嘗試一下效果。點擊 input 讓其得到焦點，可以看到聊天框可以展開，反之聊天框又會折疊起來：

Step12：進一步突顯 :focus-within 的魔力

如果僅僅實現(xiàn)聊天框的折疊和展開效果，到上一步其實已經(jīng)完成了。但對于一位有追求的前端，總是在嘗試很多極限性?；氐轿覀兊氖纠衼?，如果PM跟你提了一個新需求，當文本輸入框得到焦點之后，除了能展開聊天框之外，還希望聊天框底下的Newsfeed變得模糊。對于這樣的一個效果，怎么來實現(xiàn)呢？

要實現(xiàn)這樣的效果，其實并不復雜，如果你有做過 自定義單選按鈕或復選框 （當然是純CSS），你應該會想到解決方案。我們可以 使用CSS選擇器中的兄弟組合器 ~ ，就可以很容易的做到這一點。使用 ~ 選擇器有一個前提需要注意，聊天框 .chat 需要在Newsfeed（ .container）前面（指的是HTML結(jié)構(gòu)，事實上我們已經(jīng)這樣做了）。只有這樣才能通過下面的方式讓Newsfeed變得模糊：

.chat:focus-within ~ .container {

filter: blur(5px)

當然，這可能不是最佳的一個方案，但僅通過CSS的技術(shù)手段就能達到預期的效果，已經(jīng)很酷了。感興趣的話，自己可以體驗一下：

注意，Newfeed添加了 filter 效果，這將會改變元素的層疊順序，造成聊天框在Newsfeed下面。所以需要顯式的 .chat 中添加 z-index 的值。比如這里設(shè)置了 z-index: 1001 。具體原因可以查閱@張鑫旭老師的《 深入理解CSS中的層疊上下文和層疊順序 》一文。

探索 :placeholder-shown

首先要先分清楚， :placeholder-shown 和 ::placeholder 是不同的兩個東東。神奇的是 :placholder-shown 是W3C標準規(guī)范的一個屬性，而 ::placeholder 卻不是。 ::placeholder-shown 仍然會影響占位符文本的樣式。

注意： :placeholder-shown 是一個偽類選擇器（它是一個處于特定狀態(tài)的元素）； ::placeholder 是一個偽元素（一個在DOM中并不存在的可見元素）。

另外， :placeholder-shown 也是新的選擇器之一（CSS Selectors Module Level 4新增了很多種偽類選擇器），它可以匹配任何顯示占位符文本的輸入。在我們的示例中，文本輸入框( input ）并沒有任何占位符文本，所以先在HTML中的 input 元素中，添加 placeholder ，新增占位符文本。

<input type="text" class="input" placeholder="Enter your message">

然后在 input 之后添加一個新的元素，用來幫助用戶操作：

<div class="prompt">Press enter to send</div>

現(xiàn)在給這個幫助信息 .prompt 添加一些樣式，默認情況之它是被折疊起來了。

.prompt {

line-height: 2em;

max-height: 0;

overflow: hidden;

padding: 0 10px;

text-align: right;

transition: max-height 500ms;

僅從外觀上看，似乎好像沒多出什么，就是在文本框中多了一個占位符文本：

雖然沒多大區(qū)別，但這為后續(xù)的效果已埋下了一個伏筆。接著往下看。

Step14：使用提示信息可見

此時提示信息處于折疊狀態(tài)，并不可見，我想大家也想到了，要怎么使用 :placeholder-shown 讓其可見？大多數(shù)瀏覽器會顯示占位符文本，直到用戶在 input 中輸入真的值。為了 提高用戶使用表單的體驗 ，如果 input 得到對應的焦點之后，占位符文本并不隱藏，還起著提示作用，是不是更有意思，也對用戶有更好的幫助，畢竟我們不希望用戶發(fā)送空的消息，所以我們可以將這種行為關(guān)聯(lián)起來，只有在用戶輸入值時才顯示提示信息（也就是 .prompt 展開可見）。

:placeholder-shown 表示的是占位文本符可見的狀態(tài)，而提示信息可見的時候，占位文本符不可見，也就是 input 有了一個真正的值。換句話來說，我們需要有一個 :placeholder-shown 的反轉(zhuǎn)（占位文本符不可見），這個時候我們可以借助 :not() 選擇器來幫我們做這樣的反轉(zhuǎn)。

.input:not(:placeholder-shown) + .prompt {

max-height: 2em;

將 max-height 設(shè)置為 font-size:10px 的兩倍，這里使用了 2em ，這個時候可以展開提信信息塊。簡單而有整潔。如果這個看似平凡的偽類選擇器能過通過最終的規(guī)范，那么我們將會看到一些巧妙的運用。來到這一步，效果變成：

親自體驗一下，你在 input 隨便輸入一點內(nèi)容，哪怕是空格，也能看到提示信息被展示出來了：

不管 :focus-within 還是 :placeholder-shown ，它們都是CSS選擇器新增加的偽類選擇器，如果感興趣，建議你花些時間對這些方面進行了一了解：

Step15：讓它充滿生機

到目前為止，我們通過簡單的HTML和一些CSS特性完成了一個帶有聊天功能的新聞提要的基本架構(gòu)，但是目前它是沒有生命的，只是一個純靜態(tài)的東西。也就是說用戶并不有用它做任何事情。這個案例包含了一些有趣的CSS新特性，但到現(xiàn)在為止不能修改DOM。如果想讓這個案例更為生動，那么就需要借助一些JavaScript功能，以便用戶能通過聊天框添加消息。

首先，需要向 <input> 和類名 .messages 的子元素 ul 添加一個 ID ，以便JavaScript更好的獲取到對應的元素。同時給 input 元素添加一個 required 屬性，當用戶未輸入任何信息的時候，表單可以自動較驗。

<ul id="messages" ...

<input type="text" id="input" required ...

然后創(chuàng)建一個名為 script.js 文件，并且放置在 </body> 之前。不過我們的案例是在Codepen上做相應的演示，所以無需考慮創(chuàng)建一個單的 .js 文件。

Step16：添加一些JavaScript

我們需要給 <input> 添加一個事件函數(shù)，當監(jiān)聽到鍵盤的 Enter 事件，獲取到 input 的值（如果有效）并將其添加到消息列表的末尾，清除字段并滾動到消息的底部。

// 獲取相應的元素

const input = document.getElementById('input');

const messages = document.getElementById('messages');

// 監(jiān)聽input的鍵盤事件

input.addEventListener('keypress', (event) => {

// 檢查是否按下Enter鍵

if (event.keyCode === 13) {

// 檢查字段是否有效

if (input.validity.valid) {

// 使用該值創(chuàng)建DOM元素

const message = createMessage(input.value);

// 將新創(chuàng)建的DOM元素添加到消息列表

messages.appendChild(message);

// 清除輸入框的值

input.value = '';

// 滾動到消息列表的底部

messages.parentNode.scrollTop = messages.parentNode.scrollHeight;

});

// 將input的值轉(zhuǎn)換為HTML的字符串

function createMessage (value) {

return stringToDom(`<li><div class="message">${value}</div></li>`)

// 將字符串轉(zhuǎn)換為真實的DOM

function stringToDom (string) {

const template = document.createElement('template');

template.innerHTML = string.trim();

return template.content.firstChild;

現(xiàn)在，當你在 input 中輸入字段并按 Enter 鍵時，你將看到你輸入的消息添加到消息列表的底部。

Step17：添加一引起額外的信息

為了向大家演示最后一個CSS新特性 &mdash;&mdash; contain ，咱們需要做一些設(shè)計。我們將實現(xiàn)一個效果，在消息列表頂部的框中發(fā)送新消息的時間。當你將鼠標懸停在消息上時，就會有這個效果。

首先，我們需要將這些信息添加到我們的新消息中。我們可以修改 createMessage 函數(shù)返回的值。

function createMessage (value) {

return stringToDom(`

<li>

<div class="message message--mine" data-timestamp="${new Date().toString()}"> ${value} </div>

</li>

`);

你已經(jīng)注意到了，在 message 中新增加了一個類 message--mine 。并給這個類添加相應的樣式：

.message--mine {

background: #ff2089;

margin-left: 20%;

margin-right: 0;

當你新輸入內(nèi)容，按下 Enter 鍵時，新增加的消息列表對應的結(jié)構(gòu)就變成像下圖這樣的：

顯示時間戳

我們的目的是將創(chuàng)建消息的時間戳顯示在消息列表的頂部，我們需要這樣做，以便即使在滾動消息列表時，這個時間戳也總是可見的。這里我們借助CSS的偽元素來做：

.message--mine::after {

content: attr(data-timestamp);

這個時候你所看到的效果是這樣的：

這個效果并不是我們想要的。我們在樣式上稍做修改，鼠標懸浮到新添加的消息列表上時才能看到時間戳，而且這個時間戳固定在消息區(qū)域的頂部。

.message--mine:hover::after {

background: #000;

color: #ff2089;

content: attr(data-timestamp);

left: 0;

padding: 5px;

position: fixed;

top: 0;

width: 100%;

這個效果現(xiàn)在變成這樣了：

現(xiàn)在時間戳固定在頁面的頂部，可以繼續(xù)優(yōu)化一下，在 .messages 中添加 position: relative 。

但也不起作用，那是因為固定定位是相對于 viewport 的，而不是相對于其祖先元素。那么這個時候，最后一個CSS新特性應該要出場了。

Step19：探索Containment

CSS Containment是一個令人興奮的新命題。它有許多選項，可以限制瀏覽器的樣式、布局和對特定元素的繪制。這在修改DOM時特別有用。在瀏覽器中，哪怕是很小的變化都有可能造成瀏覽器重繪整個頁面，這樣的消費是很貴，即使瀏覽器努力為我們做了很多優(yōu)化，頁面的重繪還是對性能有一定影響的。

使用CSS Containment，我們可以把頁面的部分圈起來，然后說“這里發(fā)生了什么，只在這里做相應的事”。這也是另一種方法，可以保護元素不受外部的變化而受影響。

CSS的Containment是一個新屬性，使用關(guān)鍵字 contain ，它支持四個屬性值：

layout

paint

size

style

您還可以結(jié)合關(guān)鍵字，如 contain: layout paint ，這將僅適用于一個元素的這些行為。但也包含支持兩個額外的值：

每個值都有點不透明，所以我建議你閱讀規(guī)范并在開發(fā)者工具中使用它們來查看實際發(fā)生的情況。

layout 和 paint 是兩個重要的值，因為它們在需要大量操作DOM時，對性能有一定的優(yōu)化。然而，在我們的演示中，我們可以利用 contain: paint 我助我們進行時間戳定位。

根據(jù)規(guī)范所描述，當使用 paint 時，“ 元素作為一個包含絕對定位和固定定位后代的塊 ”。這意味著，我們可以在 .chat 上設(shè)置 contain: paint ，這樣一來， .chat 中元素的固定定位將基于 card 而不是 viewport 。你可以通過使用 transform: translateZ(0) 獲得相同的效果。

嘗試一下下，效果完美了：

以上就是“CSS五個最新的特性怎么使用”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會為大家更新不同的知識，如果還想學習更多的知識，請關(guān)注億速云行業(yè)資訊頻道。