新颜色函数语法

CSS Color Module Level 4 引入了颜色函数的新语法,例如 rgb()和 hsl()。新语法省略了逗号,依靠空格来分隔颜色空间的每个通道。它还支持可选的 alpha 参数,从而不再需要额外的颜色函数,例如 rgba()和 hsla()。逗号分隔的形式现在被规范称为“遗留语法”。

/* 遗留语法 */
background-color: rgb(0, 0, 0);
color: rgba(0, 0, 0, 50%);

/* 新语法 */
background-color: rgb(0 0 0);
color: rgb(0 0 0 / 50%);

新窗口单位使用

现窗口单位

vw:选取浏览器窗口宽度的 1% 作为值
vh:选取浏览器窗口高度的 1% 作为值
vmin:选取 vw 或 vh 中的较小者作为值
vmax:选取 vw 或 vh 中的较大者作为值

使用性问题

正常状态

虽然这些单位在桌面浏览器上运行良好,但在移动浏览器上就会存在一些问题,窗口大小受动态工具栏存在与否的影响。尽管窗口大小可以更改,但 vw 和 vh 大小不会。因此,尺寸为 100vh 高的元素会从窗口中溢出。当向下滚动时,这些动态工具栏将缩回。在这种状态下,尺寸为 100vh 高的元素将覆盖整个窗口。让我们看图说话。

使用 vh 在动态工具栏中存在网页内容被截取的问题
使用 vh 在动态工具栏中存在网页内容被截取的问题

新窗口单位

为了解决这个问题,CSS 工作组规定了窗口的 3 种状态和他们的新单位。新增的 CSS 窗口单元用于处理带有动态工具栏的移动窗口。

大窗口
	定义:窗口大小假设任何动态扩展和缩回的 UA 接口被缩回
	单位:lvw、lvh、lvmin、lvmax、lvi、lvb(lv 前缀)
小窗口
	定义:窗口大小假设任何动态扩展和缩回的 UA 接口都可以扩展
	单位:svw、svh、svmin、svmax、svi、svb(sv 前缀)
动态窗口
	定义:当动态工具栏展开时,动态窗口等于小窗口的大小。当动态工具栏缩回时,动态窗口等于大窗口的大小。
	单位:dvw、dvh、dvmin、dvmax、dvi、dvb(dv 前缀)

那么大窗口和小窗口除非调整窗口本身的大小,否则这些窗口单位的大小是固定的。动态窗口是根据浏览器 UI 是否占用自动调整不被截取的大小,所以动态窗口的值在对应的 lv* 和 sv* 之间,让我们通过一个图片来更好地了解。

上述新增单位实现网页不被截取的状态
上述新增单位实现网页不被截取的状态

如何理解 vi 和 vb

至此,你可以很好理解各种前缀的 vw、vh、vmin、vmax,但 vi、vb 有什么作用呢?

单位 vi 是指视口在行内方向上的大小。对于典型的英文文本,行内方向是指宽度;从左到右书写。但是,对于典型的中文文本布局,行内方向是指高度;从上到下写。

单位 vb 是指视口在块方向上的大小。对于典型的英文文本,块方向是指高度;线条从上到下环绕。对于典型的中文文本,块方向是指宽度;从右到左换行。

所以 vi 和 vb 并不在中文板式的网页中常用,我认为大家能够善用好 vw、vh、vmin、vmax 就十分足够了

兼容性解决方案

通过查询我们发现主流浏览器支持上述新增属性,如果考虑其他浏览器问题有两个方案可供选择。

方案一:定义两个 height 覆盖不支持属性。

div {
	height: 100vh;
	height: 100svh;
}
方案二:使用媒体查询@supports 实现兼容。

@supports (height: 100svh) { 
	div {
		height: 100vh;
	}
}

建议使用第二种方案,因为是对整个包含height: 100svh的 css 属性兼容,可以节省代码量。

新变换属性使用

定义

对于变换 scale、rotate、translate 大家很熟悉,因为这些是在 css 中作为 transform 的子属性进行使用,而在 2022 年 8 月,Chromium 完成了使用单个 rotate, scale, translate 属性来对 CSS 变换进行更细粒度的控制。

/* 旧语法 */
div {
	transform: translateX(50%) rotate(30deg) scale(2);
}
/* 独立语法 */
div {
	translate: 50% 0;
	rotate: 30deg;
	scale: 2;
}

独立做的好处就是节省代码工作量,假如通过 hover 进行动画变换时,transform 部分属性我不需要变换(例如我只需要变换scale到 3 倍)时,就不需要在div:hover重新书写translateX 和 rotate属性了。

兼容性

结语

事实上,上面的内容已经被无数名前端爱好者发布,但他们的文章几乎都是不断转载,至于原创作者究竟是谁已无法溯源。而当我查看那些文章时,一个共性就是对内容阐述复杂,所以我通过更简明扼要的作图和文字,来平衡热爱前端的每个人的认知程度。