我最期待的 3 個(gè)即將推出的 CSS 特性！

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

聲明一下：這些特性現(xiàn)在基本都不好使，就算有的高級(jí)瀏覽器支持了，也只是個(gè)例?？梢云诖幌乱院?~

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

來舉個(gè)??

先創(chuàng)建一個(gè)側(cè)邊欄和一個(gè)主內(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>
讓這兩個(gè)元素橫向布局，且側(cè)邊欄寬度占 30%，主內(nèi)容寬度占 70%

body {
  display: flex;
  color: white;
}

h4 {
  color: black;
}

.sidebar {
  width: 30%;
}

.content {
  width: 70%;
  background: #f0f5f9;  /* 給個(gè)底色，與側(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)容文字的布局，此時(shí)就可以用上 @container 了，直接讓主內(nèi)容在當(dāng)前容器寬度大于 400px 時(shí)變成橫向布局

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

是不是很酷

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

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

我們就對(duì)這張圖來動(dòng)動(dòng)刀子


加一行代碼

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







跟原圖對(duì)比一下就是這樣：


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



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

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

大致效果就是：

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

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





作者：零一

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