您当前的位置:首页 > 电脑百科 > 程序开发 > 语言 > CSS

2022 最受欢迎的 CSS 变量、属性、函数以及颜色分别是什么

时间:2022-10-24 16:08:41  来源:今日头条  作者:前端小智

自定义属性


 

自定义属性(也称为css变量)的使用量大增,2021年和2022年之间的增长也不例外。43%的页面,包括桌面和移动端,都在使用自定义属性,并且至少有一个var()函数。


 

正如去年所看到的,wordPress/ target=_blank class=infotextkey>WordPress是最常见的自定义属性名称的驱动者,这些很容易被-wp-*前缀所识别。继这些之后,我们再次发现了很多颜色名称 –-white、–-blue等等,用来指定该颜色的特定色调。

类型


 

自定义属性的值包括一个类型。例如,--red: #EF2143 是给 --red 分配一个颜色值,而--multiplier: 2.5是分配一个数字值。从去年开始,这些类型有了一些变化。我们知道,设置颜色是自定义属性最常见的用途,而且发现颜色类型的页面数量正在增加。然而,就使用的份额而言,这已经从40%下降到30%。进入这个10%的是calc(),和作为值类型的images。。

属性


 

虽然包括这些属性的页面数量增加了,但将自定义属性作为一个值的属性仍然与去年的顺序大致相同。自定义属性最有可能被用于color,这并不奇怪,因为创建颜色方案是这种功能的一个明显用途。

然而,使用var()函数来设置 font-size 已经从列表中的第十位升至第五位,而设置justify-content的对齐值也进入了前十位。在2021年,有5%的移动页面和4%的桌面页面使用自定义属性来设置这个对齐值,现在已经跃升到20%。从数据上看,这一增长似乎有一部分是由于WordPress的使用,例如,有5%的页面使用-navigation-layout-justify自定义属性。

函数


 

我们看到calc()已经开始作为自定义属性的一个值类型而引人注目,而且它是迄今为止最常见的以这种方式使用的函数。紧随其后的是 linear-gradient() 和用于设置带有阿尔法通道的RGB颜色值的 rgba() 函数。在这之后是用于过渡和动画的各种函数,显示了自定义属性在这一领域的使用越来越多。

复杂性

在其他自定义属性的值中包含自定义属性是可能的。考虑一下这个例子:

:root {--base-hue: 335; /* depth = 0 */--base-color: hsl(var(--base-hue) 90% 50%); /* depth = 1 */--background: linear-gradient(var(--base-color), black); /* depth = 2 */

正如例子中的注释所显示的,这些子引用被链在一起的越多,自定义属性的深度就越大。


 

正如在2021年看到的,绝大多数自定义属性的深度为零,这意味着它们的值中不包括其他自定义属性的值。深度为1的属性数量有小幅增加,深度为2的数量则有小幅减少。然而,从数据上看,我们对自定义属性的使用在过去一年中并没有变得更加复杂。



Tags: CSS   点击:()  评论:()
声明:本站部分内容及图片来自互联网,转载是出于传递更多信息之目的,内容观点仅代表作者本人,不构成投资建议。投资者据此操作,风险自担。如有任何标注错误或版权侵犯请与我们联系,我们将及时更正、删除。
▌相关推荐
12 个超级实用的 CSS 技巧
user-selectuser-select 属性可以用来控制用户是否能够选择文本。<div> <p>You can&#39;t select this text.</p></div><p>You can select this text.</p>CSS:div { width...【详细内容】
2023-12-19  Search: CSS  点击:(129)  评论:(0)  加入收藏
Vue里使用Tailwind CSS,这不是耍流氓吗
前言随着前端的发展,对前端页面的要求越来越高,而css的功能也越来越强大,但对于写css样式来说却是非常头疼的的事。因为前端页面的动画要求以及页面布局的精细管控,需要写大量的...【详细内容】
2023-12-11  Search: CSS  点击:(163)  评论:(0)  加入收藏
新 CSS Math方法:Rem() 和 Mod()
CSS 添加了许多新的数学函数来补充旧有的函数(如 calc() 和最近的 clamp() )。这些函数最终都表示一个数值,但其工作原理的细微差别并不总是一开始就很清楚。本文介绍每个函数...【详细内容】
2023-11-23  Search: CSS  点击:(254)  评论:(0)  加入收藏
使用 CSS Grid 的响应式网页设计:消除媒体查询过载
前言你是否厌倦了在实现响应式网站时需要管理多个媒体查询?说再见复杂的代码,拥抱更简单的解决方案吧:CSS Grid。在这篇文章中,我们将踏上一场激动人心的 CSS Grid 之旅,发现它如...【详细内容】
2023-11-10  Search: CSS  点击:(277)  评论:(0)  加入收藏
作用域 CSS 回来了,你知道吗?
几年前,消失的作用域 CSS,如今它回来了,而且比以前的版本要好得多。更好的是,W3C规范基本稳定,现在Chrome中已经有一个工作原型。我们只需要社区稍微关注一下,引诱其他浏览器构建...【详细内容】
2023-09-27  Search: CSS  点击:(254)  评论:(0)  加入收藏
探索 CSS 颜色的新功能!你真的掌握了吗?
CSS Colors Module Level 4:旨在扩展 CSS 中颜色相关的特性和功能。它提供了一些新的颜色表示方式、自定义调色板、透明度的控制等功能,并且对 CSS 中现有的颜色模块作出了一...【详细内容】
2023-06-15  Search: CSS  点击:(394)  评论:(0)  加入收藏
九个你不知道的 CSS 伪元素
CSS 伪元素是一项强大的功能,它允许您为所选元素的特定部分设置样式,而无需额外的 JavaScript 代码。 虽然许多开发人员都熟悉常用的伪元素,如 ::before 和 ::after,但还有一些...【详细内容】
2023-05-23  Search: CSS  点击:(267)  评论:(0)  加入收藏
使用 CSS 提升你的 HTML 文档
当你编写文档时,无论是为开源项目还是技术写作项目,你都应该有两个目标:文档应该写得好,同时要易于阅读。前者通过清晰的写作技巧和技术编辑来解决。第二个目标可以通过对 HTML...【详细内容】
2023-04-17  Search: CSS  点击:(249)  评论:(0)  加入收藏
纯 CSS 实现一个计时器
CSS 现在可不仅仅只是改一个颜色这么简单,还可以做很多交互,比如做一个功能齐全的计时器?样式上并不复杂,主要是几个交互的地方 数字时钟的变化 开始、暂停操作 重置操作如何仅...【详细内容】
2023-04-17  Search: CSS  点击:(180)  评论:(0)  加入收藏
十个提高你网页设计能力的 CSS 技巧
CSS 有助于创建美观且响应迅速的网页,使这些网页在多种设备上保持一致。有大量的 CSS 技巧和技术可用于创建令人惊叹的网页。 在今天这篇文章中,我们将通过代码示例讨论10个有...【详细内容】
2023-03-20  Search: CSS  点击:(186)  评论:(0)  加入收藏
▌简易百科推荐
12 个超级实用的 CSS 技巧
user-selectuser-select 属性可以用来控制用户是否能够选择文本。<div> <p>You can&#39;t select this text.</p></div><p>You can select this text.</p>CSS:div { width...【详细内容】
2023-12-19  前端充电宝  微信公众号  Tags:CSS   点击:(129)  评论:(0)  加入收藏
原生CSS嵌套使用,你学明白了吗?
如果你是一个前端开发人员,那么你应该使用过CSS预处理器以及预处理器中的嵌套特性。它一直是一个受欢迎的功能,我一直都在使用CSS预处理器。今年所有的主流浏览器都支持原生CS...【详细内容】
2023-12-06  南城大前端  微信公众号  Tags:CSS   点击:(183)  评论:(0)  加入收藏
CSS_Flex 那些鲜为人知的内幕
前言Flex想必大家都很熟悉,也是大家平时在进行页面布局的首选方案。(反正我是!)。不知道大家平时在遇到Flex布局属性问题时,是如何查阅并解决的。反正,我每次记不住哪些属性或...【详细内容】
2023-12-06  前端柒八九  微信公众号  Tags:CSS   点击:(140)  评论:(0)  加入收藏
CSS:这几个伪类,你用了吗
## :root 伪类:root 伪类是匹配文档的根元素,很多时候,根元素也就是 html 元素,用 root 伪类来匹配根元素,目的就是解决根元素不是 html 的场景,比如根元素是 svg 的时候。 root...【详细内容】
2023-11-30  读心悦  微信公众号  Tags:CSS   点击:(169)  评论:(0)  加入收藏
让你开发更舒适的 Tailwind 技巧
免费体验 Gpt4 plus 与 AI作图神器,我们出的钱 体验地址:体验使用 Tailwind CSS,我避免了在 React 项目中复制大量 CSS 文件的麻烦,使网页开发变得更加迅速高效。虽然 Tailwind...【详细内容】
2023-11-28  大迁世界  微信公众号  Tags:Tailwind   点击:(177)  评论:(0)  加入收藏
Display和Visibility的区别,你了解了吗?
采用CSS实现元素隐藏的方法有很多种,比如定位到屏幕之外、透明度变换等。而常见的两种方式是将元素设置为display:none或者visibility:hidden。元素样式设置为display:none当...【详细内容】
2023-11-27  读心悦  微信公众号  Tags:Display   点击:(172)  评论:(0)  加入收藏
新 CSS Math方法:Rem() 和 Mod()
CSS 添加了许多新的数学函数来补充旧有的函数(如 calc() 和最近的 clamp() )。这些函数最终都表示一个数值,但其工作原理的细微差别并不总是一开始就很清楚。本文介绍每个函数...【详细内容】
2023-11-23  大迁世界  微信公众号  Tags:CSS   点击:(254)  评论:(0)  加入收藏
CSS 新功能:让编码更高效
CSS 是一种不断发展的语言。每一次迭代,它都会变得越来越好。因此,了解最新的 CSS 功能非常重要,这样你才能在项目中使用它们,减少对第三方库的依赖。本文将介绍一些即将推出的...【详细内容】
2023-11-16  大迁世界  微信公众号  Tags:CSS   点击:(165)  评论:(0)  加入收藏
使用 CSS Grid 的响应式网页设计:消除媒体查询过载
前言你是否厌倦了在实现响应式网站时需要管理多个媒体查询?说再见复杂的代码,拥抱更简单的解决方案吧:CSS Grid。在这篇文章中,我们将踏上一场激动人心的 CSS Grid 之旅,发现它如...【详细内容】
2023-11-10  前端YUE  微信公众号  Tags:CSS   点击:(277)  评论:(0)  加入收藏
2024年了,别只使用React,需要学习一下Vue,不然没出路了
最近,我的朋友因为不熟悉 Vue.js 而未能通过面试。她平时工作中大部分时间都在使用React,所以也懒得去了解其他前端框架。世界上所有的前端框架我们都应该熟悉吗?不,这是极其不...【详细内容】
2023-11-08  web前端开发  微信公众号  Tags:Vue   点击:(295)  评论:(0)  加入收藏
站内最新
站内热门
站内头条