仅提取特定页面中使用的 css

Extracting only the css used in a specific page

提问by Roger Halliburton

Say you had a dynamically generated site that has been worked on by too many people, past and present, and you now have a collection of shared stylesheets that contain over 20,000 lines of CSS. It isn't organized at all, there are some class and id-based selectors but also way too many tag-based selectors. And then say you have 100 templates that use these styles, via some controller.

假设您有一个动态生成的站点，过去和现在有太多人在该站点上工作，而您现在拥有一个包含 20,000 多行 CSS 的共享样式表集合。它根本没有组织，有一些基于类和 id 的选择器，但也有太多基于标签的选择器。然后假设您有 100 个使用这些样式的模板，通过某个控制器。

Is there a tool, something that works like Firebug perhaps, that you can point at a url and it would determine all of the applicable CSS selectors for that page and dump them to a file? Basically some way to rip apart the shared stylesheets on a page by page basis.

是否有一种工具，可能像 Firebug 一样工作，您可以指向一个 url，它会确定该页面的所有适用 CSS 选择器并将它们转储到文件中？基本上是一种逐页拆分共享样式表的方法。

采纳答案by ajcw

I've used Dust-Me Selectors before, which is a Firefox plugin. It's very easy to use and versatile as it maintains a combined list across a number of pages of which CSS values are used.

我之前使用过 Dust-Me Selectors，它是一个 Firefox 插件。它非常易于使用且用途广泛，因为它跨多个使用 CSS 值的页面维护了一个组合列表。

The downside is that I wasn't able to automate it to spider an entire site, so I ended up using it just on key pages/templates of my site. It is very useful nonetheless.

缺点是我无法自动化它来抓取整个网站，所以我最终只在我网站的关键页面/模板上使用它。尽管如此，它还是非常有用的。

http://www.sitepoint.com/dustmeselectors/

http://www.sitepoint.com/dustmeselectors/

https://addons.mozilla.org/en-US/firefox/addon/dust-me-selectors/

https://addons.mozilla.org/en-US/firefox/addon/dust-me-selectors/

Contrary to the comment above Dust-Me Selectors 2.2 is compatible with Firefox 3.6 (I've just installed it).

与上面的评论相反，Dust-Me Selectors 2.2 与 Firefox 3.6 兼容（我刚刚安装了它）。

回答by Cesar Bielich

Hands down the best one that actually does exactly what you want by only getting the used css on the page and allows you to simple copy it to your clipboard and paste it is this Chrome extension CSS Used

通过只在页面上获取使用过的 css 并允许您简单地将其复制到剪贴板并粘贴它是这个 Chrome 扩展CSS Used

Pretty Picture Example

漂亮的图片示例

回答by drudge

These look promising:

这些看起来很有希望：

• Unused-CSS.com-- Service that spiders your website and emails you the results
• CSS Usage-- Firebug addon

• Unused-CSS.com--抓取您的网站并将结果通过电子邮件发送给您的服务
• CSS 用法——Firebug 插件

回答by Rob

(Not for firefox but maybe this helps someone)

（不适用于 Firefox，但也许这对某人有帮助）

If you are working on chrome you can use this extension:

如果您正在使用 chrome，您可以使用此扩展程序：

CSS remove and combine(https://chrome.google.com/webstore/detail/css-remove-and-combine/cdfmaaeapjmacolkojefhfollmphonoh)

CSS 删除和组合（https://chrome.google.com/webstore/detail/css-remove-and-combine/cdfmaaeapjmacolkojefhfollmphonoh）

• lets you download a combined css with all used styles
• shows unused styles in popup window
• includes generated styles

• 允许您下载包含所有使用过的样式的组合 css
• 在弹出窗口中显示未使用的样式
• 包括生成的样式

回答by pamekar

I came across Uncss-Online- Unofficial server, very convenient for testing or one-off usage! I think its the best tool I've come across.

我遇到了Uncss-Online- 非官方服务器，非常方便测试或一次性使用！我认为它是我遇到的最好的工具。

UnCSS is a tool that removes unused CSS from your stylesheets. It works across multiple files and supports Javascript-injected CSS. It can be used in this way:

UnCSS 是一种从样式表中删除未使用的 CSS 的工具。它适用于多个文件并支持注入 Javascript 的 CSS。它可以这样使用：

• Copy & paste your HTML and CSS into provided boxes
• Click button
• Wait for magic to happen
• Unused CSS is gone, take the rest and use it!

• 将您的 HTML 和 CSS 复制并粘贴到提供的框中
• 单击按钮
• 等待魔法发生
• 未使用的 CSS 不见了，剩下的就用吧！

You can check their Github Pagefor other advanced ways to use this tool

您可以查看他们的Github 页面以了解使用此工具的其他高级方法

回答by rAthus

Here's my solution using JavaScript :

这是我使用 JavaScript 的解决方案：

var css = [];
for (var i=0; i<document.styleSheets.length; i++)
{
    var sheet = document.styleSheets[i];
    var rules = ('cssRules' in sheet)? sheet.cssRules : sheet.rules;
    if (rules)
    {
        css.push('\n/* Stylesheet : '+(sheet.href||'[inline styles]')+' */');
        for (var j=0; j<rules.length; j++)
        {
            var rule = rules[j];
            if ('cssText' in rule)
                css.push(rule.cssText);
            else
                css.push(rule.selectorText+' {\n'+rule.style.cssText+'\n}\n');
        }
    }
}
var cssInline = css.join('\n')+'\n';

In the end, cssInlineis a textual list of all the steelsheets of the page and their content.

最后，cssInline是页面中所有钢板及其内容的文本列表。

Example :

例子 ：

/* Stylesheet : http://example.com/cache/css/javascript.css */
.javascript .de1, .javascript .de2 { -webkit-user-select: text; padding: 0px 5px; vertical-align: top; color: rgb(0, 0, 0); border-left-width: 1px; border-left-style: solid; border-left-color: rgb(204, 204, 204); margin: 0px 0px 0px -7px; position: relative; background: rgb(255, 255, 255); }
.javascript { color: rgb(172, 172, 172); }
.javascript .imp { font-weight: bold; color: red; }

/* Stylesheet : http://example.com/i/main_master.css */
html { }
body { color: rgb(24, 24, 24); font-family: 'segoe ui', 'trebuchet MS', 'Lucida Sans Unicode', 'Lucida Sans', sans-serif; font-size: 1em; line-height: 1.5em; margin: 0px; padding: 0px; background: url(http://pastebin.com/i/bg.jpg); }
a { color: rgb(204, 0, 51); text-decoration: none; }
a:hover { color: rgb(153, 153, 153); text-decoration: none; }
.icon24 { height: 24px; vertical-align: middle; width: 24px; margin: 0px 4px 0px 10px; }
#header { border-radius: 0px 0px 6px 6px; color: rgb(255, 255, 255); background-color: rgb(2, 56, 89); }
#super_frame { min-width: 1100px; width: 1200px; margin: 0px auto; }
#monster_frame { -webkit-box-shadow: rgb(204, 204, 204) 0px 0px 10px 5px; box-shadow: rgb(204, 204, 204) 0px 0px 10px 5px; border-radius: 5px; border: 1px solid rgb(204, 204, 204); margin: 0px; background-color: rgb(255, 255, 255); }
#header a { color: rgb(255, 255, 255); }
#menu_2 { height: 290px; }

/* Stylesheet : [inline styles] */
.hidden { display: none; }

回答by Mubashar

SnappySnippet

SnappySnippet

There is an open source ad-on of chrome named SnappySnippetI found it lot better than other just extends the already available developer tools in chrome. You can even extract only one part of the page will all relevant css. Look at this stackoverflow post

有一个名为SnappySnippet 的开源 chrome插件，我发现它比其他插件要好得多，只是扩展了 chrome 中已经可用的开发人员工具。您甚至可以只提取页面的一部分将所有相关的 css。看看这个stackoverflow帖子

回答by cweiske

• uncss: Find Unused CSS- cli tool, uses phantomjs and executes JS on the page, can be used on URLs
• grunt-uncss- only works on static files
• (critical css- extracts CSS for elements visible in the browser window)

• uncss: Find Unused CSS- cli 工具，使用phantomjs，在页面上执行JS，可以在url上使用
• grunt-uncss- 仅适用于静态文件
• （关键 css- 为浏览器窗口中可见的元素提取 CSS）

回答by Syed

Check for PurifyCSS, and this for those who can handle CLI or Gulp/Grunt/Webpack

检查PurifyCSS，这对于那些可以处理 CLI 或 Gulp/Grunt/Webpack 的人

You can remove the unused style from single page or multiple page or from the entire project, even though the classes are being injected by javascript.

您可以从单个页面或多个页面或整个项目中删除未使用的样式，即使这些类是由 javascript 注入的。

If you can google, there are tons of resources out there from which you can learn about PurifyCSS.

如果你可以谷歌，那里有大量资源可以让你了解 PurifyCSS。

回答by thdoan

If you're dealing with single pages, you can also use my bookmarklet to quickly grab only the CSS that is actually used by the web page:

如果您正在处理单个页面，您还可以使用我的书签快速抓取网页实际使用的 CSS：

1. Go here(if this link is broken, you can also get it from pastebin).
2. Drag the big button under "Download Bookmarklet" onto your bookmarks toolbar.

1. 转到此处（如果此链接已损坏，您也可以从pastebin获取）。
2. 将“下载书签”下的大按钮拖到书签工具栏上。

That's it. Now whenever you want to encapsulate a static page (i.e., to make it portable or if you intend to serve it from its own iframe), just click on the bookmark and it will display all the used CSS on the current page in an overlay. Click on the shadow to close the overlay.

就是这样。现在，无论何时您想要封装静态页面（即，使其可移植，或者您打算从其自己的 iframe 中提供服务），只需单击书签，它就会在叠加层中显示当前页面上所有使用的 CSS。单击阴影以关闭叠加层。

One good thing with this solution is that it supports responsive pages since the media queries are also extracted. As a bonus, media queries are sorted by viewport size specificity (e.g., @media (max-width: 767px)will come after@media (max-width: 1023px)).

这个解决方案的一个好处是它支持响应式页面，因为媒体查询也被提取。作为奖励，媒体查询按视口大小特性排序（例如，@media (max-width: 767px)将在之后@media (max-width: 1023px)）。

If there's a need, I can also add an option to minify the generated CSS. Since I've only used this bookmarklet for my own needs, it hasn't been widely tested, so please report any issues in the comments.

如果有需要，我还可以添加一个选项来缩小生成的 CSS。由于我仅将这个书签用于我自己的需要，它还没有经过广泛的测试，所以请在评论中报告任何问题。

NOTE: To make this bookmarklet work with local files in Chrome, add --allow-file-access-from-filesto the Chrome shortcut target. Example:

注意：要使此书签与 Chrome 中的本地文件一起使用，请添加--allow-file-access-from-files到 Chrome 快捷方式目标。例子：

"C:\Program Files\Google\Chrome\Application\chrome.exe" --allow-file-access-from-files