有没有办法检查哪些CSS样式正在使用或不在网页上使用

想知道当前在网页上使用哪些 CSS 样式。

想知道当前在网页上使用哪些 CSS 样式。

104

更新于 2022 年 7 月-似乎 Google 已删除下面的选项 # 1(已删除审核选项卡,并添加了 Lighthouse 和 Recorder)

Google Chrome 有两种方法来检查未使用的 CSS

1.审核选项卡:& gt;右键单击页面上的 + Inspect 元素,找到“审核”选项卡,然后运行审核,确保选中“网页性能”。

列出所有未使用的 CSS 标签-见下图。

Screen Shot of Chrome's Audit Tool

更新:— — — — — — — — — — — — — — — — 或者 — — — — — — — — — — — — — — —

2.Coverage 选项卡:& gt;右键单击页面上的 + Inspect 元素,找到最右边的三个点(图像中圈出)并打开 Console Drawer(或点击 Esc),最后单击抽屉左侧的三个点(图像中圈出)以打开 Coverage 工具。

Chrome 推出了一个工具来查看未使用的 CSS 和 JS-Chrome 59 Update允许您开始和停止录制(图像中的红色正方形),以便更好地覆盖页面上的用户体验。

显示文件中所有使用和未使用的 CSS / JS

见下图。

Example of Coverage tool in Chrome

59

安装 Firebug 的CSS Usage add-on并在该页面上运行它。它会告诉您该页面正在使用和不使用哪些样式。

41

只是为了完整性,因为它在评论中被要求-还有Chrome中的 CSS 审计工具现在用于相同的目的。

http://meeech.amihod.com/very-useful-find-unused-css-rules-with-google
13

查看UnCSS。它有助于创建使用过的 CSS 的 CSS 文件。

本站系公益性非盈利分享网址,本文来自用户投稿,不代表码文网立场,如若转载,请注明出处

(75)
“$”的keyCode是什么
上一篇
如何在JavaDateUtils.parseDate中识别祖鲁时区
下一篇

相关推荐

  • css预编译器: center;}

    CSS预编译器是一种用于构建CSS的工具,它可以将CSS代码转换为更易于管理和维护的格式。它们可以使CSS代码更加灵活,更易于重用,并且可以帮助开发人员更轻松地组织和管理CSS代码。…

    2023-01-05 06:29:43
    0 35 34
  • css 对勾:如何利用CSS实现精美的界面设计

    CSS 对勾是一个用于网页设计的常见图形,它可以用来表示选择、标记或批准。它可以使用 CSS 的 `:before` 和 `:after` 伪元素来创建,以下是一个示例代码:…

    2023-01-28 02:46:22
    0 17 73
  • css 不可点击让你的网页更安全!

    CSS 不可点击的方法有两种:使用 pointer-events 属性:…

    2023-01-22 11:51:22
    0 61 96
  • css 圆形渐变:Welcome

    CSS 圆形渐变是一种圆形的渐变效果,它使用 CSS3 的 `radial-gradient()` 函数来实现。它允许你在圆形中创建渐变,以此来达到你想要的效果。…

    2023-02-05 15:17:57
    0 10 74
  • css页面布局:CSS页面布局实战

    CSS页面布局是使用CSS来控制元素在页面中的位置,大小,形状和外观。它可以帮助我们更好地控制页面的布局,使其更加美观,更易于维护。…

    2023-01-06 04:33:24
    0 25 20
  • css技术:标题

    CSS(Cascading Style Sheets)是一种用于定义HTML文档样式的样式表语言。它可以控制文本格式、字体、颜色、图像位置和布局等。CSS可以在HTML文档中通过内联样式,内部样式表或外部样式表来定义样式。…

    2023-01-02 15:38:58
    0 27 68
  • css怎么调图片大小使用CSS调整图片大小

    使用CSS调整图片大小,可以使用width和height属性。代码示例:…

    2023-02-06 10:48:50
    0 12 14
  • css炫酷特效:Cool Effects

    示例示例CSS炫酷特效是指使用CSS来创建动态、交互式的效果,如动画、3D效果、转换效果、过渡效果等。以下是一个CSS 3D旋转翻转效果的示例代码:…

    2023-02-09 06:12:30
    0 72 95

发表评论

登录 后才能评论

评论列表(2条)