過去幾年 CSS 發(fā)展迅猛，涌現(xiàn)出眾多新功能，它們徹底改變了我編寫 CSS 的方式。

因此，在本文中，我將快速分享我最喜歡的 20 個 CSS 功能，以便您能夠盡快獲得盡可能多的信息。

如果您想深入了解其中任何一個功能，請務必查看 MDN 上的文檔（https://developer.mozilla.org/en-US/docs/Web/CSS），幾乎每個功能都值得深入學習。

現(xiàn)在，讓我們一起來深入了解一下它們。

1. @layer

老實說，@layer 是我最喜歡的 CSS 功能之一 。它已經(jīng)推出一段時間了，但真沒有多少人使用它，他們真的應該使用它。

它允許您在 CSS 中創(chuàng)建特定層 。因此，您可以定義如下內(nèi)容：

@layer reset, theme, defaults, layout, components, utils;

@layer reset {
  * { margin: 0; padding: 0; }
}
@layer theme {
  :root {
    --accent: #4f46e5;
  }
}
@layer utils {
  * {
    color: red;
  }
}

因為 utils 位于 components（或其他任何內(nèi)容）之后，所以它總是會勝出，即使選擇器在技術上不那么具體。

您甚至可以直接導入到層中：

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

超級強大，卻又被嚴重低估。

2. text-wrap: balance

你見過標題里有一個詞格格不入，卻獨占一行嗎？

text-wrap: balance 可以在一行內(nèi)解決這個問題。

h1 {  text-wrap: balance;}

它盡可能均衡地平衡各行文本。

因此，不要：

Super Long Heading WithOne WordAlone

您將獲得：

Super Long HeadingWith One Word Alone

更簡潔、更美觀、更易讀。

3. CSS 嵌套

CSS 終于支持嵌套了——無需預處理器。

它能讓你編寫更簡潔、更結構化的樣式。

.main-title {
font-size: 2rem;
@media (min-width: 800px) {
    font-size: 3rem;
  }
  &.red {
    color: red;
  }
  .subtitle {
    font-size: 1.25rem;
  }
}

它類似于 SCSS，但原生支持。

4. 容器查詢

容器查詢解決了一個巨大的問題：它們允許您根據(jù)組件容器的大?。ǘ皇琼撁娲笮。﹣碓O置組件的樣式。

.card {  container-type: inline-size;}

@container (min-width: 450px) {
  .card {
    flex-direction: row;
  }
}
@container (max-width: 449px) {
  .card {
    flex-direction: column;
  }
}

非常適合 React 等基于組件的框架。

我們將告別媒體查詢的混亂。

5. 相對顏色

相對顏色允許您根據(jù)現(xiàn)有顏色計算新顏色。

.button {
  --bg: oklch(70% 0.2 250);
  background: var(--bg);
  border: 2px solid color-mix(in oklch, var(--bg) 85%, black);
}

.button:hover {
  background: color-mix(in oklch, var(--bg) 92.5%, black);
}

您還可以動態(tài)地在顏色空間之間進行轉換（例如 hsl → oklch）。

這對于主題系統(tǒng)非常有用。

6. :has()（父選擇器）

:has() 基本上就是我們一直想要的父選擇器。

.input-group:has(input:valid) {  border-color: green;}

.input-group:has(input:invalid) {  border-color: red;}

這可以讓你根據(jù)子元素來設置父元素的樣式。

它非常棒，現(xiàn)在所有主流瀏覽器都支持它。

7. @property

自定義屬性很棒——但它們默認不具備動畫效果。

@property 通過允許你定義類型、繼承和默認值來解決這個問題。

@property --my-color {  
syntax: '<color>';  inherits: false;  initial-value: red;
}

.box {
  --my-color: red;  background: var(--my-color);  
transition: --my-color 0.5s;
}
.box:hover { 
 --my-color: green;
 }

這使得自定義屬性類型安全且可動畫化。

8. 子網(wǎng)格

子網(wǎng)格的出現(xiàn)經(jīng)歷了漫長的時間，但它終于來了，而且非常棒。

它允許子網(wǎng)格從其父網(wǎng)格繼承軌道。

.parent {  
display: grid;  grid-template-columns: 1fr 1fr;  gap: 2rem;
}

.child {  
display: grid;  grid-template-columns: subgrid;  gap: inherit;
}

無需再手動同步軌道尺寸。

9. 多值顯示

現(xiàn)在可以分別定義外部顯示和內(nèi)部顯示。

.box {  display: inline flex;}

inline = 如何布局自身（外部）

flex = 如何布局子元素（內(nèi)部）

這是未來組合布局行為的簡潔方法。

10. display: contents

這個方法雖然很巧妙，但非常有用。

它使包裝元素在視覺上消失，同時保留其樣式。

.wrapper {  display: contents;}

它使包裝器的子元素表現(xiàn)得像 flex/grid 父元素的直接子元素，非常適合修復奇怪的 flexbox 間隙問題。

11. 邏輯屬性

邏輯屬性只是物理屬性的方向感知版本。

.box {  
padding-inline-start: 1rem; /* instead of padding-left */  
margin-block-end: 2rem; /* instead of margin-bottom */}

它們遵循書寫模式和語言方向，因此您的網(wǎng)站可以自動以 RTL 或垂直文本顯示。

12. ::backdrop

::backdrop 偽元素允許您設置 <dialog> 的背景樣式。

dialog::backdrop {  
background: rgba(0,0,0,0.5);  
backdrop-filter: blur(4px);}

添加一些淡入淡出動畫，你就得到了漂亮的模態(tài)窗口。

13. transition-behavior: allow-discrete和14. @starting-style

這兩個屬性可以協(xié)同工作，為通常無法動畫的內(nèi)容（例如顯示）添加動畫效果。

@starting-style {  
dialog[open]
  {    
opacity: 0;    scale: 0.8;  
  }
}

dialog[open] {  
transition: opacity .3s, scale .3s;  
transition-behavior: allow-discrete;  
opacity: 1;  scale: 1;
}

Firefox 中仍然缺少此功能，但對于漸進式增強來說非常棒。

15. field-sizing: content

這個功能太酷了：它允許文本區(qū)域隨著內(nèi)容增長，無需 JS。

textarea {  field-sizing: content;}

目前只有 Chromium 支持它，但它不會破壞其他任何功能。非常棒的漸進式增強。

16. @scope

@scope 允許你將樣式限定在特定的子樹中，就像 CSS 模塊一樣，但原生支持。

@scope (.article) to (figure) {  
h2 {    
color: rebeccapurple; 
   }
 }

或者內(nèi)聯(lián)在 <style> 標簽中：

<section>  
<style scoped>    
h2 { color: rebeccapurple; }
  </style>  
<h2>Only this one is purple</h2>
</section>

對于組件庫來說超級方便。

（Firefox 仍然缺少此功能。）

17. anchor() 定位

這是我最推崇的功能。

它允許你像真正的錨點一樣，將元素相對于其他元素進行定位。

.anchor {  anchor-name: --my-anchor;}

.tooltip {  
position-anchor: --my-anchor;  
top: anchor(bottom);  
left: anchor(right);
}

瀏覽器處理所有數(shù)學運算。

它仍處于前沿（目前還沒有 Firefox 或 Safari），但它將改變游戲規(guī)則。

18. 容器樣式查詢

我們之前了解過基于大小的容器查詢。

這與此類似，但允許您查詢?nèi)萜鲀?nèi)的樣式值。

@container style(--accent: blue)
 {  
.card {    
border-color: var(--accent);  }
}

用于稍后基于主題的布局。

19. interpolate-size: allow-keywords

最后，我們可以從 auto 或 max-content 動畫！

:root {  interpolate-size: allow-keywords;}

.panel {  height: 2.5rem;  transition: height .4s;}
.panel:hover {  height: max-content;}

通常情況下，它會立即跳轉，現(xiàn)在動畫效果流暢。

太讓人滿意了。

20. CSS 的未來就在這里

就是這樣，20 個現(xiàn)代 CSS 特性讓編寫 CSS 再次變得有趣。

其中一些已經(jīng)準備好投入使用，而另一些則非常適合逐步增強。

無論如何，它們都值得嘗試，因為它們開辟了許多新的可能性。