你不知道的冷門CSS屬性

你不知道的冷門CSS屬性這次給大家帶來，使用冷門CSS屬性的注意事項有哪些，下面就是實戰案例，一起來看一下。

每年都有新的CSS屬性被標準化，並在主流瀏覽器中可用。 它們旨在使Web開發人員的工作變得輕鬆，創造出新穎美麗的網站。

在這篇文章中，我將介紹5個相對較新的CSS屬性，你可能從來沒有聽說過，我覺得很有趣。 本文的目的是帶領你總覽這些CSS的屬性，告訴你可以使用哪些值，它們的使用情境，還有一些例子。

具體來說，這五個CSS屬性可以分為以下三類：

• 書寫顯示（font-display和write-mode）;

• 渲染效能的提升（contain和will-change屬性）;

• 建立新的花式設計（clip-path）

在開始之前，我想提醒一下，當處理新的CSS屬性時，檢查他們的支援和潛在的跨瀏覽器問題是一個好習慣。在這方面 can i use是一個高效的工具。

1. font-display

font-display屬性允許您控制可下載字型在完全載入之前呈現的方式，或者下載失敗時的處理方案。瞭解如何使用自訂字型以及載入它們需要多少時間是非常重要的一點。實際上，在瀏覽器等待自訂字型載入的過程中，使用者在一定的時間內只能看到空白的內容。我們知道，如果內容載入過慢，使用者將會離開頁面。內容空白的時間取決於所使用的瀏覽器，通常為3秒左右。但是對於網頁來說，這段時間是相當長的。

在過去幾年中，開發人員通過使用基於JavaScript的解決方案，如Font Face Observer 或 Font Loading API。如今，“font-display”會使情況得以改善。

font-display屬性在@font-face聲明時使用。藉助它，我們可以通過一行簡單的CSS來控制字型的顯示方式，而不需要使用基於JavaScript的解決方案。這意味著我們的網頁可以減小體積，（很可能）提高效能。

在使用font-display時，您可以使用以下五個值之一：

• auto：預設值。這相當於根本不使用該屬性，結果是瀏覽器隱藏文本，當自訂字型完成載入後再顯示文本。

• block：瀏覽器在等待自訂字型載入時隱藏文本的時間減少了（例如1秒）。如果這段期間自訂字型未載入好，文本會應用備用字型呈現出來。同時，瀏覽器將無限期地等待自訂字型載入，並且自訂字型載入完成後對文本應用自訂字型。

• swap: 瀏覽器將立即展示後備字型，同時載入自訂字型。當自訂字型載入成功後，瀏覽器會使用自訂字型替代後備字型。 大多數情況下，這就是我們所追求的效果，之前提及到的JavaScript指令碼實現的功能就基本和這個是一致的。

• fallback: 使用自訂字型渲染的文本在短時間內 (大約 100ms) 不可見，之後瀏覽器將持續載入自訂字型，這個期間，文本將以無樣式的狀態呈現，當自訂字型載入好了之後，文本將會被賦予自訂的字型。但是，如果載入字型耗時過長，文本將會使用後備字型，並且不再會使用自訂字型替代（即使後續自訂字型載入成功）。

• optional 效果和fallback幾乎一樣，都是先在極短的時間內文本不可見，然後再自訂字型沒有載入好之前使用後備字型。不過optional選項可以讓瀏覽器自由決定是否使用甚至載入自訂字型。選擇權交給瀏覽器的原因是，當使用者的網路環境不好的時候，載入字型也許並不是一個好的選擇。當這些自訂字型不影響網頁的品牌形象或者無礙設計的時候，這個值可能是個很好的選擇。

@font-face {  font-family: AmazingFont;  src: url('/fonts/amazingfont.woff2') format('woff2'),       url('/fonts/amazingfont.eot') format('eot');  font-display: fallback;}h1 {  font-family: AmazingFont, Arial, sans-serif;}

這個功能在瀏覽器中的支援程度仍然很低，但情況會很快得以改善。在使用瀏覽器首碼的情況下， Chrome 49+，Firefox 46+和Opera 36+都支援這個屬性。 不過，未來Chrome 60和Opera 47將使得該屬性無需首碼標誌（譯者註：文章寫作時，這兩個版本還沒有發出）。

如果您想問當瀏覽器還未支援這個屬性的時候，使用font-display將會發生什嗎？答案是這些瀏覽器會忽略該屬性，字型渲染的行為將與以前一樣。 如果您真的希望改善使用者的體驗，即使瀏覽器不支援該屬性，您也可以使用到上述基於JavaScript的解決方案之一。

2. contain

如果您構建具有許多小組件（包括第三方）的複雜網站，則新的contain 屬性可能是最佳化網頁的好工具。 如果您考慮在構建當今網頁時大量使用Web Components和React組件，此屬性可能會特別有用。

如果您正在尋找一種將樣式，布局和重繪計算範圍限制為只有 DOM的局部的方法，則可以使用contains屬性。 如果你不熟悉那些概念，我推薦你閱讀這些文章 10中減少重排提升效能的方式。當你理解這些方式後，再推薦你另外一個好的學習資源 CSS Triggers.

引用 W3C 關於contain屬性的定義,

contain屬性允許開發人員聲明當前元素和它的內容儘可能的獨立於其他部分的 Dom 樹。

但這在實踐中意味著什麼呢？ 這意味著如果您有一個具有固定高度和寬度的小組件（獨立的部分），當你想要更新它的內容和樣式的時候，使用這個屬性可以通過限定瀏覽器的計算來避免影響到其他的DOM結構。 瀏覽器將執行較少的計算，從而獲得更好的效能。

這個屬性是相當新的，因此它的支援程度不是很好。 目前，只有Chrome 52+和Opera 40+才支援它。 contains允許幾個值，每個值都可以讓你限制瀏覽器需要做多少渲染工作。 我們詳細分析一下每個值：

• none：預設值。使用此值不應用限制效果。

• size：該值開啟元素的大小限制。這意味著修改元素的大小可以不需要檢查其後代。

• layout：該值開啟元素的布局限制。這規定外面任何東西都不會影響其內部布局，反之亦然。

• style：該值開啟元素的樣式限制。因此，對元素及其後代可能產生影響的屬性不會影響這個元素之外的任何內容。

• paint：該值開啟元素的繪製限制。這意味著元素的後代不會顯示在其邊界之外。例如，如果一個元素是螢幕外（或不可見的），它的所有元素都是螢幕外（或不可見的）。典型的用例是行動裝置上的螢幕菜單。

• strict：該屬性適用於所有形式的限制，本質上是除去none所有上述值的組合（即包含：size layout style paint）。

• content：這個值與strict但像，除了不包含size。

這個例子的屬性如下所示 在JSFiddle上也能看到. 看下下面代碼:

<button id="button">Show menu</button><ul id="menu" hidden><li>Home</li><li>About</li><li>Contact</li></ul>

And the following JavaScript:

const menu = document.querySelector('#menu');document.querySelector('#button').addEventListener('click', function() {if (menu.hasAttribute('hidden')) {  menu.removeAttribute('hidden');} else {  menu.setAttribute('hidden', '');}});

通過使用 contain 屬性，你可以減少瀏覽器的計算:

#menu {contain: paint;}

3. writing-mode

writing-mode並不算是一個全新的CSS屬性，但仍有許多開發人員不瞭解它。 誠然，這是一個不常見的用例。 writing-mode屬性定義文本行是水平還是垂直布置，塊的進度方向。 所有主流瀏覽器（包括Microsoft Edge）目前都支援它，儘管Internet Explorer支援早期版本規範中的不同值。 此外，Safari還支援此CSS屬性的供應商首碼版本 。

writing-mode 支援下列的值:

• horizontal-tb：內容為我們常規的水平排列，從左至右閱讀，第二行在第一行的下方。

• vertical-rl：內容垂直排列，從上到下，由右至左閱讀，第二行在第一行的左側。

• vertical-lr：內容垂直排列，從上到下，從左至右閱讀，第二行在第一行的右側。

• sideways-lr：內容垂直排列，從上到下，從左至右閱讀，在所有的排版方式中，即使是垂直版式, 字的頂部都是向左的。

• sideways-rl：內容垂直排列，從上到下，由右至左閱讀，在所有的排版方式中，即使是垂直版式，字的頂部都是向右。

最後兩個值目前僅有Firefox支援。

想瞭解這個屬性如何工作, 請看 a JSFiddle. 結果就在下面：

請記住，只有使用日語或中文等語言時，一些值的效果才會展現。 有關更全面的樣本，請查看示範 the relevant MDN page.

4. clip-path

如果你想從CSS中建立簡單的形狀到相當複雜的形狀，那麼clip-path屬性是很方便的。 使用它，您可以隱藏元素的特定地區。 最常見的用例是對於映像使用這個屬性，你可以通過“clip-path”僅顯示一部分內容，從而創造出比原圖更有創意的圖片。

clip-path: <clip-source> | [ <basic-shape> | <geometry-box> ] | none

這些值的含義:

• clip-source: 引用內部或外部SVG元素的URL

• basic-shape: 基礎形狀函數， 定義在 CSS Shapes specification

• geometry-box: 如果明確與“組合，它將為基本形狀提供參考框。

• none: 沒有剪貼

每個基本形狀都有不同的參數。列出全部的參數很無聊。下面是兩個應用了這個屬性的兩個樣本圖片：

除了Microsoft的瀏覽器（Edge和IE）之外，所有主流瀏覽器都支援clip-path。此外，您應該記住支援此屬性的瀏覽器的一些注意事項。 第一個是Safari支援帶有-webkit-‘首碼的屬性。 第二個是所有實現了這個功能的瀏覽器只有部分的支援。 “部分支援”的含義因瀏覽器而異。 如果您想瞭解更多資訊，請查看 相關屬性的支援。

如果想試用 clip-path，我推薦你用Chrome，因為它支援最多。

另外，如果你想用一個工具線上查看這些屬性如何起作用, 你可以查看 clippy.

5. will-change

我們都知道速度和效能是至關重要的，特別是在行動裝置上。與台式機相比，它們有限的RAM和GPU儲存空間使得一些CSS操作更難以執行（在頁面載入速度或圖形影響方面）。如果瀏覽器可以在發生之前知道會發生什麼，是不是這樣會增加頁面的響應性？

有一種方法我們可以給我們的瀏覽器一些重要的暗示，通過使用will-change屬性，提前通知元素將會發生什麼改變。因為這個屬性，瀏覽器將在元素被改變之前有時間完成其最佳化工作，相應地分配記憶體。

聽起來很酷，對吧？好訊息是，Chrome 53+，Opera 43+，Firefox 52+，Safari 10和Android目前支援此屬性。 （IE和Microsoft Edge不支援