每年都有新的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) 不可見，之后瀏覽器將持續加載自定義字體，這個期間，文本將以無樣式的狀態呈現，當自定義字體加載好了之后，文本將會被賦予自定義的字體。但是，如果加載字體耗時過長，文本將會使用后備字體，并且不再會使用自定義字體替換（即使后續自定義字體加載成功）。