一、color-adjust屬性簡述

color-adjust原本是個非標準屬性，不過最近加入了CSS Color Module Level 4的工作草案，算是有了名分了，值得介紹一番。

color-adjust這個CSS屬性作用用一句話表述：是否允許瀏覽器自己調節顏色以便有更好的閱讀體驗。

語法

color-adjust: economy;
color-adjust: exact;

其中：

economy

默認值。economy英文直譯意思是“經濟”，“節省”。表現為，瀏覽器（或其他客戶端）對于元素進行樣式上的調整，調整的規則由瀏覽器自己決定，以免達到更好的輸出效果。例如，當打印時，瀏覽器會選擇省略所有背景圖像，并調整文本顏色，以確保對比度對于白紙上的閱讀是最佳的。

目前2018年了，除了打印機以外的現代設備，顯示器都很強，似乎遇不到這種“節省背景色”，“節省色值”的場景；但并非如此，例如macOS有了很酷的夜視模式，這就是一個需要增加對比度的場景，應該賦予設備自由調節樣式表現的能力。以后還會有其他設備有其他閱讀場景，從面向未來的角度講，color-adjust屬性是有其存在的價值的。

exact

exact則是“精確”，“準確”的意思。意思是告訴瀏覽器，我設置的這些顏色，背景啥的都是有必要的，精確匹配的，你不要自作聰明幫我做調整。

例如，為了便于閱讀，我們會給表格增加灰白詳見的條紋斑馬線，但是，如果這時候去打印這個頁面，灰色背景會被去掉，反而影響了閱讀體驗，此時，我們可以設定灰色條紋斑馬線顏色是“精確”的，這樣，灰色條紋就能正常打印。

兼容性

如下截圖：

Chrome和Firefox都支持，Chrome需要加-webkit-私有前綴。然而，根據我的測試，Chrome沒有支持的其實是-webkit-print-color-adjust屬性，可以看成是color-adjust有名分之前的前身。

-webkit-print-color-adjust和color-adjust屬性值和作用是一樣的。

二、color-adjust案例一則

您可以狠狠地點擊這里：打印時候背景色依然顯示對比demo

Ctrl + P或者選擇瀏覽器“打印”菜單，此時，可以看到差異：

下面的一個表格打印預覽時候之所以顯示了會被條紋，就是因為設置了如下CSS：

table {
-webkit-print-color-adjust: exact;
color-adjust: exact;
}

Firefox瀏覽器下也有類似的表現：

三、五分鐘到了

最后簡單評價下color-adjust這個屬性。

難登大雅之堂，非門面相關的CSS。不學不聞不問對我們日常工作影響也不大。估計日后就算再工作10年也難遇到需要動用color-adjust屬性的場景。

就像那些冷門小眾的電影，雖然有其藝術系和價值，但是，對于蕓蕓的我們而言，并不是非不可的事情。

好在也就耽誤了5分鐘的時間。加上本身知識點是有用的，保不準你以后會處理一些特殊設備，特殊場景，這個時候color-adjust也就是救命屬性了。因此，其實學習性價比還是很不錯的，了解之就學習之。

以上就是對5分鐘快速了解下CSS4 color-adjust屬性的全部介紹，如果您想了解更多有關CSS3教程，請關注PHP中文網。

以上就是5分鐘快速了解下CSS4 color-adjust屬性的詳細內容，更多請關注php中文網其它相關文章！