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

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

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

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

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

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

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

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

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

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

创建子网格

多年来，前端 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;
  }
}

让浏览器平衡标题

balance

pretty

如果没有 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 年可供您使用的所有单元。