Lainbo's Blog拙见
工具应用
前端技术
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)
- 第三个值是一个颜色值
- 第四个值是一个百分比（可选），可以看上面第一行代码，就没写这个值
- 第六个值为第二个颜色
例子
是不是有点眼熟？看上去像组件库的配色方式，未来兼容性好起来的时候，就可以使用这个来定义组件库的颜色了。
这里的例子都是某个颜色和白色混合，深色模式是不是就可以和黑色混合，还有一些花里胡哨的情况下可以两个彩色混合，不过这对于并不精通色彩空间和调色的人来说，可能根本无法预测混合的结果。
@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