看完了 2021 CSS 年度報告，我學(xué)到了啥？
大家好，我是 ConardLi，一年一度的 CSS年度報告 如期而至，我挑了一些我感興趣的部分，和我一起來看看吧～
這篇文章用了很久，因為平時 CSS 寫的實在少，其實看報告的主要目的除了了解CSS技術(shù)趨勢，更重要的是順便學(xué)習(xí)了下之前沒用過的一些特性和庫 ??
布局
彈性盒子（Flex）布局
相信大多數(shù)人都用過，就不多說了。
CSS 網(wǎng)格（GRID）布局
用的人越來越多了，只有 0.7% 的受訪者沒了解過，我在平時中也用過，不過用的不多，大多數(shù)場景下 Flex 就能滿足需求，你們呢？
子網(wǎng)格（Subgrid）布局
用過的人比去年多一些，不過沒用過或者沒了解過的仍然是大多數(shù)。
說實話，我也是沒用過，特意學(xué)習(xí)了一下，故名思議，除了操縱同級別的網(wǎng)格，它擁有操縱子網(wǎng)格的能力，它可以實現(xiàn)比 Grid 更復(fù)雜的布局，比如下面的例子：
.grid?{
??display:?grid;
??grid-template-columns:?repeat(9,?1fr);
??grid-template-rows:?repeat(4,?minmax(100px,?auto));
??gap:?20px;
}
.item?{
??display:?grid;
??grid-column:?2?/?7;
??grid-row:?2?/?4;
??grid-template-columns:?subgrid;
??grid-template-rows:?subgrid;
??row-gap:?0;
}
.subitem?{
??grid-column:?3?/?6;
??grid-row:?1?/?3;
}
多列布局（Multi-Column）
又是個我沒用過的，不過好像這幾年趨勢變化也不大，大部分人還是沒用過。
查了下，還挺好用的，之前這樣的事我都是用 display:inline-block 去搞，現(xiàn)在一個屬性就搞定了。
<div?class="container">
??<h1>?code秘密花園?h1>
??<p>?ConardLi?p>
??<p>?一些文本?...?p>
div>
.container?{
??column-count:?3;
}
比如上面的 container 容器中有三個塊級元素，給 container 指定 column-count: 3 后就可以讓瀏覽器自動分成三列，并且計算出每一列分配多少空間。
position: sticky
這個就是我們平時所謂的吸頂布局，相信大多數(shù)小伙伴都用過或者了解過了。
邏輯屬性（Logical Properties）
邏輯屬性，是 CSS 新引入的的一項變革性能力，它的屬性與值能做從邏輯角度控制布局，而不是從物理、方向或維度來控制。
目前調(diào)查來看，用過的人也不是很多，我們來簡單介紹一下。
傳統(tǒng)的 CSS 屬性大多是采用物理屬性來定義的，比如元素的尺寸，偏移和邊距等屬性。但是隨著業(yè)務(wù)的發(fā)展，越來越多的web應(yīng)用需要考慮到國家化，必須適配不同的語言。
大部分國家的語言排版都是從左到右，即LTR(left to right)，但是仍然有一部分語言采用的是從右到左，即RTL(right to left)的版本布局，比如阿拉伯語和希伯來語等。
圖片展示了拉丁文，希伯來文和日語三種不同的書寫方式。
邏輯屬性 不僅可以讓前端的布局在邏輯上更加嚴(yán)謹(jǐn)，而且能讓開發(fā)者以更少的代碼寫出兼容性更好的頁面。我們來看個簡單的例子：
html
????<h3>物理布局h3>
????<div?class="container"?id="">
????????<div?class="box">codediv>
????????<div?class="box">秘密花園div>
????div>
????<h3>邏輯布局h3>
????<div?class="container"?id="logic">
????????<div?class="box">codediv>
????????<div?class="box">秘密花園div>
????div>
css
????????:root?{
????????????--size:?100px;
????????}
????????.container?{
????????????display:?flex;
????????????margin-top:?20px;
????????????padding:?10px;
????????????border:?1px?solid?#000;
????????????/*?direction:?rtl;?*/
????????}
????????.box?{
????????????width:?var(--size);
????????????height:?var(--size);
????????????line-height:?var(--size);
????????????text-align:?center;
????????????background-color:?rgb(170,?231,?71);
????????}
????????.container:nth-of-type(1)?.box:last-child?{
????????????margin-left:?10px;
????????}
????????.container:nth-of-type(2)?.box:last-child?{
????????????margin-inline-start:?10px;
????????}
當(dāng)頁面布局是正常的從左到右排列時，效果是一樣的：
現(xiàn)在我們把容器的排列方式改成：direction: rtl;，我們會發(fā)現(xiàn)物理布局出了問題：
在這段 CSS 里，margin-inline-start 就是一條邏輯屬性，它可以讓 margin 隨著排版方向的變化而變化，而不是固定死的某一個方向。
向這樣的邏輯屬性還有很多：
aspect-ratio
用于指定圖片的縱橫比，調(diào)查中大概 37% 的人用過。
我在之前很多篇文章中都提到過，是一個很好用的屬性：
給定圖片的縱橫比后，瀏覽器可以自動計算圖片尺寸，可以用來提升 CLS 指標(biāo)。
aspect-ratio:?1?/?1;
/*?全局值?*/
aspect-ratio:?inherit;
aspect-ratio:?initial;
aspect-ratio:?unset;
content-visibility
一個可以控制頁面元素渲染的強大 CSS 屬性，使用度今年好像和去年變化不大。
之前專門寫過一篇文章來介紹它：
瀏覽器在接收到服務(wù)端返回的 HTML 之后，需要把這段數(shù)據(jù)渲染成用戶看到的頁面，在開始渲染第一個元素之前可能還需要經(jīng)過很多步驟。這個過程會適用于整個頁面，包括當(dāng)前不可見的內(nèi)容。
所以在首屏渲染時，是有很大一部分時間花費在用戶不可見的內(nèi)容上，實際上這部分?jǐn)?shù)據(jù)我們沒必要在首屏就把它們渲染出來。
content-visibility: auto 可以告訴瀏覽器暫時跳過該元素的布局和渲染工作，直到這個元素滾動到當(dāng)前視口，從而可以加快整個頁面的初始渲染，并且縮短用戶和頁面可交互需要花費的時間。
不過目前兼容性還比較差，慎重使用：
Container Queries
容器查詢，目前還是一個在實驗中的 CSS 特性，只有 5% 的人用過。
在我們要寫一個響應(yīng)式頁面時，一般會試用媒體查詢（@media）根據(jù)不同的頁面尺寸進行不同的布局。
但是，@media 針對的是整個頁面的顯示大小，然而對于一些特定頁面結(jié)構(gòu)中的組件（例如在左右分欄的頁面結(jié)構(gòu)中的卡片），明明我們只是想根據(jù)組件的大小來調(diào)整布局，然而卻得考慮整個網(wǎng)頁的布局，以推測在不同頁面大小下這個組件能夠擁有的空間。
比如說，在下面這個布局中，組件可能是橫向展示的，也可能是縱向展示的。如果寬度空間夠的話，它顯示為兩列，如果沒有空間，將會上下堆疊顯示。
這時候我們就可以用到容器查詢：
@container?(min-width:?400px)?{
??.c-article?{
????display:?flex;
????flex-wrap:?wrap;
??}
}
@container?(min-width:?700px)?{
??.c-article?{
????display:?flex;
????justify-content:?center;
????align-items:?center;
????min-height:?350px;
??}
??.card__thumb?{
????position:?absolute;
????left:?0;
????top:?0;
????width:?100%;
????height:?100%;
????object-fit:?cover;
??}
}
目前兼容性感人：
如果想試用，還要開啟一個實驗配置：chrome://flags/#enable-container-queries
圖形和圖像
CSS 圖形 (Shape)
CSS Shape 描述了在 CSS 中使用的幾何形狀的方式，它可以實現(xiàn)不規(guī)則的文字環(huán)繞效果，發(fā)展得真不咋地，沒了解過的居然越來越多了 ...
比如，我們左側(cè)有個圓形的圖片，我們想把右側(cè)的文字環(huán)繞效果也改成圓形：
這時，我們就可以用到 shape-outside，它是不規(guī)則形狀環(huán)繞布局的核心，有下面幾個值：
circle()– 圓ellipse()– 橢圓inset()– 內(nèi)矩形（包括圓角矩形）polygon()– 多邊形
我們將它指定為 circle(50%)，就可以實現(xiàn)圓形文字環(huán)繞效果。
img?{
??float:?left;
??shape-outside:?circle(50%);
}
????
object-fit
object-fit 是個比較常用的 CSS 屬性，它可以指定可替換元素的內(nèi)容應(yīng)該如何適應(yīng)到其使用的高度和寬度確定的框。
簡單的說，通過這個屬性我們可以讓一個元素自適應(yīng)外部容器：
object-fit 有下面五個值：
fill替換的內(nèi)容正好填充元素的內(nèi)容寬，替換內(nèi)容拉伸填滿整個content box，不保證保持原有的比例。contain保持原有的尺寸比例。保證替換內(nèi)容尺寸一定可以在容器里面放得下。因此，此參數(shù)可能在容器內(nèi)一下空白。cover保持原有的尺寸比例。保證替換內(nèi)容尺寸一定大于容器尺寸，寬度和高度至少有一個和容器一致。因此，此參數(shù)可能會讓替換內(nèi)容部分區(qū)域不可見。none保持原有的尺寸比例。同時保持替換內(nèi)容原始尺寸大小。scale-down內(nèi)容的尺寸與none或contain中的一個相同，取決于它們之間誰得到的對象尺寸會更小。
clip-path
這個做動畫的同學(xué)應(yīng)該平時也用的比較多，我們可以用它來裁剪出一個元素的可視區(qū)域，從調(diào)查來看使用者也越來越多。
clip-path 是 clip 的升級版，它們的作用都是對元素進行 “剪裁”，不同的是 clip 只能作用于 position 為 absolute 和 fixed 的元素且剪裁區(qū)域只能是正方形，而 clip-path 更加強大，可以以任意形狀去裁剪元素，且對元素的定位方式?jīng)]有要求。
混合模式 (Blend Modes)
當(dāng)元素重疊時，混合模式是計算像素最終顏色值的方法，每種混合模式采用前景和背景的顏色值，執(zhí)行其計算并返回最終的顏色值。最終的可見層是對混合層中的每個重疊像素執(zhí)行混合模式計算的結(jié)果。
簡單點說，就是有兩張不同顏色的圖片疊加時，中間重合的部分應(yīng)該怎么展示。我們來看個簡單的例子：
????????body?{
????????????text-align:?center;
????????????color:?#000;
????????????background-image:?linear-gradient(90deg,?#fff?49.9%,?#000?50%);
????????}
????????h1?{
????????????font-size:?100px;
????????}
網(wǎng)頁的兩邊分別有不同的兩種顏色，我們在網(wǎng)頁中間添加了個文本，文本的顏色和右邊的網(wǎng)頁顏色重合，所以右邊啥也看不到：
這時，我們該動一下文班的混合模式：
????????h1?{
????????????font-size:?100px;
????????????color:?#fff;
????????????mix-blend-mode:?difference;
????????}
就可以實現(xiàn)下面的效果：
mix-blend-mode: difference 的意思就是重合部分取兩種顏色的差值，除了difference，另外還有 darken(變暗)、lighten(變暗)、screen(濾色) 等等。
CSS 濾鏡效果
調(diào)查報告里使用最廣的 CSS 屬性之一，相信大多數(shù)小伙伴也都用過。
一張圖看懂它的主要用途：
color-gamut
99% 的人都沒用過 ... 恭喜榮登本報告中知道的人最少的特性。
一個非常高級的用法，可以讓我們根據(jù)輸出設(shè)備的支持色域分類應(yīng)用不同的樣式，漲姿勢了 ... 。
@media?(color-gamut:?srgb)?{
??p?{
????background:?#f4ae8a;
??}
}
perspective
顧名思義，就是透視的意思，可以讓我們實現(xiàn)一些簡單的 3D 效果，不過現(xiàn)在用純 CSS 寫 3D 效果的少了，所以這個特性也用的越來越少了：
perspective 其實本質(zhì)上是指定觀察者與 z=0 平面的距離，從而讓有三維位置變換的元素產(chǎn)生透視效果。z>0 的三維元素比正常大，而 z<0 時則比正常小，大小程度由該屬性的值決定。
Intrinsic Sizing
Intrinsic Sizing，即內(nèi)在尺寸，今年第一次參加調(diào)查，但是大部分人都了解或者用過了，但是據(jù)我了解國內(nèi)的網(wǎng)頁里這個屬性用的不錯，因為對中文不太友好。
CSS 中存在兩種尺寸：內(nèi)在尺寸（intrinsic）和外在尺寸（extrinsic）。元素的 width、height 設(shè)置的固定屬性值，就是指外部尺寸。而內(nèi)部尺寸，則是由元素包含的內(nèi)容決定的。
我們來看洗面這個例子，兩個 P 標(biāo)簽分別用兩種內(nèi)容的內(nèi)在尺寸決定它本身的寬度。
????????h1?{
????????????border:?1px?solid?red;
????????????width:?min-content;
????????}
????????.min?{
????????????width:?min-content;
????????}
????????.max?{
????????????width:?max-content;
????????}
min-content：寬度等于最長單詞的寬度min-content：寬度等于整條內(nèi)容的寬度（大概相當(dāng)于display:inline-block+white-space:nowrap）
這個章節(jié)其實還提到了 backdrop-filter、conic-gradient()、color()、accent-color，我沒啥興趣，所以就直接略過了。
交互
CSS 滾動捕捉
CSS 滾動捕捉可以讓用戶完成滾動之后將視口鎖定到某個元素的位置，這種效果經(jīng)常出現(xiàn)在某些官網(wǎng)的網(wǎng)站里。
實現(xiàn)滾動捕捉主要依靠兩個屬性：容器元素的 scroll-snap-type 屬性，以及子元素的 ?scroll-snap-align 屬性。
scroll-snap-type:mandatory告訴瀏覽器，在用戶停止?jié)L動時，瀏覽器必須滾動到一個捕捉點。scroll-snap-align可以指定元素的哪一部分吸附到容器上，start指的是元素的頂部邊緣。如果你水平滾動，它指的是左邊緣。center和end屬性值與此同理。
來個簡單的 Demo：
????<div?class="slider">
????????<section?id="s1">
????????????<h1>你好啊h1>
????????section>
????????<section?id="s2">
????????????<h1>ConardLih1>
????????section>
????????<section?id="s3">
????????????<h1>code秘密花園h1>
????????section>
????div>
????????.slider?{
????????????font-family:?sans-serif;
????????????scroll-snap-type:?x?mandatory;
????????????display:?flex;
????????????-webkit-overflow-scrolling:?touch;
????????????overflow-x:?scroll;
????????}
????????section?{
????????????border-right:?1px?solid?white;
????????????padding:?1rem;
????????????min-width:?100vw;
????????????height:?100vh;
????????????scroll-snap-align:?start;
????????????text-align:?center;
????????????position:?relative;
????????}
????????h1?{
????????????position:?absolute;
????????????top:?50%;
????????????transform:?translateY(-50%);
????????????text-align:?center;
????????????color:?white;
????????????width:?100%;
????????????left:?0;
????????????font-size:?calc(1rem?+?3vw);
????????}
你可以實現(xiàn)下面的效果：
overscroll-behavior
可以控制，滾動條到達滾動區(qū)域的邊界時的行為。
比如我們在網(wǎng)頁的右下角放了個機器人聊天窗口，我們在滾動聊天消息的時候，如果滾動到了底部，頁面的其他部分也會跟著滾，這時候就可以用 overscroll-behavior-y: contain; 來設(shè)置在當(dāng)前區(qū)域已經(jīng)滾動到底部時，不會帶動其他區(qū)域滾動。
touch-action
touch-action 可以用于設(shè)置觸摸屏用戶如何操縱元素的區(qū)域（平滑、縮放、單指平移手勢、手指平移和縮放等等），一般我們會在適配移動端操作的網(wǎng)站上會用到，變化趨勢也不大，不再多說。
pointer-events
pointer-events 是個老屬性了，可以用來控制特定元素和場景下的鼠標(biāo)事件。
比如，我們想禁用一個元素的點擊事件，就可以用 pointer-events:none，這不僅僅會禁用元素的 hover 效果，而是真正的移除了 click 事件。
另外還有一些就是針對 SVG 元素的特定屬性了，比如 pointer-events: fill;：
scroll-timeline
scroll-timeline 是一個可以更靈活的控制滾動動畫的屬性，在被采訪者中只有 2.5% 的人用過。
scroll-timeline 還是一個比較早期的提案，屬于 Scroll-Linked Animations 規(guī)范的一部分：
像讓頁面滾動條滾動到某個位置、標(biāo)題固定在頂部、面頂部展示你頁面進度、或者是一些我們所說的視差滾動效果等等，在以前我們可能要借助 JavaScript 才能實現(xiàn)，現(xiàn)在我們可以使用 @scroll-timeline，比如下面的代碼：
@scroll-timeline?scroll-in-document-timeline?{
??source:?auto;
??orientation:?vertical;
??scroll-offsets:?0%,?100%;
}
source表示滾動的元素，默認(rèn)情況下就是documentorientation確定應(yīng)當(dāng)觸發(fā)動畫滾動方向。默認(rèn)情況下是verticalscroll-offsets用于描述動畫應(yīng)處于活動狀態(tài)的范圍，它可以是相對、絕對值或者基于元素的偏移。
然后，我們將上面聲明的時間軸動畫的名稱設(shè)置給 animation-timeline 屬性，就可以和 CSS 動畫關(guān)聯(lián)上了。
#progressbar?{
??animation:?1s?linear?forwards?adjust-progressbar;
??animation-timeline:?scroll-in-document-timeline;
}
排版
font-variant
font-variant 代表的其實是一組控制字體的 CSS 屬性，從調(diào)查來看，用的人越來越少了 ...
我們平時在開發(fā)里用的最多的可能就是 font-variant:small-caps; 了，它可以把所有小寫字母轉(zhuǎn)成大寫。
其實除了 font-variant-caps ，它還包括下面幾個子屬性：
font-variant-numeric: 控制數(shù)字的展示形式font-variant-alternates: 控制備用字體的使用font-variant-ligatures: 控制是否連字展示
initial-letter
initial-letter 可以控制首字母的展示形式，比如上升、下沉等效果，不過兼容性極差，也是用的人越來越少了。
line-clamp
line-clamp 可以用來限定一個塊級容器中展示內(nèi)容的行數(shù)，這個平時應(yīng)該用的比較多。
比如，我們要限定一個容器中最多展示兩行，文字，超過兩行的內(nèi)容用省略號替代：
????????.box?{
????????????width:?300px;
????????????height:?100px;
????????????border:?1px?solid?red
????????}
????????p?{
????????????display:?-webkit-box;
????????????-webkit-box-orient:?vertical;
????????????-webkit-line-clamp:?2;
????????????text-overflow:?ellipsis;
????????????overflow:?hidden;
????????????-webkit-box-orient:?vertical;
????????????word-wrap:?break-word;
????????????word-break:?break-all;
????????}
Variable fonts
可變字體（Variable Fonts），今年第一次參與調(diào)查，大概 20% 的人有用過。
一般來說，字體的不同格式，比如斜體、粗細、拉伸存儲在分開的單個文件內(nèi)，而現(xiàn)在，你可以存儲多種字體格式在一個 openType 可變字體文件內(nèi)，所以，這種文件相對來說體積會更小。
另外，我們可以借助 Variable Fonts 為網(wǎng)站提供更豐富、更靈活、更細粒度的的自定義字體能力(比如說 font-weight:550 就是屬于細粒度的字體控制)，以適應(yīng)不同風(fēng)格和主題的變化。
其他特性
CSS 變量（自定義屬性）
CSS 變量，使用率已經(jīng)高達 84%，沒聽過的僅有 2.8%。
用法很簡單，聲明變量的時候，變量名前面要加兩根連詞線（--），相信大多數(shù)小伙伴也都用過，不再多說：
:root?{
????--bg-color:?red;
}
.title?{
????background-color:?var(--bg-color);
}
.desc?{
????background-color:?var(--bg-color);
}
特征查詢(Feature Support Queries)
特征查詢也就是 @supports，是條件規(guī)則的一種，可以用來檢測當(dāng)前瀏覽器是否支持某個CSS屬性，這個確實挺實用的，使用率逐年增長。
用法廣泛，比如下面幾種：
檢測是否支持指定的 CSS 屬性
@supports?(animation-name:?test)?{
????@keyframes?{?
??????…
????}
}
檢測是否不支持指定的CSS屬性
@supports?(?not?((text-align-last:justify)?or?(-moz-text-align-last:justify)?){
????…?/*?這里的CSS代碼用來模擬text-align-last:justify?*/
}
測試是否支持某個自定義屬性
@supports?(--foo:?green)?{
??body?{
????color:?var(--varName);
??}
}
測試瀏覽器否支持某個選擇器
@supports?not?selector(:is(a,?b))?{
??/*?不支持?:is()?時的備選方案?*/
??ul?>?li,
??ol?>?li?{
????…?/*?以上給不支持?:is(...)?的瀏覽器展開了?CSS?選擇器規(guī)則?*/
??}
}
不過，作為一個用來做兼容性檢測的特性，居然在 IE 下全跪，只能說 IE 牛逼！
CSS 約束 （Containment）
CSS contain 屬性允許開發(fā)者聲明當(dāng)前元素和它的內(nèi)容盡可能的獨立于 DOM 樹的其他部分，這是個性能優(yōu)化利器，居然只有不到 10% 的人用過。
contain 屬性的主要目的是隔離指定內(nèi)容的樣式、布局和渲染。開發(fā)人員可以使用這個 contain 屬性來限制指定的 DOM 元素和它的子元素同頁面上其它內(nèi)容的聯(lián)系；我們可以把它看做一個 iframe 。跟 iframe 很相似，它能建立起一個邊界，產(chǎn)生一個新的根布局；保證了它和它的子元素的 DOM 變化不會觸發(fā)父元素重新布局、渲染等。
這個屬性在包含大量獨立組件的頁面非常實用，它可以防止某個小部件的 CSS 規(guī)則改變對頁面上的其他東西造成影響，contain 屬性有以下七個值：
none無layout開啟布局限制style開啟樣式限制paint開啟渲染限制size開啟size限制content開啟除了size外的所有限制strict開啟 layout, style 和 paint 三種限制組合
對于頁面上的一些獨立的小部件，都推薦使用 contain: strict;，對頁面性能很有幫助，目前使用度還比較低，強烈推薦！
will-change
will-change 也是一個用來做性能優(yōu)化的屬性，相比上面的 contain，它的使用度要高一點。
當(dāng)我們通過某些行為（點擊、移動或滾動）觸發(fā)頁面進行大面積繪制的時候，瀏覽器往往是沒有準(zhǔn)備的，只能被動使用 CPU 去計算與重繪，由于沒有事先準(zhǔn)備，應(yīng)付渲染夠嗆，于是掉幀。
will-change 可以在行為觸發(fā)之前告訴瀏覽器我們要進行一些什么樣的變化操作，讓瀏覽器好有個準(zhǔn)備，啟動 GPU 為你渲染動畫。
當(dāng)然，用好這個屬性也有點難度，一般直接寫在 CSS 的默認(rèn)狀態(tài)中是沒用的，下面我們舉兩個簡單的例子：
結(jié)合 JavaScript 用：
var?el?=?document.getElementById('element');
//?當(dāng)鼠標(biāo)移動到該元素上時給該元素設(shè)置?will-change?屬性
el.addEventListener('mouseenter',?hintBrowser);
//?當(dāng)?CSS?動畫結(jié)束后清除?will-change?屬性
el.addEventListener('animationEnd',?removeHint);
function?hintBrowser()?{
??//?填寫上那些你知道的，會在?CSS?動畫中發(fā)生改變的?CSS?屬性名們
??this.style.willChange?=?'transform,?opacity';
}
function?removeHint()?{
??this.style.willChange?=?'auto';
}
在 CSS 里用：
.will-change?{
?transition:?transform?0.3s;
}
.will-change:hover?{
?will-change:?transform;
}
.will-change:active?{
?transform:?scale(1.5);
}
如果用好的話，也是性能優(yōu)化的一大利器。
calc()
計算屬性，使用率已經(jīng)高達 93%，相信大多數(shù)同學(xué)都用過了。
不多說了， 在布局和動畫中都是非常常用的，比如 height: calc(100vh - 80px);。
Houdini
Houdini 是個非常強大的能力，可以擴展 CSS 的跨瀏覽器繪制能力，木過的人只有 3%。
Houdini 通過 Typed Object Model 啟用更多的語義化 CSS 。開發(fā)者可以通過屬性和值 API 定義具有語法、默認(rèn)值和繼承的高級 CSS 自定義屬性。
我之前專門寫了一篇文章介紹 Houdini ，感興趣的話可以看：
CSS 比較函數(shù) （Comparison Functions）
CSS 中的 min，max 函數(shù)都是屬于比較函數(shù)，作用類似于 js 函數(shù)中的 min，max，用于取多個屬性中的最小值或者最大值，屬性之間用逗號分隔，比如（width: min(100px,200px,300px);）
預(yù)處理
在開始之前，我們先對常用的幾大預(yù)處理框架做個簡單的對比：
Sass/Scss：sass分為sass和scss兩個語法分支，scss是兼容 css 的寫法，很容易上手，同時繼承了sass的優(yōu)點，用的比較多的是scss，sass的語法則是用縮進來代替花括號、省略了結(jié)尾分號。sass速度更快且易安裝，因為scss兼容 css 寫法，寫起來更容易上手，像bootstrap、Element也在使用 scss 作為 css 預(yù)處理器使用。Less：日常開發(fā)Less和Scss差不多，都是偏原生語法，比較容易接納，less有個優(yōu)勢就是可以“不用編譯”，為啥加引號呢，因為它確實可以做到不手動編譯，在引入less的后面引入less.js即可，但是作為最佳實踐，你始終應(yīng)該去編譯它，因為大多數(shù)情況下，編譯它并不會花掉你太多時間。stylus采用了sass類似的縮進來表示層級，以及省略了分號等等，聲明變量也不再需要 $ 或者 @ 符號，變量名和變量值之間使用 = 作為分隔，同時stylus允許傳統(tǒng)css語法和stylus語法混用。因為其精簡的太多，代碼量可以更少，但是閱讀起來可能不是那么美妙。PostCSS一個使用JS插件來轉(zhuǎn)換樣式的工具，它跟CSS預(yù)處理器的定位其實不同，它的作用主要有lint css，支持CSS Next語法，自動添加前綴等等功能，通過插件，基本上可以覆蓋 CSS 預(yù)處理器的功能，同時可以實現(xiàn)很多預(yù)處理器實現(xiàn)不了的功能。優(yōu)勢在于其豐富的插件生態(tài)，能夠覆蓋開發(fā)中的方方面面，我們又能夠很容易的開發(fā)自己的插件。
滿意度
PostCSS 常年第一，不過今年新參加的 Assembler CSS 好像有點慘，關(guān)注度還行，不過無論是使用度還是滿意度都比較差。
使用度
Sass 使用度仍然第一，PostCSS 反超 Less。
隨著時間變化的體驗
這個比較有意思，Less、Sass 的滿意度隨時間推移都是有所下降的，而 PostCSS 在逐步上升。
積極和消極程度
CSS 框架
框架就不做過多介紹了，使用過的基本上都知道。
滿意度
這里的亮點是 Ant Design，滿意度逐年增長，國貨之光啊！
使用度
沒想到 Bootstrap 還能占據(jù)第一，我 5 年前就放棄了，另外老外用的比較多的還是 Tailwind CSS ，增長率非常快，Ant Design 還是我們用的比較多，整體使用度只有 16% 。
CSS-in-JS
我個人也在用 CSS-in-JS ，第一個它解決了命名的痛點，傳統(tǒng)的 css 方案，因為 class name是全局的，你就要保證它的唯一性，你要把你的組件名等各種 namespace 作為 class name 的前綴，以保證唯一性，css in js 就解決了這一點。另外，使用 CSS-in-JS 使用 js 動態(tài)控制樣式會更簡單。
滿意度
大部分 CSS-in-JS 框架的滿意度都有所下降...
這個也比較正常，因為它的缺點也比較明顯，一直沒得到解決：
運行時消耗：于大多數(shù)的 CSS-in-JS的庫都是在動態(tài)生成CSS的，一般都會有些性能損耗，而且包體積會稍大一些。代碼可讀性差：大多數(shù) CSS-in-JS實現(xiàn)會通過生成唯一的CSS選擇器來達到CSS局部作用域的效果，這些自動生成的選擇器會大大降低代碼的可讀性。沒有統(tǒng)一的業(yè)界標(biāo)準(zhǔn) ? CSS-in-JS只是一種技術(shù)思路而沒有一個社區(qū)統(tǒng)一遵循的標(biāo)準(zhǔn)和規(guī)范，所以不同實現(xiàn)的語法和功能可能有很大的差異。
使用度
這個沒啥變化，Styled Components 的使用率是最高的。
通過 Styled Components ，你可以使用 ES6 的標(biāo)簽?zāi)０遄址Z法為需要 styled 的 Component 定義一系列 CSS 屬性，當(dāng)該組件的JS代碼被解析執(zhí)行的時候， Styled Components ?會動態(tài)生成一個 CSS 選擇器，并把對應(yīng)的 CSS 樣式通過 style 標(biāo)簽的形式插入到 head 標(biāo)簽里面。動態(tài)生成的 CSS 選擇器會有一小段哈希值來保證全局唯一性來避免樣式發(fā)生沖突。
我個人用的是 Emotion CSS ，它和 Styled Components 基本上差不多，不過它對 ?sourcemap 的支持會更好一點。
import?{?css,?jsx?}?from?'@emotion/react'
const?color?=?'darkgreen'
render(
??<div
????css={css`
??????background-color:?hotpink;
??????&:hover?{
????????color:?${color};
??????}
????`}
??>
????Hello?ConardLi
??div>
)
CSS-in-JS Playground 是一個可以快速嘗試不同 CSS-in-JS 實現(xiàn)的網(wǎng)站，如果你想做技術(shù)選型，可以去看看：
大獎
使用度采用最多的特性： CSS 比較函數(shù)，相比去年增長了15.5％。最高滿意度： PostCSS再次以 91% 的滿意度位居榜首。最受關(guān)注： CSS Modules再次以74%的比例引起了 CSS 開發(fā)人員的最大興趣。
調(diào)查范圍
最后吐槽一下這個報告的調(diào)查范圍，中國這么多開發(fā)者居然只調(diào)查了 75 個人，占所有受訪者的 0.9% ，差評！
最后
本文中只節(jié)選一些報告中我感興趣的內(nèi)容，并非報告全文，想要了解更多請查看報告原文：https://2021.stateofcss.com/
我的書?「《算法通關(guān)之路》」?已經(jīng)出版了，想要突破算法面試的朋友不要錯過，京東淘寶當(dāng)當(dāng)亞馬遜等均有出售，電子版也有哦~
后臺回復(fù)：typescript，獲取我寫的 typescript 系列文章，絕對精品 后臺回復(fù)：電子書，自動獲取我為大家整理的大量經(jīng)典電子書，省去你篩選以及下載的時間 后臺回復(fù)：不一樣的前端，自動獲取精選優(yōu)質(zhì)前端文章。 后臺回復(fù)：算法，自動獲取精選算法文章。另外也可關(guān)注我的另外一個專注算法的公眾號力扣加加。 后臺回復(fù)：每日一薦，自動獲取我為大家總結(jié)的每日一薦月刊，內(nèi)含精品文章，實用技巧，高效工具等等
