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

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

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

1. 容器查询

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

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

.card {
  padding: 1rem;
}

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

浏览器支持

  • 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">

来源

container

浏览器支持

  • 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">

来源

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

浏览器支持

  • Chrome:69。 <ph type="x-smartling-placeholder">
  • Edge:79。 <ph type="x-smartling-placeholder">
  • Firefox:99。 <ph type="x-smartling-placeholder">
  • Safari:11. <ph type="x-smartling-placeholder">

来源

scroll-snap-align

浏览器支持

  • Chrome:69。 <ph type="x-smartling-placeholder">
  • Edge:79。 <ph type="x-smartling-placeholder">
  • Firefox:68。 <ph type="x-smartling-placeholder">
  • Safari:11. <ph type="x-smartling-placeholder">

来源

scroll-snap-stop

浏览器支持

  • Chrome:75。 <ph type="x-smartling-placeholder">
  • Edge:79。 <ph type="x-smartling-placeholder">
  • Firefox:103。 <ph type="x-smartling-placeholder">
  • Safari:15。 <ph type="x-smartling-placeholder">

来源

overscroll-behavior

浏览器支持

  • Chrome:63。 <ph type="x-smartling-placeholder">
  • Edge:18。 <ph type="x-smartling-placeholder">
  • Firefox:59。 <ph type="x-smartling-placeholder">
  • Safari:16. <ph type="x-smartling-placeholder">

来源

3. 网格堆

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

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

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

浏览器支持

  • Chrome:57。 <ph type="x-smartling-placeholder">
  • Edge:16。 <ph type="x-smartling-placeholder">
  • Firefox:52。 <ph type="x-smartling-placeholder">
  • Safari:10.1. <ph type="x-smartling-placeholder">

来源

4. 快速圈

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

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

浏览器支持

  • Chrome:88。 <ph type="x-smartling-placeholder">
  • 边缘:88。 <ph type="x-smartling-placeholder">
  • Firefox:89。 <ph type="x-smartling-placeholder">
  • Safari:15。 <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

浏览器支持

  • Chrome:99。 <ph type="x-smartling-placeholder">
  • Edge:99。 <ph type="x-smartling-placeholder">
  • Firefox:97。 <ph type="x-smartling-placeholder">
  • Safari:15.4. <ph type="x-smartling-placeholder">

来源

6. 利用逻辑属性,减少记忆,扩大覆盖面

记住这个一种新的盒子模型 并且无需担心 更改国际文本书写的左右内边距或外边距 模式文档 路线。 将你的样式从物理属性调整为逻辑属性,例如 padding-inlinemargin-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

浏览器支持

  • Chrome:87。 <ph type="x-smartling-placeholder">
  • Edge:87。 <ph type="x-smartling-placeholder">
  • Firefox:66。 <ph type="x-smartling-placeholder">
  • Safari:14.1. <ph type="x-smartling-placeholder">

来源

margin-block

浏览器支持

  • Chrome:87。 <ph type="x-smartling-placeholder">
  • Edge:87。 <ph type="x-smartling-placeholder">
  • Firefox:66。 <ph type="x-smartling-placeholder">
  • Safari:14.1. <ph type="x-smartling-placeholder">

来源

inset-inline

浏览器支持

  • Chrome:87。 <ph type="x-smartling-placeholder">
  • Edge:87。 <ph type="x-smartling-placeholder">
  • Firefox:63。 <ph type="x-smartling-placeholder">
  • Safari:14.1. <ph type="x-smartling-placeholder">

来源