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

值得立即使用、功能强大且稳定的 CSS。

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

这篇博文是对去年 2023 年每位前端开发者都应知道的 6 个 CSS 代码段的延续。

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

:has() 已于 2023 年底在所有主流浏览器上推出！这个新的选择器看起来很小，而且很普通，但您会惊讶于它可以解锁的所有用例：游戏、响应式、内容感知布局、智能组件，以及 Jhey 的这篇文章中深入探讨的更多内容。

以下是使用 :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 个元素的网格布局：

创建子网格

多年来，前端 Web 社区一直寻求 subgrid，它来帮助完善和完成极其受欢迎且功能强大的 CSS 网格布局引擎。现在，它在所有三大主要引擎中都可用。

如果您想大致了解一下，请点击此处详细了解 subgrid。

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

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

以 CSS 方式嵌套

内置 CSS 嵌套于 2023 年在所有主流浏览器中推出。 我甚至更新了我的网站，移除了编译嵌套的构建流程。现在，我发布了一个较小的样式表！是的，包含嵌套的样式表较小， 所有浏览器开发者工具都已准备好呈现这种样式。

您可以点击此处查看 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;
  }
}

让浏览器平衡标题

如果没有 text-wrap: balance，开发者和文案撰稿人就需要换行提示，例如 <wbr> 元素或 ­。这主要是一场失败的战斗，因为一旦内容以任何方式进行翻译、缩放或修改，就无法保证这些封装提示将位于内容的新呈现方式中。

有了平衡的文本换行，您就可以让浏览器完成这项工作。您可以在以下 Codepen 中查看对比结果。

使用容器查询单元

去年的博文建议，每个前端开发者都应该知道如何编写容器查询。如果您还没有学习相关知识，不妨在 2024 年一年中尝试一下，同时再看看容器查询单元。2021 年，Ahmad Shadeed 撰写了一篇关于容器查询单元的精彩文章。

我们新增了六个订阅单元：

1. 内嵌变体 cqi。
2. 宽度变体 cqw。
3. 块变体 cqb。
4. 高度变体 cqh。
5. cqmin 的长度较小的变体的变体。
6. 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;
    }
  }
}

如果您不熟悉这些单元，建议您查看 2024 年可供您使用的所有单元。