我最期待的 3 個即將推出的 CSS 特性！

大家好，我是零一，今天給大家總結(jié)分享一下 3 個很 ???? 的即將推出的 CSS 屬性，等你看完，每一個都要喊 絕了！

聲明一下：這些特性現(xiàn)在基本都不好使，就算有的高級瀏覽器支持了，也只是個例。可以期待一下以后 ~

一、@container
@container 是一個容器查詢方法，正如它的名字一樣，它是用來支持根據(jù)當(dāng)前元素所在容器的大小來進(jìn)行動態(tài)修改添加樣式的，這跟 @media 基于視口大小是不一樣的。

來舉個??

先創(chuàng)建一個側(cè)邊欄和一個主內(nèi)容

<body>
  <aside class="sidebar">
    <div class="card">
      <h4>側(cè)邊欄</h4>
      <p>
        To the world you may be one person, but to one person you may be the world.
      </p>
    </div>
  </aside>
  <main class="content">
    <div class="card">
      <h4>主內(nèi)容</h4>
      <p>
        To the world you may be one person, but to one person you may be the world.
      </p>
    </div>
  </main>
</body>
讓這兩個元素橫向布局，且側(cè)邊欄寬度占 30%，主內(nèi)容寬度占 70%

body {
  display: flex;
  color: white;
}

h4 {
  color: black;
}

.sidebar {
  width: 30%;
}

.content {
  width: 70%;
  background: #f0f5f9;  /* 給個底色，與側(cè)邊欄區(qū)分 */
}

.card {
  background: lightpink;
  box-shadow: 3px 10px 20px rgba(0, 0, 0, 0.2);
  border-radius: 8px;
}
目前為止是這樣的效果：


現(xiàn)在我們發(fā)現(xiàn)主內(nèi)容這塊兒空間很富余，便想改變一下標(biāo)題和內(nèi)容文字的布局，此時就可以用上 @container 了，直接讓主內(nèi)容在當(dāng)前容器寬度大于 400px 時變成橫向布局

@container (min-width: 400px) {
  .content .card {
    display: flex;
  }
}
此時效果如下：

是不是很酷

基于這點，還想到了一個之前我做過的需求中很頭疼的需求，就是字體大小隨著容器寬高的改變而動態(tài)改變，如果支持了這個特性，那這個需求也就很簡單了

二、object-view-box
object-view-box 屬性就類似于 SVG 中的 viewBox 屬性。它允許您使用一行 CSS 來平移、縮放、裁剪 圖像。

我們就對這張圖來動動刀子


加一行代碼

.crop {
  object-view-box: inset(10% 50% 35% 5%);
}
實現(xiàn)的效果就是這樣：







跟原圖對比一下就是這樣：


除了簡單的裁剪，我們還能基于它實現(xiàn)一些好玩的效果，例如：



三、animation-timeline
animation-timeline 相比前兩個就更好玩了！它允許我們基于容器滾動的進(jìn)度來對動畫進(jìn)行處理，簡而言之就是頁面滾動了百分之多少，動畫就執(zhí)行百分之多少。而且動畫也能根據(jù)頁面倒著滾動而倒著播放

.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);
  }
}
使用起來很簡單，就是在本身的基礎(chǔ)動畫上，新增一個 animation-timeline 屬性即可，我們也可以對這個 timeline 定義是基于哪個容器，滾動方向是水平還是豎直

大致效果就是：

最后
這三個 CSS 新特性，你們最喜歡哪個？有沒有想到一些比較實用的場景，歡迎在評論區(qū)分享~

我是零一，分享技術(shù)，不止前端！下期見~





作者：零一

歡迎關(guān)注微信公眾號 ：前端印象