此页面由 Cloud Translation API 翻译。

2024 年每位前端开发者都应知道的 5 个 CSS 代码段

强大且稳定的 CSS，可立即投入使用。

Adam Argyle

我认为，每位前端开发者都应该知道 :has() 不仅仅是“父级选择器”，subgrid 的使用方法和原因，如何使用内置 CSS 语法进行嵌套，如何让浏览器平衡标题文本换行，以及如何使用容器查询单元。

本文是对去年发布的“2023 年所有前端开发者不可不知的 6 个 CSS 代码段”一文的延续。

CSS:has(.potential-beyond-being-a-parent-selector)

:has()

浏览器支持

来源

:has() 将于 2023 年底在所有主流浏览器中推出！这个新选择器看起来很小，但您会惊讶于它可以解锁的所有用例：游戏、响应性、内容感知型布局、智能组件，以及Jhey 在这篇文章中详细介绍的更多用例。

显示了 4 个面板，每个面板都包含一张图片和一条说明。
每张图片都显示大脑激活越来越多的脑力。第一个面板显示 :has()。第二个面板显示 figure:has(caption) 作为父级选择器。第三个面板显示 .layout:has(> :nth-child(5)) 作为数量选择器。
第四个面板显示 html:has(#checked) .new-subject 作为条件主题更改选择器。

以下是使用 :has() 作为父级选择器的几个示例。之所以得此名称，是因为选择器的正文通常位于末尾，例如 ul li，其中 li 是正文，用于获取样式。使用 :has() 时，选择器开头的元素可以成为主题。在以下示例中，如果按钮内有类为 .icon 的元素，则按钮会出现间隔。如果卡片中包含图片，则会更改方向。

button:has(.icon) {
  gap: 1ch;
}

.card:has(img) {
  grid-auto-flow: row;
}

我们一直希望能实现一个选择器，能够根据其包含的项数量更改布局。现在，:has() 可以实现这一点，因为它可以在查询子项数量时将容器保留为正文。

main:has(> :nth-child(5)) {…}

另一个更高级别的示例：在网页上的特定复选框处于启用状态时，更改在整个文档中设置的样式：

html:has(#dark-mode:checked) {…}

这些是不会更改选择器主题的简单用例，如果您只看这样的示例，可能会认为 :has() 只能用作父级选择器。不过，请参考以下示例。这些选择器会根据共同的祖先检查某个内容，然后将选择器正文转移到页面更深层次的某个子元素。

如果其任何输入无效，此模板会显示表单错误元素：

form:has(:user-invalid) .error {
  display: block;
}

当侧边栏的类为 .--is-open 时，此脚本会滑出主内容区域：

html:has(#sidenav.--is-open) main {
  translate: -320px;
}

下面是一个有趣的演示，它使用 :has() 作为父级选择器，将 :has() 与数量查询和容器查询结合使用，以创建一个能够在纵向或横向模式下优雅地显示 1-12 个元素的网格布局：

在 Codepen 上试用

创建子网格

subgrid

浏览器支持

来源

多年来，前端 Web 社区一直在呼吁推出子网格，以帮助完善和完成广受欢迎且功能强大的 CSS 网格布局引擎。该功能现已在三大主要引擎中提供。

如需概览，请点击此处详细了解子网格。

body {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(30ch, 1fr));

  > article {
    display: grid;
    grid-row: span 4; 
    grid-template-rows: subgrid;
  }
}

使用 CSS 方式嵌套

nesting

浏览器支持

来源

2023 年，所有主流浏览器都支持内置 CSS 嵌套。我甚至更新了自己的网站，移除了用于编译嵌套的构建流程，现在我提供的样式表更小了！没错，采用嵌套的样式表会更小，并且所有浏览器工具都已准备好显示它。

如需了解所有详情，请点击此处查看 CSS 嵌套语法概览。以下代码示例展示了语法示例。

.you {
  .can-totally-ship-this {
    &.if-you-wanted {
      /* it's VERY MUCH like SCSS */
      
      &:is(:hover, :focus-visible) {
        /* put a bird on it */
      }
    }
  }
}

.for-theming {
  @media (prefers-color-scheme: dark) {
    /* you can nest media queries */
  }
}

/* or for theming with [data-theme="dark"] */
.button {
  background: black;
  color: white;

  /* nest and do more than just append, flip it and reverse it */
  [data-theme="dark"] & {
    background: white;
    color: black;
  }
}

让浏览器平衡标题

balance

浏览器支持

来源

pretty

浏览器支持

来源

如果没有 text-wrap: balance，开发者和文案撰写者只能依靠换行提示（例如 <wbr> 元素或 ）来确定换行位置。这通常是徒劳的，因为一旦内容以任何方式进行翻译、缩放或修改，就无法保证这些换行提示会位于适合内容新呈现方式的位置。

借助平衡文本换行，您可以将此工作交给浏览器。您可以在以下 Codepen 中查看对比结果。

使用容器查询单元

cqw

浏览器支持

来源

去年的文章建议，每个前端开发者都应知道如何编写容器查询。如果您尚未开始学习，不妨将 2024 年作为开始学习的一年，同时了解一下容器查询单元。如需概览，请参阅 Ahmad Shadeed 在 2021 年撰写的一篇关于容器查询单元的优秀文章。

新增了 6 个容器查询单元：

内联变体 cqi。
宽度变体 cqw。
一个块变体 cqb。
高度变体 cqh。
长度较短的变体 cqmin。
长度较大的变体 cqmax。

考虑一下容器的相对动画和内在动画场景。子元素会使用 100cqi（即容器内嵌尺寸的 100%）从容器中完全滑出。

@keyframes slide-out-of-container {
  to {
    translate: -100cqi;
  }
}

下面是一个采用容器响应式排版的卡片，以及一张可适应容器屏幕方向的图片，如果屏幕方向为横向，则图片会缩小为原来的一半大小。

.card {
  :is(h2,h3) {
    font-size: clamp(1.5rem, 5cqi, 4rem);
  }

  img {
    inline-size: 100cqi;

    @container (orientation: landscape) {
      inline-size: 50cqi;
    }
  }
}