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
(本篇完)