本指南的目的是向您介绍 CSS 最近引入的一系列创新且强大的功能。虽然本文概述了它们的语法和实际用例，但每个功能还有更深入的内容需要探索。以此为起点，深入研究这些前沿进展。
1。容器查询（大小）
什么是基于大小的容器查询？
基于大小的容器查询允许您根据父容器的尺寸将样式应用于子元素，而不是像传统媒体查询那样依赖整个视口的大小。
<div>
<p><strong>Why Does This Matter?</strong></p>
<p>Have you ever wished to style components dynamically based on their container’s size instead of the page’s overall dimensions? Container queries make this possible, providing an ideal solution for component-based design systems or modular web components where the parent container’s size dictates the layout.</p>
<p>Browser Support:</p>
<p>• Full Support: Modern browsers.</p>
<p>• Enhancements: Yes, if non-critical styles depend on it.</p>
<p><strong>2. Container Queries (Style)</strong></p>
<p>What Are Style-Based Container Queries?</p>
<p>This feature enables styling child elements when a specific custom property ( — custom-property) within the container takes on a particular value.<br>
</p>
<pre class="brush:php;toolbar:false">.container {
--variant: 1;
&.variant2 {
--variant: 2;
}
}
@container style(--variant: 1) {
.button { /* Apply styles when --variant is 1 */ }
}
@container style(--variant: 2) {
.button { /* Apply styles when --variant is 2 */ }
}
为什么这很重要？
这将“CSS mixins”的概念变为现实。正如 Sass mixins 增强了可维护性一样，基于样式的容器查询扩展了 CSS 的本机功能，考虑了级联并允许更大的灵活性。
浏览器支持：
• 支持：Chrome 及其衍生产品。
• 即将推出：Safari。
• 不支持：Firefox。
• 增强功能：有限。
• Polyfill：不可用。
3。集装箱单元
什么是集装箱单元？
容器单位是响应式测量单位（例如，cqw、cqh、cqmin、cqmax），它们根据容器的大小而不是视口来计算尺寸。它们的工作方式与 vw 类似（视口宽度的 1%），但范围仅限于容器。
.card {
padding: 2cqw;
font-size: 1cqmin;
}
为什么这很重要？
如果内部元素需要根据其父容器按比例缩放，容器单元提供了一个干净的、仅 CSS 的解决方案。一个常见的用例是缩放卡片或模块化组件内的版式或间距。
浏览器支持：
• 全面支持：现代浏览器。
• 增强功能：是的，有后备功能。
• Polyfill：可用。
4。 :has() 伪选择器
什么是 :has() 选择器？
:has() 伪类允许您根据父元素中特定子元素的存在来设置父元素的样式。
figure:has(figcaption) {
border: 1px solid black;
padding: 0.5rem;
}
为什么这很重要？
:has() 选择器在 CSS 中有效地充当“父选择器”，使得可以根据子元素设置父元素的样式。例如，您可以使用 :has() 仅在出现错误消息时突出显示父表单字段。
浏览器支持：
• 支持：所有主要浏览器。
• Polyfill：仅限 JavaScript。
*5。查看过渡
*
什么是视图转换？
此功能引入了两种类型的动画：
单页转换（需要 JavaScript）。
多页面过渡（仅限 CSS）。
<div>
<p><strong>Why Does This Matter?</strong></p>
<p>Have you ever wished to style components dynamically based on their container’s size instead of the page’s overall dimensions? Container queries make this possible, providing an ideal solution for component-based design systems or modular web components where the parent container’s size dictates the layout.</p>
<p>Browser Support:</p>
<p>• Full Support: Modern browsers.</p>
<p>• Enhancements: Yes, if non-critical styles depend on it.</p>
<p><strong>2. Container Queries (Style)</strong></p>
<p>What Are Style-Based Container Queries?</p>
<p>This feature enables styling child elements when a specific custom property ( — custom-property) within the container takes on a particular value.<br>
</p>
<pre class="brush:php;toolbar:false">.container {
--variant: 1;
&.variant2 {
--variant: 2;
}
}
@container style(--variant: 1) {
.button { /* Apply styles when --variant is 1 */ }
}
@container style(--variant: 2) {
.button { /* Apply styles when --variant is 2 */ }
}
*为什么这很重要？
*
过渡通过在状态变化期间对元素进行动画处理来增强用户体验，使交互感觉更加流畅。他们使用“补间”，即动画在开始和结束状态之间进行插值，而无需手动定义每个步骤。
浏览器支持：
• 支持：Chrome 及其衍生产品。
• 不支持：Safari、Firefox。
• 增强功能：是的，带有后备动画。
6。嵌套
什么是嵌套？
CSS 嵌套允许您在其父规则中编写子选择器，使代码更清晰且更易于维护。
.card {
padding: 2cqw;
font-size: 1cqmin;
}
为什么这很重要？
嵌套减少了 CSS 中的冗余，将相关样式分组在一起。然而，过度使用它可能会导致选择器过于具体并降低可重用性。
浏览器支持：
• 全面支持：现代浏览器。
7。滚动驱动的动画
什么是滚动驱动动画？
这些动画与滚动相关，可以使用 CSS 实现，而不依赖于 JavaScript。
figure:has(figcaption) {
border: 1px solid black;
padding: 0.5rem;
}
为什么这很重要？
从进度指示器到视差效果，滚动驱动的动画提高了交互性并减少了对性能关键型任务对 JavaScript 的依赖。
浏览器支持：
• 支持：Chrome。
• 即将推出：Firefox。
8。子网格
什么是子网格？
子网格值允许子网格项与其父网格的行或列对齐，而无需重复网格定义。
if (!document.startViewTransition) {
updateDOM();
} else {
document.startViewTransition(() => updateDOM());
}
为什么这很重要？
子网格确保嵌套网格结构之间的一致对齐，使复杂的布局更易于维护。
浏览器支持：
• 完全支持：所有现代浏览器。
最后的想法
CSS 继续以令人兴奋的速度发展。凭借容器查询、视图转换和子网格等功能，该语言对于现代 Web 开发变得更加强大和直观。密切关注未来的发展，包括相对颜色语法、作用域 CSS 和新的 HTML 元素（例如 ），它们有望带来更大的设计可能性。
以上是新的 CSS 可以让您的生活更轻松的详细内容。更多信息请关注PHP中文网其他相关文章！
