5個你可能不知道的CSS屬性

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

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

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

書寫顯示（和）;

渲染性能的提升（和屬性）;

創建新的花式設計（）

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

1. font-display

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

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

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

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

：默認值。這相當於根本不使用該屬性，結果是瀏覽器隱藏文本，當自定義字體完成載入後再顯示文本。

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

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

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

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

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

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

2. contain

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

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

引用 W3C 關於屬性的定義,

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

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

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

：默認值。使用此值不應用限制效果。

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

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

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

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

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

：這個值與strict但像，除了不包含size。 這個例子的屬性如下所示 在JSFiddle上也能看到. 看下下面代碼:

And the following JavaScript:

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

3. writing-mode

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

支持下列的值:

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

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

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

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

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

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

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

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

4. clip-path

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

這些值的含義:

: 引用內部或外部SVG元素的URL

: 基礎形狀函數， 定義在 CSS Shapes specification

: 如果明確與「組合，它將為基本形狀提供參考框。

: 沒有剪貼

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

除了Microsoft的瀏覽器（Edge和IE）之外，所有主流瀏覽器都支持。此外，您應該記住支持此屬性的瀏覽器的一些注意事項。 第一個是Safari支持帶有-webkit-『前綴的屬性。 第二個是所有實現了這個功能的瀏覽器只有部分的支持。 「部分支持」的含義因瀏覽器而異。 如果您想了解更多信息，請查看 相關屬性的支持。

如果想試用，我推薦你用Chrome，因為它支持最多。

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

5. will-change

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

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

聽起來很酷，對吧？好消息是，Chrome 53+，Opera 43+，Firefox 52+，Safari 10和Android目前支持此屬性。 （IE和Microsoft Edge不支持）。慢著，在繼續之前，您應該注意一些事情：

您不應該將此屬性應用於太多元素即使您的頁面運行良好。它會減慢運行速度並消耗大量的資源和內存，這很不友好。

您應該在更改發生之前和之後使用腳本代碼切換開啟。

這個屬性不應該用來預測和解決潛在的性能問題。在出現問題後，它必須被視為最後的手段。

屬性可以用來避免我們多年來一直在使用的hack：使用（或）來推動瀏覽器動畫並轉換成硬體加速。

支持四個值：

：瀏覽器不會設置任何特殊的優化。 這與沒有指定屬性一樣具有相同的效果。

表示，顧名思義，您希望在不久的將來隨時更改元素的滾動位置。 一些位於在可滾動的元素中的內容需要未來在滾動視窗內可見的時候，該值可用於提示瀏覽器準備渲染內容。

：指定要更改元素的內容。

你期望改變的一個或多個CSS屬性的名字，你可以使用逗號將這些屬性隔開，比如說。

結論

在本文中，我已經描述了五種新的有趣的CSS屬性，這些屬性可能你以前都不知道。

你有沒有曾經使用過這些屬性呢？ 如果使用過的話，你對他們的看法是什麼？ 如果你沒有使用它們，你願意試試嗎？

譯者：眾里尋他千百度

譯文：http://www.zcfy.cc/article/5-css-properties-that-you-probably-don-039-t-know-3919.html?t=new

原文：http://developer.telerik.com/topics/web-development/5-css-properties-probably-still-dont-know

點擊展開全文

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！