有没有办法获取应用于 HTML 片段或页面的所有 CSS 的列表?
我知道使用 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 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(3)
谢谢大家!这些是我现在根据您的建议查看的各种解决方案(这里为有相同问题的人收集):
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.
就工具而言,您可以使用 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?
您可以尝试 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.