此页面由 Cloud Translation API 翻译。

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

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

Adam Argyle

我认为，每个前端开发者都应该知道如何使用容器查询，从而创建滚动贴靠体验 position: absolute， grid、快速敲定一圈，使用“cascade” 层，并通过基于逻辑的小而精属性。快速更新我们将对每项预期目标进行简要介绍

1. 容器查询

在过去 10 年里，用户呼声最高的 CSS 功能现在是在各种浏览器中保持稳定，并可供您使用。

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

.card {
  padding: 1rem;
}

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

@container

浏览器支持

<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">

来源

container

浏览器支持

<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">

来源

2. 滚动贴靠

精心编排的滚动体验可让您的体验与众不同，并滚动 Snap 完美契合系统滚动用户体验，同时提供有意义的停止体验积分。

.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

浏览器支持

<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">

来源

scroll-snap-align

浏览器支持

<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">

来源

scroll-snap-stop

浏览器支持

<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">

来源

overscroll-behavior

浏览器支持

<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">

来源

3. 网格堆

避免使用单单元格 CSS 网格进行绝对位置定位。一旦堆积在顶部，使用两端对齐，使用两端对齐并对齐属性以定位它们。

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

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

grid

浏览器支持

<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">

来源

4. 快速圈

在 CSS 中制作圆形的方法有很多，但绝对是极简。

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

aspect-ratio

浏览器支持

<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">

来源

5. 使用 @layer 控制变体

Cascade 层可以帮助插入款式/规格放入级联中的相应位置，原始变体集。

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

然后，在某个完全不同的文件中，在其他某个随机时间加载，将向按钮层添加新的变体，就好像所有信息。

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

@layer

浏览器支持

<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">

来源

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

浏览器支持

<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">

来源

margin-block

浏览器支持

<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">

来源

inset-inline

浏览器支持

<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">

来源