2021年你可能不知道的 CSS 特性（下篇）

在這個話題中主要整理了有關於 CSS 方面的特性，而且儘量的整理了一些你們如今能用或過不了多久就能用的屬性。另外，雖然標題是「新特性」，但其中有蠻多特性並非「新」，可能已經出如今你的項目中，或者你已經看過，只是不瞭解而以。接下來，就和你們一塊兒來簡單地回顧一下這些性，但願你們能喜歡，也但願對你們平時工做有所幫助。前端

CSS 等比縮放通常指的是「容器高度按比例根據寬度改變」，不少時候也稱爲寬高比或縱寬比。衆所周知，咱們開發 Web 頁面要面對的終端更復雜的了，而這些終端的寬高比都不同。常見的比例有： github

特別是在作媒體相關開發的同窗，好比視頻、圖像等，這方面的需求會更多，好比 Facebook 上的圖片，視頻展現： web

CSS 在尚未 _aspect-ratio_ 以前，常使用一些 Hacck 手段來實現實相似的效果，即便用 padding-top 或 padding-bottom 來實現：瀏覽器

<aspectratio-container> 
  <aspectratio-content></aspectratio-content> 
</aspectratio-container> 

<style>
	.aspectratio-container { 
  	width: 50vmin; /* 用戶根據本身須要設置相應的值 */ 
  
  	/* 佈局方案能夠調整 */ 
  	display: flex; 
  	justify-content: center; 
  	align-items: center; 
  } 
  
  /* 用來撐開aspectratio-container高度 */ 
  .aspectratio-container::after { 
    	content: ""; 
    	width: 1px; 
    	padding-bottom: 56.25%; 
    	
    	/*元素的寬高比*/ 
    	margin: -1px; 
    	z-index: -1; 
  }
</style>  
複製代碼
複製代碼

有了 CSS 自定義屬性以後，能夠結合 calc() 函數來實現容器等比縮放的效果：微信

.container {
	--ratio: 16/9;
  height: calc(var(--width) * 1 / (var(--ratio)));
  width: 100%;
}
複製代碼
複製代碼

雖然比padding-top 這樣的Hack 手段簡單，但相比原生的aspect-ratio仍是要複雜的多。即: markdown

.container {
	width: 100%;
  aspect-ratio: 16 / 9;
}
複製代碼
複製代碼

下面這個示例演示了這三種不一樣方案實現寬比的效果：app

還能夠經過 @media 讓元素在不一樣的終端上按不一樣的比例進行縮放：

.transition-it {
  aspect-ratio: 1/1;
  transition: aspect-ratio .5s ease;

  @media (orientation: landscape) { & {
    aspect-ratio: 16/9;
  }}
}
複製代碼
複製代碼

CSS 滾動捕捉

在 Web 佈局中，時常會碰到內容溢出容器的現狀，若是 overflow 設置爲 auto 或 scroll 時容器會出現水平或垂直滾動條：

爲了給用戶提供更好的滾動體驗，CSS 提供了一些優化滾動體驗的 CSS 特性，其中滾動捕捉就是其中之一。CSS 的滾動捕捉有點相似於 Flexbox 和 Grid 佈局的特性，分類可用於滾動容器的屬性和滾動項目的屬性：

有了滾動捕捉特性，咱們要實現相似下圖的效果就能夠不須要依賴任何 JavaScript 庫或腳本：

就是每次滾動時，圖片的中心位置和容器中心位置對齊（想象一下 Swiper 的效果）。關鍵代碼就下面這幾行：

.container {
  scroll-behavior: smooth;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
  scroll-padding: 20px;
}

img {
  scroll-snap-align: center;
  scroll-snap-stop: always;
}

複製代碼
複製代碼

利用該特性，還能夠實現相似 iOS的一些原生交互效果：

要是再利用一點點JavaScript腳本，還能夠實現沉浸式講故事的交互效果：

CSS Gap（溝槽）

CSS 的 gap 屬性的出現，幫助咱們解決了之前一直比較麻煩的佈局效果：

正如上圖所示，設計師指望的一個效果是，緊鄰容器邊緣沒有任何間距，但相鄰項目之間（水平或垂直方向）都有必定的間距。在沒有 gap 屬性以前使用 margin 是很煩人的，特別是多行多列的時候更麻煩。有了 gap 僅須要一行代碼便可。

CSS 的 gap 屬性是一個簡寫屬性，分爲 row-gap 和 column-gap ：

該屬性 gap 到目前爲止只能運用於多列布局，Flexbox佈局和網格佈局的容器上：

// 多列布局 
.multi__column { 
  gap: 5ch 
} 

// Flexbox佈局 
.flexbox { 
  display: flex; 
  gap: 20px 
} 

// Grid佈局 
.grid { 
  display: grid; 
  gap: 10vh 20% 
}
複製代碼
複製代碼

gap 屬性能夠是一個值，也能夠是兩個值：

.gap { 
  gap: 10px; 
} 
// 等同於 
.gap { 
  row-gap: 10px; 
  column-gap: 10px 
} 

.gap { 
  gap: 20px 30px; 
} 
// 等同於 
.gap { 
  row-gap: 20px; 
  column-gap: 30px; 
}
複製代碼
複製代碼

若是 gap 僅有一個值時，表示 row-gap 和 column-gap 相同。

CSS 邏輯屬性

國內大多數 Web 開發者面對的場景相對來講比較單一，這裏所說的場景指的是書寫模式或排版的閱讀模式。通常都是 LTR (Left To Right)。但有開發過國際業務的，好比阿拉伯國家的業務，就會碰到 RTL (Right To Left) 的場景。好比你打開 Facebook ，查看中文和阿拉伯文兩種語言下的 UI 效果：

在沒見有邏輯屬性以前，通常都會在 <html> 或 <body> 上設置 dir 屬性，中文是 ltr ，阿拉伯語是 rtl ，而後針對不一樣的場景運用不一樣的 CSS 樣式：

其實，閱讀方式除了水平方向（ltr 或 trl）以外，還會有垂直方向的閱讀方式：

爲了讓 Web 開發者能更好的針對不一樣的閱讀模式提供不一樣的排版效果，在CSS新增邏輯屬性。有了邏輯屬性以後，之前不少概念都有所變化了。好比咱們之前熟悉的座標軸，x 軸和 y 軸就變成了 inline 軸和 block 軸，並且這兩個軸也會隨着書寫模式作出調整：

除此以外，咱們熟悉的 CSS 盒模型也分物理盒模型和邏輯盒模型：

你可能感知到了，只要是之前帶有 top、right 、bottom 和 left 方向的物理屬性都有了相應的 inline-start 、 inline-end 、block-start 和 block-end 的邏輯屬性：

我根據 W3C 規範，把物理屬性和邏輯屬性映射關係整了一份更詳細的表：

回到實際生產中來：

若是不使用邏輯屬性的話，要實現相似上圖這樣的效果，咱們須要這樣來編寫 CSS：

.avatar {
  margin-right: 1rem;
}

html[dir="rtl"] .avatar {
  margin-right: 0;
  margin-left: 1rem;
}
複製代碼
複製代碼

有了 CSS 邏輯屬性以後，僅一行 CSS 代碼便可實現：

.avatar {
  margin-inline-end: 1rem;
}
複製代碼
複製代碼

簡單多了吧，特別是有國際化需求的開發者，簡直就是一種福音。

CSS 媒體查詢

CSS 媒體查詢 @media 又稱爲 CSS 條件查詢。在 Level 5 版本中提供了一些新的媒體查詢特性，能夠查詢到用戶在設備上的喜愛設置：

好比：

prefers-reduced-motion
prefers-contrast
prefers-reduced-transparency
prefers-color-scheme
inverted-colors

使用的方式和以往咱們熟悉的 @media 是類似。好比 prefers-color-scheme 實現暗黑查式的皮膚切換效果：

// 代碼源於： https://codepen.io/airen/full/ProgLL
// dark & light mode
:root {
  /* Light theme */
  --c-text: #333;
  --c-background: #fff;
}

body {
  color: var(--c-text);
  background-color: var(--c-background);
}

@media (prefers-color-scheme: dark) {
  :root {
    /* Dark theme */
    --c-text: #fff;
    --c-background: #333;
  } 
}
複製代碼
複製代碼

還能夠根據網格數據設置來控制資源的加載：

@media (prefers-reduced-data: reduce) {
  header {
    background-image: url(/grunge.avif);
  }
}

@media (prefers-reduced-data: no-preference) {
  @font-face {
    font-family: 'Radness';
    src: url(megafile.woff2);
  }
}
複製代碼
複製代碼

其餘的使用方式和效果就不一一演示了。不過在將來，CSS 的 @media 在編寫方式上會變得更簡單：

@media (width <= 320px) {
  body {
    padding-block: var(--sm-space);
  }
}

@custom-media --motionOK (prefers-reduced-motion: no-preference);

@media (--motionOK) {
  .card {
    transition: transform .2s ease;
  }
}

.card {
  @media (--motionOK) { & {
    transition: transform .2s ease;
  }}
}

@media (1024px >= width >= 320px) {
  body {
    padding-block: 1rem;
  }
}

複製代碼
複製代碼

自從摺疊屏設備的出現，給 Web 開發者帶來新的挑戰：

值得慶幸的是，微軟和三星的團隊就針對摺疊屏幕設備提供了不一樣的媒體查詢判斷。

上圖是帶有物理分隔線的雙屏幕設備：

main {
  display: grid;
  gap: env(fold-width);
  grid-template-columns: env(fold-left) 1fr;
}

@media (spanning: single-fold-vertical) {
  aside {
    flex: 1 1 env(fold-left);
  }
}
複製代碼
複製代碼

無縫的摺疊設備：

@media (screen-fold-posture: laptop){ 
  body { 
    display: flex; 
    flex-flow: column nowrap; 
  } 
  .videocall-area, 
  .videocall-controls { 
    	flex: 1 1 env(fold-bottom); 
  } 
}
複製代碼
複製代碼

CSS 比較函數

CSS 的比較函數是指 min() 、max() 和 clamp() ，咱們能夠給這幾個函數傳入值（多個）或表達式，它們會對傳入的值進行比較，而後返回最合適的值。另外，這幾個和咱們熟悉的 calc() 相似，也能夠幫助咱們在 CSS 中作動態計算。

min() 和 max()

先看 min() 和 max() ，它們之間的差別只是返回值的不一樣：

min() 函數會從多個參數（或表達式）中返回一個最小值做爲CSS屬性的值，即使用 min() 設置最大值，等同於 max-width
max() 函數會從多個參數（或表達式）中返回一個最大值做爲CSS屬性的值，即使用max()設置最小值，等同於 min-width

下圖展現了 min(50vw, 500px) 在瀏覽器視窗寬度改變時，返回的值的變化：

把上面的示例的 min() 換成 max() 函數，即 max(50vw, 500px)，它的返回值是：

clamp()

clamp() 和 min() 以及 max()略有不一樣，它將返回一個區間值，即在定義的最小值和最大值之間的數值範圍內的一箇中間值。該函數接受三個參數：

最小值（MIN）
中間值（VAL），也稱首選值
最大值（MAX）

clamp(MIN, VAL, MAX)，這三個值之間的關係（或者說取值的方式）：

若是 VAL 在 MIN 和 MAX 之間，則使用 VAL 做爲函數的返回值
若是 VAL 大於 MAX ，則使用 MAX 做爲函數的返回值
若是 VAL 小於 MIN ，則使用 MIN 做爲函數的返回值

好比下面這個示例：

.element { 
    /** 
    * MIN = 100px 
    * VAL = 50vw ➜ 根據視窗的寬度計算 
    * MAX = 500px 
    **/ 
    width: clamp(100px, 50vw, 500px); 
}
複製代碼
複製代碼

就這個示例而言，clamp() 函數的計算會經歷如下幾個步驟：

.element { 
    width: clamp(100px, 50vw, 500px); 

    /* 50vw至關於視窗寬度的一半，若是視窗寬度是760px的話，那麼50vw至關等於380px*/ 
    width: clamp(100px, 380px, 500px); 

    /* 用min()和max()描述*/ 
    width: max(100px, min(380px, 500px)) 

    /*min(380px, 500px)返回的值是380px*/ 
    width: max(100px, 380px) 

    /*max(100px, 380px)返回的值是380px*/ 
    width: 380px; 
}
複製代碼
複製代碼

示例效果以下：

簡單地說，clamp() 、min() 和 max() 函數均可以隨着瀏覽器視窗寬度的縮放對值進行調整，但它們的計算的值取決於上下文。

咱們來看一個比較函數中 clamp() 的典型案例。假設咱們須要在不一樣的屏幕（或者說終端場景）運用不一樣大小的 font-size ：

在尚未 CSS 比較函數以前，使用了一個叫 CSS 鎖（CSS Locks）的概念來實現相似的效果：

須要作一些數學計算：

使用 clamp() 以後，只須要一行代碼就能夠實現：

/** minf: 20px (min font-size)
 * maxf: 40px (max font-size)
 * current vw: 100vw
 * minw: 320px (min viewport's width)
 * maxw: 960px (max viewport's width)
*/
h1 {
  font-size: clamp(20px, 1rem + 3vw, 40px);
}
複製代碼
複製代碼

使用這方面的技術，咱們就能夠輕易實現相似下圖這樣的效果：

CSS 內容可見性

CSS 內容可見性，說要是指 content-visibilit 和 contain-intrinsic-size 兩個屬性，目前隸屬於 W3C 的 CSS Containment Module Level 2 模塊，主要功能是能夠用來提升頁面的渲染性能。

通常來講，大多數Web應用都有複雜的UI元素，並且有的內容會在設備可視區域以外（內容超出了用戶瀏覽器可視區域），好比下圖中紅色區域就在手機設備屏幕可視區域以外：

在這種場合下，咱們可使用CSS的 content-visibility 來跳過屏幕外的內容渲染。也就是說，若是你有大量的離屏內容（Off-screen Content），這將會大幅減小頁面渲染時間。

Google Chrome 團隊有工程師對 content-visibility 作過相關的測試：

使用了 CSS 的 `content-visibility` 屬性，瀏覽器的渲染過程就變得更加容易。本質上，這個屬性改變了一個元素的可見性，並管理其渲染狀態。

而 contain-intrinsic-size 屬性控制由 content-visibility 指定的元素的天然尺寸。它的意思是，content-visibility 會將分配給它的元素的高度（height）視爲 0，瀏覽器在渲染以前會將這個元素的高度變爲 0，從而使咱們的頁面高度和滾動變得混亂。但若是已經爲元素或其子元素顯式設置了高度，那這種行爲就會被覆蓋。若是你的元素中沒顯式設置高度，而且由於顯式設置 height可能會帶來必定的反作用而沒設置，那麼咱們可使用contain-intrinsic-size來確保元素的正確渲染，同時也保留延遲渲染的好處。

換句話說，contain-intrinsic-size 和 content-visibility 是通常是如影隨行的出現：

section {
  content-visibility: auto;
  contain-intrinsic-size: 1000px;
}
複製代碼
複製代碼

CSS 內在尺寸

若是你使用瀏覽器開發者工具審查代碼時，將鼠標放到一個 <img> 標籤上，你會看到相似下圖這樣的：

<img> 的 src 路徑上浮出來的圖片底下有一行對圖像的尺寸的描述，即252 x 158 px (intrinsic: 800 x 533 px) ，其實現這表述圖片尺寸中兩個重要信息：

外在尺寸： 252 x 158 px ，開發者給 img 設置的尺寸
內在尺寸： 800 x 533 px ，圖片原始尺寸

其實在 CSS 中給一個元素框設置大小時，有的是根據元素框內在的內容來決定，有的是根據上下文來決定的。根據該特性，CSS的尺寸也分爲內部(內在)尺寸和外部（外在）尺寸。

內部尺寸：指的是元素根據自身的內容（包括其後代元素）決定大小，而不須要考慮其上下文；而其中 min-content 、 max-content 和 fit-content 能根據元素內容來決定元素大小，所以它們統稱爲內部尺寸。
外部尺寸：指的是元素不會考慮自身的內容，而是根據上下文來決定大小。最爲典型的案例，就是 width 、min-width 、max-width 等屬性使用了 % 單位的值。

通地一個簡單的示例來向你們演示 CSS 內在尺寸的特性，即 min-content 、max-content 和 fit-content 的特性。

<h1>CSS is Awesome</h1>

<style>
  h1 {
    width: auto;
  }
</style>  
複製代碼
複製代碼

先來看 h1 的 width 取值爲 auto 和 min-content 的差別：

// 外在尺寸
h1 {
	width: auto; // 根據容器變化
}

// 內在尺寸
h1 {
	width: min-content; // 根據內容變化
}
複製代碼
複製代碼

從上圖中不難發現，width 取值爲 min-content 時，h1 的寬度始終是單詞「Awesome」長度（大約是144.52px）。它的寬度和容器寬度變化並沒有任何關係，但它受排版內相關的屬性的影響，好比font-size、font-family 等。

再來看max-content ：

當h1 的 width 取值爲 max-content 時，它的寬度是h1 所在行全部內容的寬度。最後來看 fit-content ：

相對而言，fit-content 要比 min-content 和 max-content 複雜地多：

h1 {
	width: fit-content;
}

// 等同於 
h1 {
	width: auto;
  min-width: min-content;
  max-width: max-content;
}
複製代碼
複製代碼

簡單地說，fit-content 至關於 min-content 和 max-content，其取值:

若是元素的可用空間(Available)充足，fit-content 將使用 max-content
若是元素的可用空間(Available)不夠充足，比 max-content 小點，那就是用可用空間的值，不會致使內容溢出
若是元素的可用空間(Available)很小，比 min-content還小,那就使用 min-content

使用下圖來描述它們之間的關係：

min-content、max-content 和 fit-content 被稱之個內在尺寸，它能夠運用於設置容器尺寸的屬性上，好比width 、height 以及 inline-size 和 block-size 等。但有些屬性上使用的話則會無效：

min-content、max-content 和 fit-content 用於 flex-basis 無效
fit-content 用於設置網格軌道尺寸的屬性上無效
網格項目或Flex項目上顯式設置 width:fit-content也無效,由於它們的默認寬度是 min-content
最好不要在 min-width 或 max-width 上使用 fit-content，易形成混亂，建議在 width 上使用 fit-content

在佈局上使用 min-content 、max-content 或 fit-content 能夠幫助咱們設計內在佈局，另外在構建一些自適應的佈局也很是靈活。特別是和 CSS 的 Grid 和 Shapes 相關特性結合，還能構建一些具備創意的佈局。

最後有一點須要特別聲明，fit-content 和 fit-content()函數不是相同的兩個東東，使用的時候須要區別對待。

CSS 的 display

display 對於你們而言並不陌生，主要用來格式化上下文，這裏特別拿出來和你們說的是由於 display 也有一些變化。其中之一就是 display 將來能夠支持多個值：

據最新的消息，Sarafi 瀏覽器已經把display 設置兩個值已進入實驗性屬性。display 取兩個值的含義大體以下：

另外單獨要說的是，display 新增了 contennts 屬性值，** W3C規範是這樣描述的**：

大體意思是說：

好比：

<div class="outer">
  I'm, some content
  <div class="inner">I'm some inner content </div>
</div>

<style>
  .outer {
  	border: 2px solid lightcoral;
    background-color: lightpink;
    padding: 20px;
  }
  
  .innter {
  	background-color: #ffdb3a;
    padding: 20px;
  }
</style>
複製代碼
複製代碼

上面這個簡單地示例代碼，你將看到的效果以下：

若是咱們在.outer 元素上顯式設置 display: contents ，該元素自己不會被渲染，但子元素可以正常渲染：

在某些佈局中，特別是不但願調整 HTML 的結構的時候，咱們就可使用該特性。好比在 Flexbox 或 Grid 中，但願把其餘後代元素變成網格項目或 Flex項目，那就能夠這樣作：

display: contents 在規範討論階段和 display: subgrid 的討論中是很是的激烈，最終是 display： contents 獲勝了。你如今在Grid的佈局中，也沒有單獨的display: subgrid ，而是將subgrid 移入到 grid-template-columns 和 grid-template-rows 中。

另外還有一個比較大的爭執就是 display: contents 和 Web 可訪問性方面的。有關於這方面的討論，你要是感興趣的話，能夠閱讀：

CSS @規則

CSS 中的 @ 規則有不少種，但你們比較熟悉的應該是 @import 、@media 和 @supports 之類的。今天給你們簡單的提幾個不常見的，好比：

用於嵌套的 @nest 和 @apply
用於註冊自定義屬性的 @property
最近討論比較多的容器查詢 @container
@argyleink 在新分享的PPT提到的 @scope 和 @layer

CSS 的嵌套

使用過 CSS 處理器的同窗，應該用過嵌套來組織本身的代碼，好比 SCSS:

// SCSS
foo {
	color: red;
  
  & bar {
  	color: green;
  }
}
複製代碼
複製代碼

上面的代碼通過編譯以後：

// CSS
foo {
	color: red;
}

foo bar {
	color: green;
}
複製代碼
複製代碼

慶幸的是，W3C 也在討論和定義CSS中的嵌套規則。目前兩種規則：

foo {
	color: red;
  
  @nest bar {
  	color: green;
  }
}

// 或者 
foo {
	color: red;
  
  & bar {
  	color: green;
  }
}

// 都等同於
foo {
	color: red;
}

foo bar {
	color: green;
}
複製代碼
複製代碼

也能夠和媒體查詢 @media 相互嵌套：

article {
  color: darkgray;

  & > a {
    color: var(--link-color);
  }
}

code > pre {
  @media (hover) {
    &:hover {
      color: hotpink;
    }
  }
}

code > pre {
  @media (hover) {
    @nest &:hover {
      color: hotpink;
    }
  }
}

article {
  @nest section:focus-within > & {
    color: hotpink;
  }
}

main {
  padding: var(--space-sm);

  @media (width >= 540px) { & {
    padding: var(--space-lg);
  }}
}
複製代碼
複製代碼

除了 @nest 以外還有 @apply 。你可能在一些前端的框架或構建器中看到過 @apply：

若是你在 Chrome Canary 瀏覽器「實驗性屬性」就能夠直接體驗 @apply ：

簡單地說，它有點相似於 SCSS 中的混合宏 @mixin 和 @extend :

:root {
	--brand-color: red;
  --heading-style: {
  	color: var(--brand-color);
    font-family: cursive;
    font-weight: 700;
  }
}

h1 {
	--brand-color: green;
  @apply --heading-style;
}
複製代碼
複製代碼

CSS Houdini 變量 @property

@property 是用來註冊一個變量的，該變量是一個 CSS Houdini 中的變量，但它的使用和 CSS 中的自定義屬性（CSS變量）是同樣的，不一樣的是註冊方式：

// Chrome 78+
// 須要在 JavaScript腳本中註冊
CSS.registerProperty({
	'name': '--custom-property-name',
  'syntax': '<color>',
  'initialValue': 'black',
  'inherits': false
})

// Chrome 85+
// 在CSS文件中註冊
@property --custom-property-name {
	'syntax': '<color>',
  'initialValue': 'black',
  'inherits': false
}
複製代碼
複製代碼

他的最大特點之一就是能夠指定已註冊的 CSS 變量的類型、初始值，是否可繼承：

雖然它的使用方式和 CSS 的自定義屬性類似，但它要更強大，特別是在動效方面的使用，能加強 CSS 的動效能力，甚至實現一些之前 CSS 沒法實現的動效。好比

@property --hue {
  initial-value: 0;
  inherits: false;
  syntax: '<number>';
}

@keyframes rainbow {
  to {
    --hue: 360;
  }
}
複製代碼

@property --milliseconds {
  syntax: '<integer>';
  initial-value: 0;
  inherits: false;
}
.counter {
  counter-reset: ms var(--milliseconds);
  animation: count 1s steps(100) infinite;
}

@keyframes count { to {
  --milliseconds: 100;
}}

複製代碼
複製代碼

把它和 CSS Houdini 的 Paint API 結合起來，可作的事情更多：

更多這方向的效果能夠在 houdini.how 網站上查閱：

容器查詢 @container

Una Kravets 在 Google I/O 開發大會上就分享了容器查詢 @container ，她把它稱爲新的響式佈局所需特性之一：

那麼容器查詢 @container 能夠作什麼呢？假設你的設計師給你提供了一份像下圖這樣的設計稿：

你可能首先會想到的是 @media (在沒有容器查詢以前，彷佛也只有這樣的方式)，而有了@container 以後，就能夠換過一種姿式：

看上去很是強大，事實上也很強大，而且它的使用和 @meida 很是類似：

// Demo: https://codepen.io/una/pen/mdOgyVL
.product {
  contain: layout inline-size;
}

@container (min-width: 350px) {
  .card-container {
    padding: 0.5rem 0 0;
    display: flex;
  }

  .card-container button {
    /* ... */
  }
}
複製代碼
複製代碼

對於 @container 特性，有叫好的，也有不一樣的，好比 Kenton de Jong 在他的新博文《Why I am not a fan of CSS container queries》闡述了本身不喜歡該t特性：

就我我的而言，我是很喜歡這個特性，後面會花必定的時間深刻了解和學習 @container。固然有討論是一件好事，這樣會讓該特性更成熟，若是你也想參與進來討論的話，能夠點擊這裏加入。

@layer 和 @scope

我之前只看到過 @scope 規則，主要是用來處理 CSS 中樣式規則做用域相關的，但並無深刻了解過。Una Kravets 在 Google I/O 開發大會分享上再次看到了 @scope ：

@scope 內的樣式容許穿透和特定組件的樣式，以免命名衝突，許多框架和插件（如CSS模塊）已經使咱們可以在框架內作到這一點。如今，這個規範將容許咱們爲咱們的組件編寫具備可讀性的CSS的本地封裝樣式，而不須要調整標記。

/* @scope (<root>#) [to (<boundary>#)]? { … } */

@scope (.tabs) to (.panel) {
  :scope { /* targeting the scope root */ }
  .light-theme :scope .tab { /* contextual styles */ }
}
複製代碼
複製代碼

怎麼看上去和 Web Componed中的 Scope 那麼的類似呢？

對於 @layer ，我第一見：

@layer reset {
  * { box-sizing: border-box; }
  body { margin: 0; }
}
// ...
@layer reset { /* add more later */ }

@import url(headings.css) layer(default);
@import url(links.css) layer(default);

@layer default;
@layer theme;
@layer components;

@import url(theme.css) layer(theme);

@layer default, theme, components;

@import url(theme.css) layer(theme);

@layer framework.theme {
  p {
    color: rebeccapurple;
  }
}

@layer framework {
  @layer theme {
    p { color: cyan; }
  }
}
複製代碼
複製代碼

上面代碼表示啥意思，我也還沒整明白，只知道 @layer 被稱爲層疊層（Cascade Layers）。該特性是什麼** W3C 層疊和繼承規範 Level5** 中新提出來的。

其餘...

在我分享結束沒多久，正在整理這篇文章的時候，發現個人偶像 @argyleink 也分享了一個類似的話題《Hover:CSS! What's New in 2021?》，分享了 31 個 CSS 相關的特性，而且按風險級別分爲高、中、低三檔：

你會發現，和我整理的特性有不少吻合之處。若是你聽過他去年在倫敦CSS大會分享的《London CSS: What‘s New in 2020?》，你會發現 2021 年的是 2020 年的升級版。

待續 ...

文章很長，能閱讀到這裏，說明你也是 CSS 的真愛。感謝你們的閱讀，在將來我將繼續爲你們服務。把 CSS 方面最新、最有意思的一面與你們共享！