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

工具带，值得您立即使用，功能强大且稳定。

Adam Argyle

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

本帖子是 去年每个前端开发者在 2023 年都应该知道的 6 个 CSS 代码段。

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

:has()

浏览器支持

• 105
• 105
• 121
• 15.4

来源

: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 个元素（纵向或横向）：

试用 Codepen

创建子网格

subgrid

浏览器支持

• 117
• 117
• 71
• 16

来源

多年来，前端网络社区一直请求 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 方式嵌套

nesting

浏览器支持

• 120
• 120
• 117
• 17.2

来源

内置 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;
  }
}

让浏览器平衡标题

balance

浏览器支持

• 114
• 114
• 121
• 17.5

来源

pretty

浏览器支持

• 117
• 117
• x
• x

来源

如果没有 text-wrap: balance，开发者和文案人员将只能看到换行符提示 例如 <wbr> 元素或 ­。这通常都是一场失败的战斗，因为只要 以任何方式对内容进行翻译、缩放或修改， 在以新的方式呈现内容时，封装提示就在恰当的位置。

通过设置均衡的文本换行，您可以将此工作交由浏览器处理。 您可以在以下 Codepen 中查看比较结果。

使用容器查询单元

cqw

浏览器支持

• 105
• 105
• 110
• 16

来源

去年的博文建议每个前端开发者都应该知道如何编写 容器查询。如果您还没有学到经验，不妨在 2024 年大胆创新 还可以查看容器查询单元简而言之 Ahmad Shadeed 在 2021 年写了一篇有关容器查询单元的精彩文章。

共有六个新的c电视quy 设备：

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 年可以使用的所有单元。