好得很程序员自学网

<tfoot draggable='sEl'></tfoot>

html5教程-5分钟快速了解下CSS4 color-adjust属性

小宝典致力于为广大程序猿(媛)提供高品质的代码服务,请大家多多光顾小站,小宝典在此谢过。

&nbs p;

一、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则是“精确”,“准确”的意思。意思是告诉浏览器,我设置的这些颜色,背景啥的都是有必要的,精确匹配的,你不要自作聪明帮我做调整。

例如,为了便于阅读,我们会给表格增加灰白详见的 条纹 斑马线,但是,如果这时候去打印这个页面,灰色背景会被去掉,反而影响了阅读体验,此时,我们可以设定灰色条纹斑马线颜色是“精确”的,这样,灰色条纹就能 正常 打印。 兼容性

如下截图:

Ch rom e和Firefox都支持,C hr ome需要加 - webkit - 私有前缀。然而,根据我的测试,Chrome没有支持的其实是 -webk IT - PR int-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 也就是救命属性了。因此,其实学习性价比还是很不错的, 了解 之就学习之。

好,就说这么多,感谢阅读!

@H_ 360 _97@

(本篇完)

觉得 可用,就经常来吧! 欢迎评论哦!  html5教程 ,巧夺天工,精雕玉琢。小宝典献丑了!

总结

以上是 为你收集整理的 html5教程-5分钟快速了解下CSS4 color-adjust属性 全部内容,希望文章能够帮你解决 html5教程-5分钟快速了解下CSS4 color-adjust属性 所遇到的问题。

如果觉得 网站内容还不错, 推荐好友。

查看更多关于html5教程-5分钟快速了解下CSS4 color-adjust属性的详细内容...

  阅读:17次