1. 容器查询
容器查询允许您根据组件所在容器的大小而不是图层大小添加动态样式。 在我看来，容器查询是我们未来生活的基于组件的生态系统的一个关键功能。 它允许我们在组件级别考虑响应性，并允许组件封装自己的响应逻辑。
.card {
/* card styles */
}
.main-container {
/* identify a container */
container-type: inline-size;
}
@container (min-width: 380px) {
/* card styles when in an identified container larger than 380px */
}
在前面的示例中，我们将相同的卡片组件渲染了两次，但由于容器查询样式和容器的大小，我们得到了两个不同的结果，两者都针对各自容器的大小进行了优化。
演示地址：
2. 滚动捕捉
滚动对齐是一个非常常见的功能，但众所周知，它很难正确使用。 传统上，它需要 JavaScript 的帮助。 实现逻辑并不太难，但还需要考虑可访问性和性能。 今天css 计数器，我们有幸用一行代码完成所有这些工作。
正如您在 MDN 的 Scroll Snap Basic Concepts 页面上听到的那样，它具有很大的灵活性和配置。
.list {
display: flex;
overflow-x: auto;
scroll-snap-type: x mandatory;
}
演示地址：
3. 对象视口
object-view-box 属性为图像带来了 SVG viewBox 属性的功能。 它允许您使用一行 CSS 平移、缩放和裁剪图像。
.crop {
object-view-box: inset(10% 50% 35% 5%);
}
使用这个功能给了我构建一些很酷的东西的视角。
演示地址：
你可能会发现这很容易做。 只需添加一个转换并使用 JS 切换一个类即可。 我想是这样。 但不，过渡不适用于这个尖端功能。
相反，我使用了另一个很棒的 CSS 功能：CSS 计数器，它允许我在 1 到 100 之间设置 CSS 属性的动画。然后只需设置一些物理效果。
所以最后，我也可以纯粹在 CSS 中完成此操作，这很酷，但我喜欢转换的简单性，请务必查看演示代码。
4. 滚动时间轴
Scroll Timeline是一个CSS at-rule，定义了AnimationTimelinecss 计数器，它允许我们根据滚动进度制作动画。 有了这个，我们可以做一些非常酷的动画，最容易想到的是基于滚动的视差效果。
.shoes {
animation-name: rotateAcross;
animation-duration: 1s; // irrelevant, but still needed/?
animation-timeline: scrollTimeline;
}
@scroll-timeline scrollTimeline {} // just need to define this
@keyframes rotateAcross {
... keyframe stuff
}
总结
看完这个函数，不知道你有什么感想。 希望浏览器尽快支持，但这个功能还处于提案阶段。 将来，我认为它们会被使用。 如果您需要使用，请务必了解浏览器支持情况。
实时预览
目前前端岗位的职业发展现状如何？
如何在笔试中脱颖而出？
北台湾大神教你独家秘籍！
报名表格
扫描下方二维码
提前预约课程
- 结尾 -
近期新课程：
Vue 基础知识 | 小程序开发 | JQuery 入门 | PC端页面布局 | 打字稿 | JS 基本运算符 |
发表评论