4个很牛逼的即将推出的CSS特性

@container

@container是一个容器查询方法，正如它的名字一样，它是用来支持根据当前元素所在容器的大小来进行动态修改添加样式的，这跟@media基于视口大小是不一样的。

@container (min-width: 400px) {
    .content {
        display: flex;
    }
}

object-view-box

object-view-box属性就类似于SVG中的viewBox属性。它允许您使用一行 CSS来平移、缩放、裁剪 图像。

.card {
    object-view-box: inset(10% 50% 35% 5%);
}

animation-timeline

animation-timeline相比前两个就更好玩了！它允许我们基于容器滚动的进度来对动画进行处理，简而言之就是页面滚动了百分之多少，动画就执行百分之多少。而且动画也能根据页面倒着滚动而倒着播放。

.shoes {
    animation-name: Rotate;
    animation-duration: 1s;
    animation-timeline: scrollTimeline;
}

@scroll-timeline scrollTimeline {
    source: selector('#container');
    orientation: "vertical";
}

@keyframes Rotate {
    from {
        transform: translate(-200px, -200px) rotate(0deg);
    }

    to {
        transform: translate(100vw, 100vh) rotate(720deg);
    }
}

Scroll Snap

滚动捕捉是一个非常常见的功能，众所周知很难正确实现。传统上，它需要 JavaScript的帮助。实现逻辑并不太难，但您还需要考虑可访问性和性能。今天我们有幸在一行代码中完成了所有这些。

它具有很多灵活性和配置，您可以在MDN的Scroll Snap Basic Concepts页面上看到。

.list {
    ...
    scroll-snap-type: x mandatory;
}