新的 CSS 可以让您的生活更轻松

本指南的目的是向您介绍 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。查看过渡
*
什么是视图转换？

此功能引入了两种类型的动画：

1. 单页转换（需要 JavaScript）。

2. 多页面过渡（仅限 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中文网其他相关文章！