英文 | https://engineering.udacity.com/the-4-upcoming-css-features-im-most-excited-for-24b66293edfa

翻譯 | 楊小愛

.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 */}

在上面的示例中，我們將相同的卡片組件渲染了兩次，但是由于 Container Query 樣式和容器的大小，我們得到了兩個(gè)不同的結(jié)果，都針對(duì)各自容器的大小進(jìn)行了優(yōu)化。

演示地址：https://codesandbox.io/s/container-queries-demo-6ftn6u?file=/styles.css

02、Scroll Snap

滾動(dòng)捕捉是一個(gè)非常常見的功能，眾所周知很難正確實(shí)現(xiàn)。傳統(tǒng)上，它需要 JavaScript的幫助。實(shí)現(xiàn)邏輯并不太難，但您還需要考慮可訪問性和性能。今天我們有幸在一行代碼中完成了所有這些。

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

.list {  display: flex;  overflow-x: auto;  scroll-snap-type: x mandatory;}

演示地址：https://codesandbox.io/s/scroll-snap-demo-ih1su3

03、對(duì)象視圖框

object-view-box 屬性為圖像帶來了 SVG 的 viewBox 屬性的功能。它允許您使用單行 CSS 平移、縮放和裁剪圖像。

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

使用這個(gè)功能讓我有了一個(gè)想法來構(gòu)建一些很酷的東西。

演示地址：https://codesandbox.io/s/object-viewbox-demo-kcnd7x

您可能會(huì)認(rèn)為這很容易制作。只需添加一個(gè)轉(zhuǎn)換并使用 JS 切換一個(gè)類。我也那么認(rèn)為。但是不，過渡不適用于此尖端功能。

相反，我使用了另一個(gè)很棒的 CSS 功能：CSS 計(jì)數(shù)器，它允許我在 1 到 100 之間設(shè)置 CSS 屬性的動(dòng)畫。然后只需設(shè)置一些數(shù)學(xué)。

所以最后，我能夠純粹用 CSS 完成這個(gè)功能真是太酷了，但我會(huì)喜歡過渡的簡單性，確保查看代碼的演示。

04、滾動(dòng)時(shí)間軸

Scroll Timeline 是一個(gè)定義 AnimationTimeline 的 CSS at-rule，它允許我們根據(jù)滾動(dòng)進(jìn)度制作動(dòng)畫。有了這個(gè)我們可以做一些非常酷的動(dòng)畫，最容易想到的是基于滾動(dòng)的視差效果。

.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}

總結(jié)

看完這些功能，我不知道你是什么感想，我倒是希望瀏覽器趕緊支持，但是目前這些功能還在提案階段，未來，我想他們都會(huì)得到應(yīng)用，目前如果你需要使用，請(qǐng)必了解一下各瀏覽器的支持情況。

學(xué)習(xí)更多技能

請(qǐng)點(diǎn)擊下方公眾號(hào)