最近几年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 个;
而且这些特性已经在个别,甚至是在大部分主流浏览器已经可以看到了,让 前端 开发者的工作变得更轻松。
-
css详解系列:10-Flex项目属性orderorder 属性 用来设置或检索弹性盒模型对象的项目(子元素)在容器中出现的順序。
-
css详解系列:11-Flex项目属性align-selfalign-self属性定义flex子项单独在侧轴(纵轴)方向上的对齐方式。
-
css实现点击切换图片效果的方法在css中我们可以使用伪类选择器来实现点击切换图片的效果,看看如何实现的。
-
css样式表的三种样式css(级联样式表)主要有三种样式定义方式
-
如何在css中实现样式优先级在css中,样式优先级是由一系列规则决定的,这些规则决定了当多个样式规则应用于同一个HTML元素时,哪个规则会优先生效。
-
css文本超出显示3个点的方法在css中,如果你想让超出特定长度的文本显示为三个点(...),你可以使用text-overflow属性,配合overflow和white-space属性。
暂无评论,抢个沙发...