這些特效即將告別JavaScript，迎來CSS時代！

隨着CSS和JavaScript的發展，這兩種語言之間的界限逐漸變得模糊。

從自定義屬性（即變量）到濾鏡、動畫或數學操做，CSS採用了不少咱們之前在JavaScript（或流行的CSS預處理器）中使用的東西，併爲咱們提供了原生支持。

兩種語言都有不一樣的用途。現代瀏覽器的每次發佈，都帶來了新的特性支持，CSS正在成爲一種很是強大的語言，可以處理咱們之前依賴JavaScript的功能。

在這篇文章中，咱們將學習一些你可能沒有據說過的CSS特性，它們能處理平滑滾動，暗黑模式，表單驗證，以及更多之前須要多行JS代碼技巧才能完成的功能。

平滑滾動

曾經有一段時間，咱們不得不依靠JavaScript(甚至jQuery)來作到這一點，用的是window.scrollY。多虧了scroll-behavior屬性，那些日子已經一去不復返了。咱們如今能夠用一行CSS代碼就能實現網頁的平滑滾動：

html {
  scroll-behavior: smooth;
}

複製代碼

瀏覽器支持率約75%， Edge很快也將推出76版本。看看它是如何工做的： CodePen 示例代碼

暗黑模式

自從macOS 發佈了暗黑模式功能後，暗黑模式最近變得很是流行。Safari 實現了prefers-color-scheme媒體特性，它容許咱們監測用戶是否默認啓用了暗黑模式。

你可能認爲暗黑模式是一個複雜的特性，它包括CSS變量、每種方案的不一樣顏色和一些JavaScript代碼來處理必要的單擊事件以完成對網站的更改。這麼說也沒錯，它是目前的標準實現方法。

Wei Gao在她的博客上向咱們展現了用 mix-blend-mode: difference(CSS支持的一種混合模式)實現相似效果(更多的是一種「反色模式」)。若是你曾經嘗試過Photoshop混合模式，這跟它是同樣的，只不過是在瀏覽器上。

它的一些優勢包括沒必要指定反轉的顏色(混合模式能夠爲你作到這一點)，而且你能夠隔離不想更改的元素。它的一些限制是，你沒有一個完整的顏色範圍，性能多是一個問題。

目前，瀏覽器原生支持率77%，帶前綴的話再多出 13%(全球91%)，Edge在76版本開始支持。

要更深刻地瞭解這種混合模式的工做原理，請務必查看 Wei 的文章 。若是想體驗下有趣的實驗，請看這個CodePen 示例代碼

截斷文本

這是我我的最喜歡的特性之一，由於這是在開發CMS網站頁面會遇到的一個常見問題。可變的文字長度可能會使你設計良好的卡片在不一樣的尺寸或分辨率下看起來不一致。

在過去，我老是在不加思索地尋找基於JavaScript 的解決方案，由於實現這個效果的大多數CSS技術都至關「hacky」。可是，最近我發現了一些CSS屬性，它們結合在一塊兒可能可以提供一個原生的、易於實現的解決方案。這就是text-overflow和line-clamp。

文本溢出

這是一個被普遍採用，而且瀏覽器徹底支持的原生css解決方案，用於控制文本在溢出其包含元素時的行爲。你能夠將其值設置爲ellipsis，這樣就會獲得Unicode字符 … 。到目前爲止還不錯，但它的主要限制是不管文本的長度如何，老是會有一行被截斷的文本。所以，這可能對標題很是適合，但對長段落的多行文本不太適用。

這個時候 line-clamp 就派上用場了。

Line-clamp

line-clamp屬性也不是什麼新東西。大約十年前，Dave DeSandro向咱們展現了這項技術(所以須要使用老的flexbox實現，也就是帶前綴的display: -webkit-box 和-webkit-box-orient: vertical)。

那麼，有什麼新動向嗎？Firefox在68版本中實現了它，可是須要帶-webkit前綴。如今Edge是基於Chromium的，咱們也可使用 -webkit前綴，這樣瀏覽器支持率高達92%。

這意味着咱們如今可使用三行CSS代碼來截斷多行文本，像這樣。

惟一的問題是，截斷多行文本的規範是CSS Overflow Module Level 3的一部分，而它目前仍是編輯草案，這可能意味着規範可能會有一些變化。另外一個須要考慮的事情是，你沒法控制要顯示的字符數，這可能會致使一些不太方便(但頗有趣)的截斷場景。除了這個問題，愉快地玩耍CSS 截斷文本吧！

滾動停頓

CSS 滾動停頓是Chrome用戶已經使用了一段時間的另外一個方便的功能，如今 FireFox 最新的68版本也支持了。另外，Edge 76 版本也將支持， 總體支持程度已經覆蓋主流瀏覽器。

你是否注意到一些花哨的網站會建立全屏區域，並在你滾動時鎖定特定位置的視口？這裏有一個這樣的例子。

在此以前，要實現這樣的功能仍是挺麻煩的，須要大量的數學計算和 JavaScript 代碼。可是如今，CSS 就能原生實現這樣的交互效果了。

它的工做原理相似於Flexbox或CSS網格，你須要一個容器元素，給它設置scroll-snap-type ，加上多個設置了scroll-snap-align的子元素，就像這樣：

HTML代碼：

<main class=」parent」>
  <section class=」child」></section>
  <section class=」child」></section>
  <section class=」child」></section>
</main>

複製代碼

CSS 代碼：

.parent {
  scroll-snap-type: x mandatory;
}

.child {
  scroll-snap-align: start;
}

複製代碼

scroll-snap-type 有兩個值：mandatory 強制停頓在元素的頂部或底部，proximity 會替你計算好位置，當內容足夠接近目標位置時停頓。

在父元素上還能夠設置的一個屬性是 scroll-padding，若是在佈局中有固定定位的元素時很是好用。好比固定的頭部，或者 cookie 策略通知😅)，否則的話有些內容會被遮擋。

對於子元素，目前只有scroll-snap-align，用於告訴容器在哪些位置停頓（頂部，中間或底部）。

既然知道了這項神技經過幾行CSS代碼，無需數學計算就能夠實現這個效果，你可能經不住誘惑給整個網站都加上滾動停頓效果。可是請記住這條惟一的網頁設計法則，也就是Robin Rendle 說的：不要瞎幾把滾動。這項技術可能對滑動幻燈片、圖庫預覽或頁面特定部分有用，可是用的時候要剋制點，由於它會影響性能和總體的用戶體驗。

Sticky 導航

以前的一些特性須要大量的JavaScript計算，並且實現性能方面的代價也至關高昂，如今好了，咱們有了 sticky 定位方式。以前咱們須要用 offsetTop和 window.scrollY，如今全都交給神奇的position: sticky ！sticky 定位的元素默認表現爲相對定位元素，直到視口達到某個位置時它就會變成 fixed 定位的元素。帶上 -webkit 前綴，瀏覽器支持率高達 92%

所以，只要這樣寫就能輕鬆實現：

header {
  position: sticky;
  top: 0;
}

複製代碼

要正確地將 header 設置爲 sticky 定位，HTML 結構很是重要。所以，假如你的HTML結構像這樣：

<main>
  <header>
    <h1>This is my sticky header!</h1>
  </header>
  <section>This is my content</section>
</main>

複製代碼

header 只會附着在父元素（這裏是<main>標籤）所在區域。「sticky 父元素」決定了「sticky 子元素」的做用範圍。Elad Shechter 的這篇文章 很好地解釋了這個問題。另外，這裏還有一個利用這個特性的有趣實驗。

最後的福利： @supports

正如前面說到的，儘管這些 CSS 特性 已經被普遍採用和支持，你可能仍是想在使用以前檢查瀏覽器是否支持。若是是這樣，你能夠用@supports 特性查詢，這個功能已經被瀏覽器普遍採用。它能夠測試瀏覽器在應用樣式以前是否支持特定的property: value 。語法以下：

@supports (initial-letter: 4) {
  p::first-letter {
    initial-letter: 4;
  }
}

複製代碼

有了這個方便的特性查詢，你能夠在支持那些特性的瀏覽器上應用特定樣式。它的語法看起來很熟悉，由於媒體查詢也是這樣寫的。這是很棒的一種方式實現所謂的漸進加強，在支持的瀏覽器上使用這些最新的特性，而避免了不支持的瀏覽器的行爲不一致。

好了，就此結束！但願這些最新的CSS特性能幫你用更小的JavaScript代碼實現有趣又吸引人的界面。另外，能夠再看看這些CodePen 示例代碼。

原文

交流

歡迎關注微信公衆號「1024譯站」，爲你奉上更多技術乾貨。