本文将带您探索 CSS 最新引入的一系列强大功能，它们将显著提升您的 Web 开发效率。我们将简要介绍这些功能的语法和应用场景，并指引您深入研究相关细节。
1. 容器查询（基于尺寸）
容器查询（基于尺寸）允许您根据父容器的尺寸，而不是视口尺寸，来为子元素应用样式。
<code class="css"><div class="container">
<div class="child"></div>
</div>
.container {
container: layout / inline-size;
}
@container layout (min-inline-size: 300px) {
.child {
display: flex;
gap: 1rem;
}
}</code>
重要性： 此功能让您能够根据组件本身的大小调整样式，非常适合组件化设计系统和模块化 Web 组件。
立即学习“前端免费学习笔记（深入）”；
浏览器支持： 现代浏览器全面支持。增强功能可用。
2. 容器查询（基于样式）
基于样式的容器查询允许根据容器内自定义属性的值来应用样式。
<code class="css">.container {
--variant: 1;
&.variant2 {
--variant: 2;
}
}
@container style(--variant: 1) {
.button { /* 应用于 --variant 为 1 的样式 */ }
}
@container style(--variant: 2) {
.button { /* 应用于 --variant 为 2 的样式 */ }
}</code>
重要性： 实现了 CSS Mixin 的概念，增强了 CSS 的灵活性和可维护性。
浏览器支持： Chrome 及其衍生产品支持。Safari 即将推出支持。Firefox 不支持。增强功能有限，目前无 polyfill。
3. 容器单位
容器单位 (cqw、cqh、cqmin、cqmax) 是响应式单位，根据容器大小而非视口大小计算尺寸。
<code class="css">.card {
padding: 2cqw;
font-size: 1cqmin;
}</code>
重要性： 方便内部元素根据父容器比例缩放，例如调整卡片或组件内的文字和间距。
浏览器支持： 现代浏览器全面支持，并提供后备功能。polyfill 可用。
4. :has() 伪选择器
:has() 选择器允许您根据父元素中特定子元素的存在来设置父元素的样式。
<code class="css">figure:has(figcaption) {
border: 1px solid black;
padding: 0.5rem;
}</code>
重要性： 充当 CSS 中的“父选择器”，根据子元素状态调整父元素样式，例如根据是否存在错误信息来突出显示表单字段。
浏览器支持： 所有主流浏览器支持，但可能需要 JavaScript polyfill。
5. 视图转换
视图转换提供两种类型的动画：单页转换（需要 JavaScript）和多页转换（纯 CSS）。
<code class="javascript">if (!document.startviewtransition) {
updatedom();
} else {
document.startviewtransition(() => updatedom());
}</code>
重要性： 通过动画增强用户体验，使页面切换更流畅。
浏览器支持： Chrome 及其衍生产品支持。Safari 和 Firefox 不支持，但提供后备动画。
6. CSS 嵌套
CSS 嵌套允许在父规则中直接编写子选择器，提高代码可读性和维护性。
<code class="css">.card {
padding: 1rem;
> h2:first-child {
margin-block-start: 0;
}
footer {
border-block-start: 1px solid black;
}
}</code>
重要性： 减少冗余代码，将相关样式分组。但需避免过度使用导致选择器过于具体。
浏览器支持： 现代浏览器全面支持。
7. 基于滚动的动画
基于滚动的动画通过 CSS 实现，无需 JavaScript。
<code class="css">.progress {
animation-timeline: scroll();
}</code>
重要性： 实现进度指示器、视差效果等交互效果，同时提高性能。
浏览器支持： Chrome 支持，Firefox 即将支持。
8. 子网格
子网格允许子网格项与其父网格的行或列对齐，无需重复定义网格。
<code class="css">.parent {
display: grid;
grid-template-columns: 1fr 1fr;
}
.child {
display: grid;
grid-template-columns: subgrid;
}</code>
重要性： 简化嵌套网格结构的对齐，提高维护性。
浏览器支持： 所有现代浏览器全面支持。
总结
CSS 持续快速发展，容器查询、视图转换和子网格等新特性极大增强了其功能和易用性。 未来还将有更多令人期待的新特性出现，例如相对颜色语法、作用域 CSS 等，为 Web 开发带来更多可能性。
