每年都有新的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組件，此屬性可能會特別有用。