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

本文将带您探索 CSS 最新引入的一系列强大功能，它们将显著提升您的 Web 开发效率。我们将简要介绍这些功能的语法和应用场景，并指引您深入研究相关细节。

1. 容器查询（基于尺寸）

容器查询（基于尺寸）允许您根据父容器的尺寸，而不是视口尺寸，来为子元素应用样式。

<div class="container">
  <div class="child"></div>
</div>

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

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

重要性： 此功能让您能够根据组件本身的大小调整样式，非常适合组件化设计系统和模块化 Web 组件。

浏览器支持： 现代浏览器全面支持。增强功能可用。

2. 容器查询（基于样式）

基于样式的容器查询允许根据容器内自定义属性的值来应用样式。

.container {
  --variant: 1;

  &.variant2 {
    --variant: 2;
  }
}

@container style(--variant: 1) {
  .button { /* 应用于 --variant 为 1 的样式 */ }
}

@container style(--variant: 2) {
  .button { /* 应用于 --variant 为 2 的样式 */ }
}

重要性： 实现了 CSS Mixin 的概念，增强了 CSS 的灵活性和可维护性。

浏览器支持： Chrome 及其衍生产品支持。Safari 即将推出支持。Firefox 不支持。增强功能有限，目前无 polyfill。

3. 容器单位

容器单位 (cqw、cqh、cqmin、cqmax) 是响应式单位，根据容器大小而非视口大小计算尺寸。

.card {
  padding: 2cqw;
  font-size: 1cqmin;
}

重要性： 方便内部元素根据父容器比例缩放，例如调整卡片或组件内的文字和间距。

浏览器支持： 现代浏览器全面支持，并提供后备功能。polyfill 可用。

4. :has() 伪选择器

:has() 选择器允许您根据父元素中特定子元素的存在来设置父元素的样式。

figure:has(figcaption) {
  border: 1px solid black;
  padding: 0.5rem;
}

重要性： 充当 CSS 中的“父选择器”，根据子元素状态调整父元素样式，例如根据是否存在错误信息来突出显示表单字段。

浏览器支持： 所有主流浏览器支持，但可能需要 JavaScript polyfill。

5. 视图转换

视图转换提供两种类型的动画：单页转换（需要 JavaScript）和多页转换（纯 CSS）。

if (!document.startviewtransition) {
  updatedom();
} else {
  document.startviewtransition(() => updatedom());
}

重要性： 通过动画增强用户体验，使页面切换更流畅。

浏览器支持： Chrome 及其衍生产品支持。Safari 和 Firefox 不支持，但提供后备动画。

6. CSS 嵌套

CSS 嵌套允许在父规则中直接编写子选择器，提高代码可读性和维护性。

.card {
  padding: 1rem;

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

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

重要性： 减少冗余代码，将相关样式分组。但需避免过度使用导致选择器过于具体。

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

7. 基于滚动的动画

基于滚动的动画通过 CSS 实现，无需 JavaScript。

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

重要性： 实现进度指示器、视差效果等交互效果，同时提高性能。

浏览器支持： Chrome 支持，Firefox 即将支持。

8. 子网格

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

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

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

重要性： 简化嵌套网格结构的对齐，提高维护性。

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

总结

CSS 持续快速发展，容器查询、视图转换和子网格等新特性极大增强了其功能和易用性。 未来还将有更多令人期待的新特性出现，例如相对颜色语法、作用域 CSS 等，为 Web 开发带来更多可能性。