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

本指南旨在向您介绍 CSS 中最近推出的一系列创新且强大的功能。虽然本文概述了它们的语法和实际用例，但每个功能还有更多值得深入探索的地方。以本文为起点，深入了解这些尖端的进步。

**1. 容器查询（大小）**

什么是基于大小的容器查询？

基于大小的容器查询允许您根据父容器的尺寸将样式应用于子元素，而不是像传统媒体查询那样依赖于整个视口的大小。


  


.container {
  container: layout / inline-size;
}

@container layout (min-inline-size: 300px) {
  .child {
    display: flex;
    gap: 1rem;
  }
}

**这为什么重要？**

您是否曾希望根据组件容器的大小而不是页面的整体尺寸来动态设置组件样式？容器查询使这成为可能，为基于组件的设计系统或模块化 Web 组件提供了理想的解决方案，其中父容器的大小决定了布局。

浏览器支持：

• 全面支持：现代浏览器。

• 增强功能：是的，如果非关键样式依赖于它。

**2. 容器查询（样式）**

什么是基于样式的容器查询？

当容器内的特定自定义属性（--custom-property）具有特定值时，此功能可启用子元素的样式。

.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。

什么是视图转换？

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

单页转换（需要 JavaScript）。

多页转换（仅限 CSS）。

if (!document.startViewTransition) {
  updateDOM();
} else {
  document.startViewTransition(() => updateDOM());
}

过渡通过在状态变化期间为元素添加动画来增强用户体验，使交互更加顺畅。它们使用“补间”，即动画在开始和结束状态之间插入，而无需手动定义每个步骤。

浏览器支持：

• 支持：Chrome 及其衍生产品。

• 不支持：Safari、Firefox。

• 增强功能：是的，带有后备动画。

**6. 嵌套**

什么是嵌套？

CSS 嵌套允许您在父规则内编写子选择器，从而使代码更清晰、更易于维护。

.card {
  padding: 1rem;

  > h2:first-child {
    margin-block-start: 0;
  }

  footer {
    border-block-start: 1px solid black;
  }
}

**这为什么重要？**

嵌套可减少 CSS 中的冗余，将相关样式分组在一起。但是，过度使用嵌套可能会导致选择器过于具体，从而降低可重用性。

浏览器支持：

• 全面支持：现代浏览器。

**7. 滚动驱动动画**

什么是滚动驱动动画？

这些动画与滚动相关，可以使用 CSS 实现，而无需依赖 JavaScript。

.progress {
  animation-timeline: scroll();
}

**这为什么重要？**

从进度指示器到视差效果，滚动驱动动画提高了交互性并减少了对性能关键型任务的 JavaScript 的依赖。

浏览器支持：

• 支持：Chrome。

• 即将推出：Firefox。

**8. 子网格**

什么是子网格？

子网格值允许子网格项与其父网格的行或列对齐，而无需重复网格定义。

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

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

**这为什么重要？**

Subgrid 确保嵌套网格结构之间的一致对齐，使复杂的布局更易于维护。

浏览器支持：

• 全面支持：所有现代浏览器。

**最后的想法**

CSS 继续以惊人的速度发展。借助容器查询、视图转换和子网格等功能，该语言变得更加强大和直观，适合现代 Web 开发。请关注未来的发展，包括相对颜色语法、作用域 CSS 和新的 HTML 元素，如，它们将带来更大的设计可能性。

CLIS.CC

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