持续创作,加快生长!这是我参与「日新计划 10 月更文挑战」的第7天,点击检查活动概况

介绍

CSS 是用于布局、格式化网页和其他媒体的言语。它和用于结构的 HTML 和用于行为的 JavaScript 是网络的三种主要言语。

在过去的几年中,呈现了一系列新的 CSS 功能。其间许多是从开发人员现已运用 JavaScript 或预处理器所做的事情中取得灵感的,而另一些则供给了几年前不或许完结的事情的办法。供给新功能是一回事,但开发人员是否真的在他们的生产网页和应用程序中运用它们?

类名


与 2020 年和 2021 年一样,网络上最受欢迎的类名是 active,Font Awesome 的 fa,fa-* 前缀仍然排在第二和第三。

wp-* 类名现已攀升至第四位,它们现在呈现在 31% 的页面上,2021 年为 20%,这些在新的 WordPress 块编辑器中运用,还有比如 has-large-font-size 的类名。

clearfix 现已从前 20 名中消失了,现在只呈现在 10% 的页面上,这十分清楚地标明根据起浮的布局正在从网络上消失。

ID


content 再次成为最盛行的 ID 称号,其次是 footer 和 header。以 fb_ 最初的 ID 表明运用 Facebook 小部件。

2021,7% 的页面上呈现了以 rc- 最初的 ID,标明运用了谷歌的 reCAPTCHA 体系,虽然被 Facebook 的 ID 挤出前十位,但仍然以同样的频率呈现。

伪类


:hover、:focus 和 :active 用户操作伪类再次位居前三名。否定伪类 :not() 也继续盛行,:root 或许用于创建自定义特点。

上一年有人指出 :focus-visible,一种以更契合用户希望的方式对焦点元素进行款式设置的办法呈现在不到 1% 的页面中。自 2022 年 3 月以来,该特点已在一切三个主要引擎中可用,现在在 10% 的桌面和 9% 的移动页面上都能够找到。

伪元素

2022 最受欢迎的 CSS 类名、ID 和挑选器是什么


咱们过滤掉了任何带前缀的,特定于浏览器的伪元素,这些通常用于挑选界面组件或浏览器的部分。

自上一年以来,运用 ::before 和 ::after 有所添加。这些用于将生成的内容刺进到文档中。通过检查 content 特点的运用,能够看到它最常用于刺进空字符串,用于款式意图。生成的内容是一种无需添加元素即可设置网格区域款式的办法,或许这有助于这些特点的运用量添加。

伪元素 ::marker 运用率现在现已达到 1%,这标明人们正在慢慢开端利用挑选和款式列表符号的才能。

特点挑选器


最受欢迎的特点挑选器是 type,呈现在 54% 的页面上。然后分别是 class 37%、disabled 25% 和 dir 17% 呈现在页面上的份额。

Sass

2022 最受欢迎的 CSS 类名、ID 和挑选器是什么


像 Sass 这样的预处理器能够被看作是开发人员运用 CSS 无法完成的一个很好的目标。但是,跟着 CSS 越来越强壮,开发人员的一个常见问题是咱们是否还需要运用 Sass。咱们能够从自定义特点运用的添加中看出,一种常见的预处理器运用是拥有变量或常量的才能——而现在有了内置的 CSS 等价物。


CSS 嵌套的未来规范目前也正在 CSS 工作组开发和评论中。嵌套在 SCSS 表中很常见,能够通过查找 & 字符来识别。

参考资料

  • almanac.httparchive.org/en/2022/css