2023 你应该知道的 css 技巧

不知道大家有没有关注 CSS 的迭代，总感觉平常关注 javascript 要远多于 CSS。最近看了一篇国外文章，发现很多用法没有了解过，今天就来跟大家分享这几个实用的 CSS 概念和技巧。

@layer 级联层

级联层可以让我们按照逻辑把样式拆分成不同的模块，也就是 css 的模块化。

@layer buttons {
  .btn.primary {
     …
  }
}

如果两个 @layer 中定义了命中同一节点的选择器，那么后加载的样式会覆盖前面加载的样式，并且这种覆盖是无视选择器优先级的。

在下面的例子中，p#id1 和 p.cls1 都命中了 p 标签，即使 p#id1 的优先级高于 p.cls1，最终生效的其实还是 p.cls1，所以字体颜色是红色。

// style.css

@layer first {
    p#id1 {
        color: green;
    }
}

@layer second {
    p.cls1 {
        color: red;
    }
}


// index.html
<div class="box">
  <p>Hello, world!</p>
</div>

逻辑属性是相对于物理属性说的，逻辑属性需要先根据某个逻辑转换成物理属性；而物理属性是浏览器可以直接拿来用的（比如 width）。

逻辑属性抽象出了两个用来描述文本流方向的概念：block 和 inline。如果 writing-mode 是水平方向，那么 inline 则表示水平方向，而 block 表示垂直方向；如果 writing-mode 是竖直方向，那么 inline 则是竖直方向，而 block 是水平方向；

看个例子：

.writing-horizonal {
    writing-mode: horizontal-tb;
}

.writing-vertical {
    writing-mode: vertical-lr;
}

.physical-width {
    width: 100px;
}

.logical-inline-size {
    inline-size: 100px;
}
// 不需要关注
p {
    display: inline-block;
    height: 300px;
    vertical-align: text-top;
    margin: 0;
    border: 1px solid lightblue;
}

前三个 p 的宽度都是 100px：

逻辑属性有很多，比如：inline-size / block-size / margin-block / margin-inline / border-block / border-inline，更多请参考 MDN。

我们常用的媒体查询是查询浏览器窗体(viewport)的样式信息，比如 @media(min-width: 100px)；而容器查询可以查询父组件的样式信息，前者面向全局，后者面向局部。

在下面例子中，当父组件的宽度超过 200px 时，.panel 的 background 会适配成 red。

 // style.css
 
 .parent {
    // 用来声明一个容器上下文
    // constainer: <容器名> / <类型>
    container: container1 / inline-size;
    padding: 10px;
    color: #fff;
}

.small-parent {
    width: 100px;
}

.big-parent {
    width: 300px;
}

.panel {
    background: green;
}

@container container1 (min-width: 200px) {
    .panel {
        background: red;
    }
}

// home.html
 <div class="parent small-parent">
    <div class="panel">小父组件</div>
</div>
<div class="parent big-parent">
    <div class="panel">大父组件</div>
</div>

滚动对齐（Scroll Snap）

MDN 上翻译的是「滚动快照」，不是很直观，我把它翻译成「滚动对齐」

滚动对齐，为滚动行为提供了更好的控制和预测，可以实现滚动的分段、平滑滚动和自动停止等功能，例如，可以让一次滚动只滚动一页，或者让元素对齐到滚动容器的某些特定位置上。

下面的例子实现了每次滚动一页：

// style.css
.parent,
.child {
    height: 150px;
    width: 200px;
}

.parent {
    // 表明该元素支持滚动对齐
    // 对齐方向是 x 轴
    scroll-snap-type: x mandatory;
    overflow-x: scroll;
    white-space: nowrap;
}

.child {
    // 指定该元素的哪个位置用来对齐
    scroll-snap-align: start;
    display: inline-block;
}

.gray {
    background-color: lightgray;
}

// html
<div class="parent">
    <div class="child">1</div>
    <div class="child gray">2</div>
    <div class="child">3</div>
    <div class="child gray">4</div>
</div>

再来看一下 scroll-snap-align 不同取值的效果：

aspect-ratio 可以用来指定长宽比。比较简单，直接上代码：

.box {
    // 前文已经提到过了
    inline-size: 100px;
    aspect-ratio: 1;
    border-radius: 50%;

    background: lightgray;
}

通常堆叠效果是通过绝对定位实现的，其实 grid 也可以很方便的实现。

#container {
    display: grid;
    place-content: center;
}

#container > div {
    grid-area: 1/1;
    width: 100px;
    height: 150px;
}

.box1 {
    background: lightblue;
}

.box2 {
    transform: rotateZ(10deg);
    background: lightcoral;
}

.box3 {
    transform: rotateZ(20deg);
    background: lightgrey;
}

www.zhangxinxu.com/wordpress/2…

web.dev/6-css-snipp…