2023年你可能不知道的css新特性

fox/ 2023年07月25日/ CSS教程/ 浏览 601

最近几年Web发展变化非常地大,相应的CSS的发展也可以说是神速,更值得的庆幸的是,现代Web浏览器对这些新的CSS特性支持度也非常的高。


《What's new in CSS and UI: I/O 2023 Edition》一文所列出的新特性清单有近 20 个,虽然有些是“新特性”,但其中有些特性并不怎么“新”,或许已在你的项目中,或许已接触过,只是不太了解而以。


在下面所列 CSS 新特性,其实早在以往分享的 CSS 特新性中早有出现,比如 容器查询、has() 伪类函数、动态视窗单位、首字下沉等。对于不怎么关注 CSS 的同学来说,这里所列清单都会感到是新的特性,但就我个人而言,近段时间接触的应该是 nth-of 、text-wrap:balance 、广色区域颜色空间、三角函数、视窗转换以及可定制组件中的锚点定位、离散属性过渡等。


它们主要分四个方面的,即:


1. 与下一代Web 响应式有

比如容器查询、样式查询、:has() 伪类函数、nth-of 、经典排版技术(text-wrap: balance)、首字下沉(initial-letter)、动态视窗单位、广色域(Wide-gamut)颜色空间、color-mix() 函数 等 9 个;


2. 与 CSS基础原理

比如 CSS 的嵌套、层叠、作用域、三角函数 和单个变换属性等 5 个;


3 .与可定制组件

比如弹出层(Popover)、锚点定位、下拉选择菜单(<selectmenu>)和 离散属性过渡 等 4 个;


4.与交互相关

比如滚动驱动的动画和视图转换等 2 个;


而且这些特性已经在个别,甚至是在大部分主流浏览器已经可以看到了,让 前端 开发者的工作变得更轻松。

发表评论

暂无评论,抢个沙发...

客服 工单