CSS新用法 - font-variation-settings、!important、hwb()、lab()、lch()、oklab()、oklch()

font-variation-settings - Chrome62+

解释:这个css属性提供了对可变字体的一些初级控制

比如一个比较基本的

p {
  font-variation-settings: 'wght' 736;
}

设置字重为736

p {
  font-variation-settings: 'wght' 736, 'wdth' 36;
}

设置字重和宽度

具体可以设置的参数有哪些取决于字体的支持,比如这个字体就有很多参数


关于 !important的一些表现

/* 字是红色的 */
.example1 {
  --color: red;
  
  color: var(--color) !important;
  color: blue;
}

这很符合预期

/* 字是蓝色的 */
.example2 {
  --color: red !important;

  color: var(--color);
  color: blue;
}

为什么呢?查看规范可以知道,自定义属性可以包含!important,但是由于他不是颜色值的一部分,只会用于增加他在变量中的优先级,就是说在和别的—color 同时存在时,这个声明的优先级更高,但是仅仅是声明的优先级,在真实生效时css解析器会自动将其删除

/* 字是蓝色的 */
.example3 {
  --color: red;
  --color: blue;

  color: var(--color);
}

属性也有层叠的特性,后面声明的覆盖先声明的,符合预期

/* 字是红色的 */
.example4 {
  --color: red !important;
  --color: blue;

  color: var(--color);
}

因为!important增加了这个变量在所有变量中的优先级,所以是红色生效

/* 字是蓝色的 */
.example5 {
  --color: red !important;
  --color: blue;

  color: var(--color);
  color: blue;
}

变量中带有!important的red胜出,之后再解析器中important被去除,接着再被blue层叠掉red

总结:在变量里使用!important 只会增加他在变量里的优先级,也就是css解析器实际读取变量的时候,带有!important的变量更有可能真的生效,但读取到之后,往属性里套用时,会将!important 去除


hwb()颜色函数 - Chrome101+

解释:hwb() 根据颜色的色相、白度和黑度来表示给定颜色。可选的alpha表示颜色的透明度

例如 hwb(0 0% 30%),就是红色加入30%的黑色,效果就是偏深一点的红色。

  • H(色相): 是CSS颜色规范中以度、弧度、梯度或圆度表示的色彩圆中的一个角度。当以无单位的数字形式书写时,其被解释为度数,正如CSS颜色第3级规范所指定的那样。根据定义,红色= 0度 = 360度,其他颜色在圆周上分布,因此绿色= 120度,蓝色= 240度,依此类推。作为角度,它隐含地环绕着,使得-120度= 240度,480度= 120度,-1圈= 1圈等。

  • W(白度): 指定要混合的白色量,以0%(无白度)到100%(全白度)的百分比表示。

  • B(黑度): 指定要混合的黑色量,也是从0%(无黑度)到100%(全黑度)。

  • A(透明度): 可以是介于 0 和 1 之间的数字或百分比,其中数字 1 对应于 100%(完全不透明)。

CSS新用法 - font-variation-settings、!important、hwb()、lab()、lch()、oklab()、oklch()

CSS新用法 - font-variation-settings、!important、hwb()、lab()、lch()、oklab()、oklch()


lab()颜色函数 - Chrome111+

解释:目前,我们可以定义的CSS颜色都在sRGB色彩空间中。在此之前的很长一段时间里,专业显示器无法显示此范围内的所有可能颜色。因此,使用sRGB颜色是绝对足够的,但现在情况已经不同了。如今,显示器可以显示比sRGB色彩空间中存在的更多颜色。lab() 颜色函数是基于 CIELAB 色彩空间的,以一种接近人类视觉感知的方式表示颜色,并提供了比通常的 RGB 色彩空间更广泛的颜色范围。

格式:lab(L a b [/ A])

  • L:是一个介于0和100之间的数字,或者是介于0%和100%之间的百分数,它指定了CIE亮度,其中数字0对应0%(黑色),数字100对应100%(白色)。

  • a :是介于 -125 到 125 之间的数字 ,或者是介于 -100% 到 100% 之间的 百分比,用于指定在 Lab 颜色空间中,沿着 a 轴方向的距离,沿 a 轴的负值为绿色。正值为红色。

  • b:是一个介于-125和125之间的数字,或者是一个介于-100%和100%之间的百分比,用来指定在Lab颜色空间中b轴方向上的距离,沿 b 轴的负值为蓝色。正值为黄色

  • A:可选可以是介于0和1之间的数字或百分数,其中数字1对应100%(完全不透明)。

background-color: lab(85% 0 114);

例子


lch()颜色函数 - Chrome111+

解释:一样是从CIELAB 色彩空间lch()中挑选颜色,更详细的解释请看之前的lab颜色函数

语法:该函数用 3 个空格分隔的值

div {
  background-color: lch(52.2345% 72.2 56.2 / .5);
}

L:是一个介于0到100之间的数字,或介于0%到100%之间的百分比,它表示了CIE明度。数字0对应着0%(黑色),数字100对应着100%(白色)。

C:是一个数字或者百分比,其中0%代表0,而100%代表150。它是色度(大致代表“颜色数量”)的一种测量方法。其最小有用值为0,而理论上它的最大值是无限制的(但在实际中并不会超过230)。

H:是一个数字或者角度,它指定了色相角度沿着正向的“a”轴(朝紫红色)、90度指向正向的“b”轴(朝芥末黄色)、180度指向负向的“a”轴(朝青绿色)以及270度指向负向的“b”轴(朝天蓝色)。

A:可以是0到1之间的数字或者百分比,其中数字1代表100%(完全不透明)。


oklab() 和 oklch() - Chrome111+

解释:为了解决不ok版本的色调偏移错误,不过也不仅仅是错误的修正,它还具有与色轴背后的数学相关的不错的新功能

总结就是更推荐使用oklch,详情请看这里,写的非常详细

给TA打赏
共{{data.count}}人
人已打赏
技术教程

CSS新用法 - 颜色格式、@layer、容器查询、aspect-ratio

2024-6-6 11:30:54

技术教程

CSS新用法 - :modal、::backdrop、:picture-in-picture、:placeholder-shown、inset、scrollbar-gutte、backdrop-filter

2024-6-6 11:35:14

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索