CSS

一、@container

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

  1. <body>
  2.   <aside class="sidebar">
  3.     <div class="card">
  4.       <h4>侧边栏</h4>
  5.       <p>
  6.         To the world you may be one person, but to one person you may be the world.
  7.       </p>
  8.     </div>
  9.   </aside>
  10.   <main class="content">
  11.     <div class="card">
  12.       <h4>主内容</h4>
  13.       <p>
  14.         To the world you may be one person, but to one person you may be the world.
  15.       </p>
  16.     </div>
  17.   </main>
  18. </body>

让这两个元素横向布局，且侧边栏宽度占 30%，主内容宽度占 70%

  1. body {
  2.   display: flex;
  3.   color: white;
  4. }
  6. h4 {
  7.   color: black;
  8. }
  10. .sidebar {
  11.   width: 30%;
  12. }
  14. .content {
  15.   width: 70%;
  16.   background: #f0f5f9;  /* 给个底色，与侧边栏区分 */
  17. }
  19. .card {
  20.   background: lightpink;
  21.   box-shadow: 3px 10px 20px rgba(0, 0, 0, 0.2);
  22.   border-radius: 8px;
  23. }

目前为止是这样的效果：
3 个即将推出的 CSS 特性 - 图1
现在可以发现主内容这块儿空间很富余，便想改变一下标题和内容文字的布局，此时就可以用上 @container 了，直接让主内容在当前容器宽度大于 400px 时变成横向布局

  1. @container (min-width: 400px) {
  2.   .content .card {
  3.     display: flex;
  4.   }
  5. }

此时效果如下：
3 个即将推出的 CSS 特性 - 图2
是不是很酷 😎
基于这点，还想到了一个之前做过的需求中很头疼的需求，就是字体大小随着容器宽高的改变而动态改变，如果支持了这个特性，那这个需求也就很简单了

二、object-view-box

object-view-box 属性就类似于 SVG 中的 viewBox 属性。它允许您使用一行 CSS 来平移、缩放、裁剪 图像。
对这张图来动动刀子
3 个即将推出的 CSS 特性 - 图3
加一行代码

  1. .crop {
  2.   object-view-box: inset(10% 50% 35% 5%);
  3. }

实现的效果就是这样：
3 个即将推出的 CSS 特性 - 图4
跟原图对比一下就是这样：
3 个即将推出的 CSS 特性 - 图5
除了简单的裁剪，还能基于它实现一些好玩的效果，例如：
3 个即将推出的 CSS 特性 - 图6

三、animation-timeline

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

  1. .shoes {
  2.   animation-name: Rotate;
  3.   animation-duration: 1s; 
  4.   animation-timeline: scrollTimeline;
  5. }
  7. @scroll-timeline scrollTimeline {
  8.   source: selector('#container');
  9.   orientation: "vertical";
  10. }
  12. @keyframes Rotate {
  13.   from {
  14.     transform: translate(-200px, -200px) rotate(0deg);
  15.   }
  17.   to {
  18.     transform: translate(100vw, 100vh) rotate(720deg);
  19.   }
  20. }

使用起来很简单，就是在本身的基础动画上，新增一个 animation-timeline 属性即可，也可以对这个 timeline 定义是基于哪个容器，滚动方向是水平还是竖直
大致效果就是：
3 个即将推出的 CSS 特性 - 图7