Google開發者大會每年都會提出有關于 Web UI 和 CSS 方面的新特性，今年又上新了許多新功能，今天就從中找出了影響最大的幾個功能給大家介紹一下

:has

:has() 可以通過檢查父元素是否包含特定子元素或這些子元素是否處于特定狀態來改變樣式，也就是父選擇器。使用:has()選擇器可以訪問父元素、子元素，甚至兄弟元素

例如：帶有“??”元素的項目會應用灰色背景，而帶有選中復選框的項目會應用藍色背景。

Style Queries 樣式查詢

容器查詢規范 允許查詢父容器的樣式值。目前在 Chrome 111 中部分實現，可以在其中使用 CSS 自定義屬性來應用容器樣式。

@container style(--sunny: true) {.weather-card {background: linear-gradient(30deg, yellow, orange);}.weather-card:after {content: url(<date-uri-for-demo-brevity>);background: gold;}
}

nth-of

nth-of 是更加高級 nth-child 語法，提供了一個新關鍵字（“of”），它允許使用現有的 An+B 語法，并在其中搜索更具體的子集。

如果使用常規的 nth-child，例如 :nth-child(2) 在特殊類上，瀏覽器將選擇應用了特殊類的元素，也是第二個子元素。這與 :nth-child(2 of .special) 形成對比，后者將首先預過濾所有 .special 元素，然后從該列表中選擇第二個。

:nth-child(2 of .highlight) {outline: 0.3rem dashed hotpink;outline-offset: 0.7rem;
}

動態視口單元

Web 開發人員今天面臨的一個常見問題是準確且一致的全視口大小調整，尤其是在移動設備上。作為開發人員，希望 100vh （視口高度的 100%）表示“與視口一樣高”，但該 vh 單元不考慮移動設備上縮回導航欄之類的事情，因此有時它最終會太長并導致滾動。

為了解決這個問題，現在在 Web 平臺上提供了新的單位值：

• 小視口高度和寬度（或 svh 和 svw），表示最小的活動視口大小。
• 較大的視口高度和寬度（lvh 和 lvw），表示最大大小。
• 動態視口高度和寬度（dvh 和 dvw）。

支持 嵌套

Sass等框架的嵌套功能，是最受css開發人員追捧的功能之一，但是要想使用樣式嵌套的功能只能安裝各種框架，現在Web平臺也同樣支持了嵌套功能，允許開發人員以更簡潔的分組格式編寫，從而減少冗余。

.card {}
.card:hover {}/* can be done with nesting like */
.card {&:hover {}
}

Scoped CSS

Scoped CSS是CSS 作用域樣式，允許開發人員指定應用特定樣式的邊界，本質上是在 CSS 中創建原生命名空間。以前，開發人員依靠第 3 方腳本來重命名類，或特定的命名約定來防止樣式沖突，但很快，可以使用 @scope

這里將 .title 元素限定為 .card。這將防止該 title 元素與頁面上的任何其他 .title 元素發生沖突，例如博客文章標題或其他標題。

@scope (.card) {.title { font-weight: bold;}
}

Scroll-driven animations

Scroll-driven animations是滾動驅動動畫，它允許您根據滾動容器的滾動位置控制動畫的播放。這意味著當您向上或向下滾動時，動畫會向前或向后滑動。此外，對于滾動驅動動畫，您還可以根據元素在其滾動容器中的位置來控制動畫。這允許您創建有趣的效果，例如視差背景圖像、滾動進度條和在進入視野時顯示自己的圖像。

此 API 支持一組 JavaScript 類和 CSS 屬性，使您可以輕松創建聲明性滾動驅動的動畫。以前需要安裝swiper插件才能實現的效果，現在原生就可以實現

Trigonometric functions

Trigonometric functions是三角函數，CSS的另一個新功能是將三角函數添加到現有的CSS數學函數中。這些函數現在在所有現代瀏覽器中都是穩定的，并使您能夠在Web平臺上創建更有機的布局。一個很好的例子是這個徑向菜單布局，現在可以使用sin()和cos()函數進行設計和動畫。

在下面的示例中，點圍繞中心點旋轉。每個點不是圍繞其自身的中心旋轉然后向外移動，而是在 X 和 Y 軸上平移。X 軸和 Y 軸上的距離分別通過考慮 --angle 的 cos() 和 sin() 來確定。