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


Extracting only the css used in a specific page

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

是否有一个工具(可能类似于Firebug)可以指向一个URL，它将确定该页面的所有适用CSS选择器并将其转储到文件中？ 基本上是一种逐页撕开共享样式表的方法。

相关讨论

仅通过在页面上获得使用过的CSS即可传递实际上可以真正实现所需功能的最佳工具，并允许您将其简单地复制到剪贴板并粘贴到此Chrome扩展CSS中

漂亮图片示例

enter image description here

相关讨论

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

不利的一面是我无法使其自动完成整个网站的搜索，因此我最终仅在网站的关键页面/模板上使用它。尽管如此，它还是非常有用的。

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

https://addons.mozilla.org/zh-CN/firefox/addon/dust-me-selectors/

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

相关讨论

这些看起来很有希望：

  • Unused-CSS.com-扩展您的网站并通过电子邮件将结果发送给您的服务
  • CSS用法-Firebug插件
相关讨论

(不是为Firefox，但也许这可以帮助某人)

如果您使用的是chrome，则可以使用以下扩展名：

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

  • 可让您下载所有已使用样式的组合CSS
  • 在弹出窗口中显示未使用的样式
  • 包括生成的样式
相关讨论

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

UnCSS是一种可从样式表中删除未使用的CSS的工具。它可以跨多个文件工作，并支持注入Javascript的CSS。可以通过以下方式使用：

  • 将HTML和CSS复制并粘贴到提供的框中
  • 点击按钮
  • 等待魔术发生
  • 未使用的CSS消失了，剩下的就用吧！

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

相关讨论

SnappySnippet

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

相关讨论

  • uncss：查找未使用的CSS-cli工具，使用phantomjs并在页面上执行JS，可在URL上使用
  • grunt-uncss-仅适用于静态文件
  • (关键CSS-为浏览器窗口中可见的元素提取CSS)

尝试使用此工具，这只是一个简单的js脚本
https://github.com/shashwatsahai/CSSExtractor/
该工具可帮助您从特定页面获取CSS，该页面列出了所有活动样式的来源，并将其保存到JSON中，其中来源为键，规则为值。
它从href链接加载所有CSS，并告诉所有从中应用的样式。
您可以使用任何名称将输出保存在JSON文件中。

检查PurifyCSS，这适用于可以处理CLI或Gulp / Grunt / Webpack的用户

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

如果您可以使用Google进行搜索，那么这里有大量的资源，您可以从中了解PurifyCSS。

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
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('
/* 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+' {
'+rule.style.cssText+'
}
');
        }
    }
}
var cssInline = css.join('
')+'
';

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

范例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
/* 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; }
相关讨论

如果您要处理的是单个页面，则还可以使用我的小书签快速仅捕获网页实际使用的CSS：

  • 转到此处(如果此链接断开，您也可以从pastebin获取它)。
  • 将"下载书签"下的大按钮拖到书签工具栏上。

    • 而已。现在，只要您想封装静态页面(例如，使其可移植或打算从其自己的iframe投放)，只需点击书签，它就会在当前页面上以叠加层显示所有使用过的CSS。单击阴影以关闭覆盖。

    此解决方案的优点是它支持响应页面，因为还可以提取媒体查询。另外，媒体查询按视口大小的特定性排序(例如，@media (max-width: 767px)将排在@media (max-width: 1023px)之后)。

    如果有需要，我还可以添加一个选项来缩小生成的CSS。由于我只是根据自己的需要使用了此书签，因此尚未经过广泛测试，因此请在评论中报告任何问题。

    注意：要使此小书签可以在Chrome中使用本地文件，请将--allow-file-access-from-files添加到Chrome快捷方式目标。例：

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

    此Firefox扩展程序可能会解决您的问题，" Dust-Me Selectors"。还有一个名为CssCleaner或CssHelper的微型台式机应用程序，但我找不到它的链接...(只是很久以前在我的机器上下载了它，以完成类似的任务)

    嗯。通过使用CSS文件的服务器端解析来提取各种CSS选择器，然后在浏览器中将它们作为jQuery选择器运行，我会对此施加一些蛮力。不是很优雅，但是应该工作吗？

    相关讨论