5分鐘快速瞭解下CSS4 color-adjust屬性
byzhangxinxu from ofollow,noindex" target="_blank">https://www.zhangxinxu.com/wordpress/?p=8219
本文可全文轉載，個人網站無需授權，只要保留原作者、出處以及文中連結即可，任何網站均可摘要聚合，商用請聯絡授權。
一、color-adjust屬性簡述
color-adjust 原本是個非標準屬性，不過最近加入了CSS Color Module Level 4的 工作草案 ，算是有了名分了，值得介紹一番。
color-adjust 這個CSS屬性作用用一句話表述：是否允許瀏覽器自己調節顏色以便有更好的閱讀體驗。
語法
color-adjust: economy; color-adjust: exact;
其中：
- economy
- exact
目前2018年了，除了印表機以外的現代裝置，顯示器都很強，似乎遇不到這種“節省背景色”，“節省色值”的場景；但並非如此，例如macOS有了很酷的夜視模式，這就是一個需要增加對比度的場景，應該賦予裝置自由調節樣式表現的能力。以後還會有其他裝置有其他閱讀場景，從面向未來的角度講， color-adjust 屬性是有其存在的價值的。
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 也就是救命屬性了。因此，其實學習價效比還是很不錯的，瞭解之就學習之。
好，就說這麼多，感謝閱讀！
本文為原創文章，會經常更新知識點以及修正一些錯誤，因此轉載請保留原出處，方便溯源，避免陳舊錯誤知識的誤導，同時有更好的閱讀體驗。
本文地址： https://www.zhangxinxu.com/wordpress/?p=8219
（本篇完）