拙见
工具应用
前端技术
AI技术
其他知识
编程知识
CSS新用法 - @property、initial-letter、color-mix()、@media范围写法🎐
type
status
date
slug
summary
tags
category
icon
password
@property - Chrome85+
initial-letter首字属性 - Chrome110+
解释:对首字母进行首字下沉和大小的设置:
语法:initial-letter: <number> <integer>(可选);
number:占据的行数
integer:下沉的行数,如果省略,它会复制前一个值
color-mix() - Chrome111+
解释:函数接受两个值,并根据指定的颜色空间和比例混合它们,返回混合后的结果。
语法:
- 第一个值为颜色插值方法,以
in
开头,可选的色彩空间有 - srgb
- srgb-linear
- lab
- oklab
- xyz
- xyz-d50
- xyz-d65
- hsl
- hwb
- lch
- oklch
矩形色彩空间的值
极坐标色彩空间的值
- 第二个值可选,值为下面这些,可以看上面第4行代码,就是填写了这个值
- shorter hue
- longer hue
- increasing hue
- decreasing hue
色调插值(可能是这样翻译的吧,原文是hue-interpolation-method)
- 第三个值是一个颜色值
- 第四个值是一个百分比(可选),可以看上面第一行代码,就没写这个值
- 第六个值为第二个颜色
例子
![notion image](https://i0.hdslb.com/bfs/article/2e23e9c7038f1767c7aab1d7633cab6a30109107.png?t=d9d2890f-5eec-4639-a600-0ad5a3c0673b)
是不是有点眼熟?看上去像组件库的配色方式,未来兼容性好起来的时候,就可以使用这个来定义组件库的颜色了。
这里的例子都是某个颜色和白色混合,深色模式是不是就可以和黑色混合,还有一些花里胡哨的情况下可以两个彩色混合,不过这对于并不精通色彩空间和调色的人来说,可能根本无法预测混合的结果。
@media的范围写法
之前我们写媒体查询的时候需要写min-width或者max-width,对于脑子来说并不是很容易辨认
而在Chrome104之后,我们可以通过符号写这些了,更符合直觉和容易阅读
一个小提示:在JavaScript中不可以像上面的css这样写比较,比如下面这样
在JavaScript中,上面这个if的判断条件会变成以下流程
- 1 < a吗?两种可能,
true
或者false
、
true
/false
小于5吗?JavaScript开始隐式转换,true
变成1,false
变成0
- 1小于5,0也小于5,所以上面这个表达式并不会像数学上的范围表示一样运行
Last update: 2023-04-12