❝
翻译原文：web.dev/6-css-snipp…
❞
- container query
- Scroll snap
- Grid pile
- Quick circle
- Control variants with @layer
- Memorize less and reach more with logical properties
初次看，我知道的竟然寥寥无几，最后挨个学习~
翻译原文，这里只做简单摘要哦。
1. A container query
@container 可以实时匹配容器的尺寸，开发者们可以根据不同的容器尺寸范围，对内部的样式实现对应的布局和样式
.panel {
container: layers-panel / inline-size;
}
.card {
padding: 1rem;
}
@container layers-panel (min-width: 20rem) {
.card {
padding: 2rem;
}
}
2. Scroll snap
精准操控的滚动体验，scroll snap是匹配系统滚动UX的完美方式。
.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;
}
3. Grid pile
CSS Grid 网格布局www.ruanyifeng.com/blog/2019/0…
它将网页划分成一个个网格，可以任意组合不同的网格，做出各种各样的布局。以前，只能通过复杂的 CSS 框架达到的效果，现在浏览器内置了。
.pile {
display: grid;
place-content: center;
}
.pile > * {
grid-area: 1/1;
}
4. Quick circle
在CSS中有很多方法来做圆，但这绝对是最简单的。
.circle {
inline-size: 25px;
aspect-ratio: 1;
border-radius: 50%;
}
5. Control variants with @layer
更方便的css级联层重写
/* file buttons.css */
@layer components.buttons {
.btn.primary {
…
}
}
向 components 层内部的 buttons 层附加规则，只需用 . 连接这两层。
/* file video-player.css */
@layer components.buttons {
.btn.player-icon {
…
}
}
6. Memorize less and reach more with logical properties
根据元素的书写模式、文本方向自动设置属性 padding-inline、margin-inline、insert-inline。
button {
padding-inline: 2ch;
padding-block: 1ch;
}
article > p {
text-align: start;
margin-block: 2ch;
}
.something::before {
inset-inline: auto 0;
}
