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

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

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

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

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

:has()

浏览器支持

  • Chrome:105。 <ph type="x-smartling-placeholder">
  • 边缘:105。 <ph type="x-smartling-placeholder">
  • Firefox:121。 <ph type="x-smartling-placeholder">
  • Safari:15.4. <ph type="x-smartling-placeholder">

来源

: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 个元素(纵向或横向):

<ph type="x-smartling-placeholder">
</ph>
试用 Codepen

创建子网格

subgrid

浏览器支持

  • Chrome:117。 <ph type="x-smartling-placeholder">
  • Edge:117。 <ph type="x-smartling-placeholder">
  • Firefox:71。 <ph type="x-smartling-placeholder">
  • Safari:16. <ph type="x-smartling-placeholder">

来源

多年来,前端网络社区一直请求 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

浏览器支持

  • Chrome:120。 <ph type="x-smartling-placeholder">
  • 边缘:120。 <ph type="x-smartling-placeholder">
  • Firefox:117。 <ph type="x-smartling-placeholder">
  • Safari:17.2. <ph type="x-smartling-placeholder">

来源

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

浏览器支持

  • Chrome:114。 <ph type="x-smartling-placeholder">
  • 边缘:114。 <ph type="x-smartling-placeholder">
  • Firefox:121。 <ph type="x-smartling-placeholder">
  • Safari:17.5。 <ph type="x-smartling-placeholder">

来源

pretty

浏览器支持

  • Chrome:117。 <ph type="x-smartling-placeholder">
  • Edge:117。 <ph type="x-smartling-placeholder">
  • Firefox:不支持。 <ph type="x-smartling-placeholder">
  • Safari:不支持。 <ph type="x-smartling-placeholder">

来源

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

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

使用容器查询单元

cqw

浏览器支持

  • Chrome:105。 <ph type="x-smartling-placeholder">
  • 边缘:105。 <ph type="x-smartling-placeholder">
  • Firefox:110。 <ph type="x-smartling-placeholder">
  • Safari:16. <ph type="x-smartling-placeholder">

来源

去年的博文建议每个前端开发者都应该知道如何编写 容器查询。如果您还没有学到经验,不妨在 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 年可以使用的所有单元