CSS Color Adjust 速览

更新日期: 2019-06-28阅读: 2k标签: 颜色

近来,各大平台的操作系统纷纷引入 Dark Mode 深色模式,包括 Windows、MacOS 以及 Android 甚至 iOS 13 也将引入该模式。深色模式引入的同时,同时允许我们基于用户的偏好设计特定的样式。

近期,W3C css 工作组发布了 CSS Color Adjust Level 1 编辑草案,也是第一版公开的工作组草案。该标准引入三个新的 CSS 属性,帮助为浏览器提供特定信息,决定浏览器在基于用户的色彩偏好时能对页面展现做出多少的改动。


color-scheme

color-scheme属性是标准中定义的第一个属性,同时也是本标准的中心。这个属性接受两个属性值:light和dark,如字面它们分别指代了亮色模式和深色模式。

这个属性有着一些非常重要的作用。

其中一个重要的作用是允许我们基于用户的系统偏好设定样式,对体验上做一些更完整的把控;另一个重要的作用是可以让浏览器负责去确定一些元素的颜色,当我们设定 color-scheme为 light 或 dark 时,告知浏览器,这个元素是可以”适应”特定配色设定的,同时可以根据设定的偏好由浏览器决定该元素的样式。另外,也可以使用auto属性值,让浏览器基于用户的系统偏好做相应的设置。

值得一题的是,使用 prefers-color-scheme 这个媒体查询,让开发者知道当前系统的偏好设置,并应用对应的样式。


only 属性值

only 属性值后面必须跟着一个样式属性值,例如 only && light ,告知浏览器必须使用指定的色彩配置渲染,即使用户指定了其他的色彩配置。


forced-color-adjust

当该属性值设定为 none 时,可以将指定元素的样式控制从浏览器转交回 CSS 中,从而允许元素不受 color-scheme 指定的数值所影响。


color-adjust

在大多数显示设备上,对于页面上使用何种颜色,对于显示设备来说都是没有区别的。但是在某些情况下,例如打印机,打印机通常在白纸上使用黑色墨水打印文档,但如果打印一份以黑色背景为主的文档来说,就显得非常的浪费。

在这种情况下,更希望浏览器根据实际输出设备对输出的样式进行适当的调整。要达到这个目的,可以使用 color-adjust 属性。

它有两个属性值,economy 以及 exact:economy 表示需要根据目标设备的情况做相应的更改,以符合最佳的使用效果。exact 则表示保留原有样式不需要更改。


小结

虽然该草案比较简单,但是也能让我们看到 W3C 成员们在更好的 web 体验上所作出的贡献。


参考

https://css-tricks.com/a-quick-look-at-the-first-public-working-draft-for-color-adjust-module-1/

https://www.w3.org/TR/2019/WD-css-color-adjust-1-20190521/

来自:https://isnimitz.com/posts/2019/06-css-color-adjust-1/


链接: https://www.fly63.com/article/detial/3939

css常用的颜色单位表示法

所有的颜色都可以由红、绿、蓝三原色调配而成。 CSS中用8位表示一个颜色,那么可以有28即256种颜色,所以总共可以表示256*256*256种颜色。CSS纵有多种颜色表示: 十六进制表示法、rgb表示法、hsl色相表示法、hsla色相表示法

css颜色模式hsla和rgba

在CSS3中可以使用RGBA和HSLA两种色彩模式,这两个都可以用来设置颜色以及指定透明度。RGBA无法直观看出是什么颜色。并且如果想要对颜色进行调整也无法简单做到

网页设计中的色彩心理学

我们大多数人没有意识到它是如何工作的,只有少数人可能会注意到。虽然颜色的影响可能被高估了,但是我们可以在某些情况下明显地感觉到它(想象你自己在一个暗红色的房间里或者在天空颜色的房间里)。

::after 1px 间隔线在 Safari 显示颜色不同于其它的问题

细找问题,找出来了,我在 ::after 内写的是 border-bottom ,也就是说,在纵向压缩的时候,压缩的是 border。换成用 background-color ,也就是用 after 的主体。

Js计算颜色对比度

某些网站和服务允许您通过上传图片,更改背景颜色或设计的其他方面来自定义您的个人资料。作为客户,此个性化将Web应用程序转换为您存储数据的小窝。

RGB、HSL、Hex网页色彩码,看完这篇全懂了

网页使用到的色彩标示方法中,从古早时期大家都在用的16进位码(#000000)、RGB色值标示、HSL色彩标示,其中网页设计师最常使用的16进位色码标示法,而16进位码又是如何计算色彩的呢?

HTML常用的颜色表【代码色彩表 】

以下是DIVCSS5整理常用的HTML颜色表,参考,直接找到自己需要的html颜色值拷贝颜色值代码即可使用(除了以下颜色表外,你还可以使用PS软件获取颜色值:http://www.divcss5.com/html/h635.shtml)。

常用颜色表之中国传统颜色

不知道大家觉得如何,舒适的颜色,很多人都会喜欢,但主要还是看实用性。今天给大家分享中国传统颜色有那些?中国传统的颜色之美,美如其名:蔚蓝、竹青、绯红、月白、石青、紫檀、霜色、黛绿、胭脂、藕荷、豆绿、宝蓝、秋香、玄色、牙色、黄栌、靛蓝、明黄、朱砂、石绿

css中颜色

假设在设置页面的颜色时觉得一部分很小的颜色集中就足够了,就可以直接给定颜色的名称。CSS称这些有名称的颜色为命名颜色。命名颜色的关键字有限,css定义了17个标准色:浅绿色,黑色,蓝色

原生JS代码实现随机产生一个16进制的颜色值

封装一个函数,一个十六进制的值的数组,产生的每个随机数都是一个索引,根据索引找到数组中对应的值,拼接到一起,调用函数getColor()就能随机获取一个16进制的颜色值

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!