工具带,值得您立即使用,功能强大且稳定。
我认为,每个前端开发者都应该知道如何使用容器
查询,
从而创建滚动贴靠体验
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">