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

type

status

date

slug

summary

关于颜色的书写格式

lab(), hwb(), lch(), oklch() 都只支持空格分隔

@layer - Chrome99+

@layer CSS 命令用于声明级联层，并且可以用于定义多个级联层的优先顺序。这样就可以很好的区分组件库的样式权重和自己写的样式权重，不需要再去到处加!important了

可以用这个功能来加载组件库的样式

但是写的位置非常的重要，在规范中有讲到

任何 @import 规则必须位于样式表中所有其他有效的 @规则和样式规则之前（忽略 @charset 和空的 @layer 定义），并且在其和前一个 @import 规则之间不能有其他有效的 @规则或样式规则，否则该 @import 规则是无效的。

css也想到了肯定有人乱写，比如这样

base, components都声明了2次，这种情况下以第一次为准，后面的会被忽略，也就成了

所以framework在更后面出现，framework的权重更高

嵌套写法

要定义嵌套中的layer优先级，就在在嵌套中写

优先级可以总结为

单层layer，后面的优先级 > 前面的

嵌套layer，外层的优先级 > 内层的

layer外面的普通css优先级 > layer内的

svh、lvh 和 dvh单位 - Chrome108+

解释：100vh在移动端可能出现不正确的表现，如下图，这时可以使用新的单位

其实和这3个单位一起的还有很多

The large viewport units（大视口单位）：lvwlvh, lvi, lvb, lvminlvmax ，前缀是 lv，意为 large viewport

The small viewport units（小视口单位）：svw, svh, svi, svb, svminsvmax，前缀是 sv，意为 small viewport

The dynamic viewport units（动态视口单位）：dvw, dvh, dvi, dvb, dvmindvmax，前缀是 dv，意为 dynamic viewport

翻译成人话：

大视口（Large Viewport）：视口大小假设任何动态扩展和缩回的 UA 界面都收回去了

小视口（Small Viewport）：视口大小假设任何动态扩展和缩回的 UA 界面都展开了

图片或许能更好理解

理解了大视口与小视口之后，再理解动态视口就轻松了些。

简单而言，动态视口的意思是：

动态工具栏展开时，动态视口等于小视口的大小

当动态工具栏被缩回时，动态视口等于大视口的大小

因此，也就能得到下面这张图：

和之前的视口单位对标关系比较好理解

新的动态单位	以前的单位
`dvh`	`vh`
`dvw`	`vw`
`dvmax`	`vmax`
`dvmin`	`vmin`

剩下，dvi 和 dvb 。其实，在之前也有 vi 和 vb 两个单位，主要是和书写方向有关，如果没有书写方向上的需求，可以跳过：

vi：vi 代表 Viewport Inline，代表文档的内联方向。在水平书写方向上，这对应于视口的宽度，而在垂直书写方向上，这表示视口的高度。记住 inline 方向的简单方法是记住它与文本的方向相同。

vb：vb 代表 Viewport block，代表文档的块方向。这与 vi 水平书写方向相反，这将对应于视口高度，而在垂直文档中，这将表示视口的宽度。

总结一下，估计未来dvh将会非常广泛的使用, 如果你希望尝鲜, 可以选择使用polyfill

使用库https://github.com/joppuyo/large-small-dynamic-viewport-units-polyfill

或者如果用的不多, 手写CSS代码

aspect-ratio - Chrome88+

解释：设置宽高比

容器查询 - Chrome106+

解释：实时匹配容器的尺寸

首先，我们都知道媒体查询，他是根据屏幕尺寸来的

容器查询分为两部分

一、 `container-type` 配合下面这些单位使用

container-type有三个值，用于给一个元素建立容器查询

单位名称	释义
cqw	表示容器查询宽度（Container Query Width）占比。1cqw等于容器宽度的1%。假设容器宽度是1000px，则此时1cqw对应的计算值就是10px
cqh	表示容器查询高度（Container Query Height）占比。1cqh等于容器高度的1%。
cqi	表示容器查询内联方向尺寸（Container Query Inline-Size）占比。默认情况下，Inline-Size指的就是水平方向，对应的是宽度，因此，1cqi通常可以看成是容器宽度的1%
cqb	表示容器查询块级方向尺寸（Container Query Block-Size）占比。默认情况下，Block-Size指的就是垂直方向，对应的是高度，因此，1cqb通常可以看成是容器高度的1%
cqmin	表示容器查询较小尺寸的（Container Query Min）占比，例如容器尺寸是300px*400px，则100cqmin对应的是尺寸较小的宽度300px，而非高度
cqmax	表示容器查询较大尺寸的（Container Query Min）占比

从某种程度上讲，cqw、cqh、cqmin、cqmax单位和vw、vh、vmin、vmax单位语法和含义是一致的，只是一个是相对于容器尺寸，另外一个是相对于视区（ViewPort）尺寸。

比如我们有这样一个HTML结构

和这样一段css

此时，p标签中的文字尺寸，将始终占container宽度的5%，而这个container 的宽度可以是动态的，这样就实现了动态的文字大小。

container-type 可以将一个元素声明为容器元素，有点像定位的时候，要先在外层加上position:relative 的感觉差不多，如果要使用这些容器查询的单位，则需要在外层元素上加上container-type 的声明，这时这些容器查询的单位才知道自己在相对于哪一个元素进行匹配

二、 `@container`

解释：当元素在某种尺寸时，需要改动很多样式的时候，就可以使用这个规则

和他搭配的还有一个container-name 属性