2023 年每位前端开发者都应该知道的 6 个 CSS 代码段

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

Adam Argyle

我认为，每位前端开发者都应该知道如何使用容器查询、创建滚动贴靠体验、通过 grid 避免 position: absolute、快速打造圆形、使用级联层，以及通过逻辑属性以更少的代码实现更多功能。下面简要介绍一下这些预期。

1. 容器查询

连续 10 年来，现在已稳定成为浏览器中最受期待的 CSS 功能，您可以在 2023 年将其用于宽度查询。

.panel {
  container: layers-panel / inline-size;
}

.card {
  padding: 1rem;
}

@container layers-panel (min-width: 20rem) {
  .card {
    padding: 2rem;
  }
}

@container

Browser Support

• 105
• 105
• 110
• 16

Source

container

Browser Support

• 105
• 105
• 110
• 16

Source

2. 滚动贴靠

精心编排的滚动体验可让您的应用体验与众不同，而滚动吸附是匹配系统滚动用户体验的完美方式，同时还能提供有意义的停止点。

.snaps {
  overflow-x: scroll;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
}

.snap-target {
  scroll-snap-align: center;
}

.snap-force-stop {
  scroll-snap-stop: always;
}

如需详细了解此 CSS 功能的潜力，请参阅这个庞大而令人鼓舞的 Codepen 合集，其中包含大约 25 个演示。

scroll-snap-type

Browser Support

• 69
• 79
• 99
• 11

Source

scroll-snap-align

Browser Support

• 69
• 79
• 68
• 11

Source

scroll-snap-stop

Browser Support

• 75
• 79
• 103
• 15

Source

overscroll-behavior

Browser Support

• 144
• 18
• 150
• 16

Source

3. 网格堆叠

避免在单单元格 CSS 网格中使用 position: absolute。将它们堆叠在一起后，使用 justify 和 align 属性来定位它们。

.pile {
  display: grid;
  place-content: center;
}

.pile > * {
  grid-area: 1/1;
}

grid

Browser Support

• 57
• 16
• 52
• 10.1

Source

4. 快速圆圈

在 CSS 中创建圆形的方法有很多，但这种方法绝对是最简洁的。

.circle {
  inline-size: 25ch;
  aspect-ratio: 1;
  border-radius: 50%;
}

aspect-ratio

Browser Support

• 88
• 88
• 89
• 15

Source

5. 使用 @layer 控制变体

级联层可帮助将稍后发现或创建的变体插入到级联中包含原始变体组的正确位置。

/* file buttons.css */
@layer components.buttons {
  .btn.primary {
    …
  }
}

然后，在某个完全不同的文件中，在某个其他随机时间加载，将新变体附加到按钮层，就好像它一直与其余变体一起存在一样。

/* file video-player.css */
@layer components.buttons {
  .btn.player-icon {
    …
  }
}

@layer

Browser Support

• 99
• 99
• 97
• 15.4

Source

6. 使用逻辑属性，减少记忆量，覆盖更多内容

记住这个新盒子模型，您就再也不必担心国际书写模式和文档方向的左右内边距或外边距发生变化了。 将样式从物理属性调整为逻辑属性，例如 padding-inline、margin-inline、inset-inline，现在浏览器将完成调整工作。

button {
  padding-inline: 2ch;
  padding-block: 1ch;
}

article > p {
  text-align: start;
  margin-block: 2ch;
}

.something::before {
  inset-inline: auto 0;
}

padding-inline

Browser Support

• 87
• 87
• 66
• 14.1

Source

margin-block

Browser Support

• 87
• 87
• 66
• 14.1

Source

inset-inline

Browser Support

• 87
• 87
• 63
• 14.1

Source