有没有办法获取应用于 HTML 片段或页面的所有 CSS 的列表?

发布于 2024-09-15 18:06:11 字数 208 浏览 3 评论 0原文

我知道使用 Firefox 的 Firebug 扩展等工具很容易获得应用于 HTML 中单个节点的 CSS。

但是有没有办法查看所有有效的 CSS在整个页面上,还是在较大的 HTML 片段上?

具体来说,我们正在将一个非常大的 CSS 文件清理为较小的模块,并希望找出某个页面上使用了哪些 CSS,因此我们可以将所有未使用的 CSS 移动到另一个模块。

I know it's easy to get the CSS that is applied to a single node in HTML, using tools like the Firebug extension for Firefox, etc.

But is there a way to see all the CSS that is in effect on an entire page, or a larger fragment of HTML?

Specifically, we are cleaning up our one extremely large CSS file into smaller modules and would like to find out what CSS is used on a certain page, so we can move all the non-used CSS to another module.

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(3

丿*梦醉红颜 2024-09-22 18:06:11

谢谢大家!这些是我现在根据您的建议查看的各种解决方案(这里为有相同问题的人收集):

Dust-Me 选择器(Firefox 插件)
这正是我所需要的。列出已使用和未使用的 CSS 选择器(对于当前页面或整个站点,在抓取之后),并且可以将两个列表转储为 CSV 文本。太棒了。
https://addons.mozilla.org/firefox/addon/5392/

CSS 用法(Firefox 插件)
https://addons.mozilla.org/firefox/addon/10704/

WARI - Web 应用程序资源检查器(Java 工具)
似乎只处理静态代码,而不是大多数使用 ajax 的 Web 应用程序中动态生成的 HTML - 不幸的是,这使得它毫无用处,至少对我来说
http://wari.konem.net/

CSS 冗余检查器(Ruby 脚本,需要 Rubygems 和 Hpricot)
http://code.google.com/p/css-redundancy-checker/

TopStyle(仅限 Windows 的应用程序,79.95 美元 (!!))
http://svanas.dynip.com/topstyle/

这些都是跨平台且免费的,除了对于TopStyle。

Thank you all! These are the various solutions I've looked at now from your recommendations (collected here for people with the same problem):

Dust-Me Selectors (Firefox Add-on)
This does exactly what I need. Lists used and unused CSS selectors (for the current page, or the entire site, after spidering), and can dump both lists as CSV text. Great.
https://addons.mozilla.org/firefox/addon/5392/

CSS Usage (Firefox Add-on)
https://addons.mozilla.org/firefox/addon/10704/

WARI - Web Application Resource Inspector (Java tool)
Appears to only handle static code, not dynamically generated HTML as is present in most web applications that use ajax – which, unfortunately, makes it useless, at least for me
http://wari.konem.net/

CSS Redundancy Checker (Ruby script, requires Rubygems and Hpricot)
http://code.google.com/p/css-redundancy-checker/

TopStyle (Windows-only application, $79.95 (!!))
http://svanas.dynip.com/topstyle/

These are all cross-platform and free, except for TopStyle.

离鸿 2024-09-22 18:06:11

就工具而言,您可以使用 css 使用插件对于萤火虫。它将分析页面中使用的 CSS。

或者您是否正在寻找一种更加编程化的方法?

As far as tools go, you could use the css usage plugin for firebug. It will analyze pages for used css.

Or were you looking for a way to do it more programmaticly?

暮倦 2024-09-22 18:06:11

您可以尝试 Dust-Me 选择器,它是firefox,如果您使用 firebug,正如您所说,您可能会发现有用 CSS 用法

You can try Dust-Me Selectors, it's add-on for firefox, if you use firebug, as you stated, you may find useful CSS Usage.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文