CSS4中color-adjust屬性怎么用

這篇文章將為大家詳細(xì)講解有關(guān)CSS4中color-adjust屬性怎么用，小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。

一、color-adjust屬性簡(jiǎn)述

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

color-adjust這個(gè)CSS屬性作用用一句話表述：是否允許瀏覽器自己調(diào)節(jié)顏色以便有更好的閱讀體驗(yàn)。

語(yǔ)法

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

其中：

economy

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

目前2018年了，除了打印機(jī)以外的現(xiàn)代設(shè)備，顯示器都很強(qiáng)，似乎遇不到這種“節(jié)省背景色”，“節(jié)省色值”的場(chǎng)景；但并非如此，例如macOS有了很酷的夜視模式，這就是一個(gè)需要增加對(duì)比度的場(chǎng)景，應(yīng)該賦予設(shè)備自由調(diào)節(jié)樣式表現(xiàn)的能力。以后還會(huì)有其他設(shè)備有其他閱讀場(chǎng)景，從面向未來(lái)的角度講，color-adjust屬性是有其存在的價(jià)值的。

exact

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

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

兼容性

如下截圖：

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

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

二、color-adjust案例一則

您可以狠狠地點(diǎn)擊這里：打印時(shí)候背景色依然顯示對(duì)比demo

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

下面的一個(gè)表格打印預(yù)覽時(shí)候之所以顯示了會(huì)被條紋，就是因?yàn)樵O(shè)置了如下CSS：

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

Firefox瀏覽器下也有類似的表現(xiàn)：

關(guān)于CSS4中color-adjust屬性怎么用就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，可以學(xué)到更多知識(shí)。如果覺得文章不錯(cuò)，可以把它分享出去讓更多的人看到。