快速学习CSS Color Level 4的色值新语法

这篇文章发布于 2020年10月11日,星期日,18:35,归类于 CSS相关。 阅读 12380 次, 今日 8 次 4 条评论

 

多彩颜色表示

从2016年开始,现代浏览器开始陆续支持#RRGGBBAA颜色以及其他新语法,这些新语法都是CSS Color Level 4中定义的。

一、#RRGGBBAA颜色表示

现代浏览器目前已经全面支持了#RRGGBBAA颜色。

其中R,G,B还是原来的十六进制表示的RGB色值,范围从00-FF,至于这里新出现的AA,则表示透明度,范围也是00-FF。

#RRGGBBAA颜色虽然很实用,但是透明度的转换却没有RGB色值那么方便,因为由于透明度范围是0%-100%,而00-FF的十进制范围是0-255,对不上,需要转换,公式如下:

// Alpha范围0-1
AA = (Alpha * 255).toString(16);

因此,50%透明度等于(0.5*255).toString(16),结果是7f.8,七舍八入就是80。因此#FF000080就表示近似50%红色。

专门整理了一个百分比透明度和十六进制值之间的数据表,如下所示:

百分比透明度和十六进制值对应关系表(by zhangxinxu(.com))
透明度 十六进制值 透明度 十六进制值
0% 00 5% 0D
10% 1A 15% 26
20% 33 25% 40
30% 4D 35% 59
40% 66 45% 73
50% 80 55% 8C
60% 99 65% A6
70% B3 75% BF
80% CC 85% D9
90% E6 95% F2
100% FF    

同样的,#RRGGBBAA颜色也支持缩写,例如#f308等同于#ff330088

二、极致自由的新语法

在现代浏览器中,RGB颜色和HSL颜色的语法已经变得无比自由。

  1. rgb()rgba()语法互通,也就是下面的语法也是可以解析的:
    /* 有效 */
    rgb(0, 0, 0, 1)
    rgba(0, 0, 0)
  2. hsl()hsla()语法互通,也就是下面的语法也是可以解析的:
    /* 有效 */
    hsl(0, 0%, 0%, 1)
    hsla(0, 0%, 0%)
  3. rgb()中的数值可以是小数,也就是下面语法也是可以解析的:
    /* 有效 */
    rgb(99.999, 102.5, 0)
    rgb(1e2, .5e1, .5e0, +.25e2%)
  4. 透明度可以使用百分比表示,也就是下面的语法也是可以解析的:
    /* zhangxinxu: 有效 */
    rgb(0, 0, 0, 100%)
    hsla(0, 100%, 50%, 80%)
  5. hsl()中的色调可以使用任意角度单位,也就是下面的语法也是可以解析的:
    /* 有效 */
    hsl(270deg, 60%, 70%)
    hsl(4.71239rad, 60%, 70%)
    hsl(.75turn, 60%, 70%)
  6. rgb()hsl()语法中的逗号可以忽略,也就是下面的语法也是可以解析的:
    /* 有效 */
    rgb(255 0 0)
    hsl(270 60% 70%)

而以上所有示意的语法在IE浏览器中均不支持。

三、RGB颜色和HSL颜色新语法

现代浏览器还支持全新的空格加斜杠语法。例如:

rgb(255 0 153 / 1)
rgb(255 0 153 / 100%)
rgba(51 170 51 / 0.4)
rgba(51 170 51 / 40%)
hsl(270 60% 50% / .15)
hsl(270 60% 50% / 15%)

也就是R、G、B色值或者H、S、L色值使用空格分隔,透明度使用斜杠分隔。

空格语法和传统的逗号语法相比,只是一种写的语法形式,唯一的优点就是书写更快了,为什么呢?原因很简单,键盘上的空格键要比逗号键大得多。

四、结语亚撒西

腾讯的X5内核支持了很多CSS新特性,例如CSS变量、滤镜和混合模式等,即使设备是Android 4也可以使用这些CSS新特性。

但是,这里的CSS Level 4定义的新的色值表示法腾讯的X5内核却没有支持,兼容性反而不如Native浏览器。

这个小细节我之前遇到过一个坑。

所有这些颜色表示的新语法中,#RRGGBBAA是最为实用的,使用频率是最高的,至于其他一些新的语法,或者容错性的增强,好固然好,但是日常开发鲜有机会用到。

条条大路通罗马,但是一次只能走1条路,所以原来那条路好好的,也就没必要使用那些可能有坑的路。

OK,以上就是本文内容,增加点CSS知识的广度。

(本篇完)

分享到:


发表评论(目前4 条评论)

  1. mmm说道:

    小数比整数,颜色能渲染地更精细吗?

  2. alint说道:

    年前的项目里使用#RRGGBBAA 有部分老版本安卓手机不兼容,颜色不生效

  3. JasonSubmara说道:

    其实16进制的色值语法早就有了,可能原先不规范吧,css的filter,

    .box {filter:progid.DXImageTransform.Microsoft.gradient(GradientType = 1, startColorstr = #80000000, endColorstr = #80000000);}

    之前算是小记的一些兼容处理,大佬给看下~

    https://www.yuque.com/jasonsubmara/gkimprove/-compile

  4. Leon说道:

    话说我觉得rgba用得比较舒服(可能是十六进制看得不爽)