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

85

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

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

css 
— 罗杰·哈里伯顿
source
1
— 托尼查普曼

Answers:

17

我以前使用过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兼容（我刚刚安装了它）。

— j
source
2
是否可以导出所有未使用的东西都被删除的指定css文件的副本？
— rraallvv 2016年
1
@rraallw是的。这是唯一可以使用并且仍然尊重媒体查询的工具。它有一个烦人的错误，它会在输出CSS文件中乱写“ undefined”一词，但是快速查找'n replace可以解决此问题。工具运行后，点击每个文件表“未使用的选择器”选项卡上的“清理”按钮。它将生成您可以导出的CSS。
— Eric L.
2
附加页面不再存在。第一个链接重定向到第二个。
— 玛丽安
56

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

漂亮图片示例

在此处输入图片说明

— 塞萨尔·比利奇（Cesar Bielich）
source
很棒的工具...但是它似乎忽略了媒体查询。:(
— Eric L.
8
我已将扩展程序更新为支持的媒体查询。此外，使用过的关键帧/字体定义，甚至现在也支持某些IE hack。
— PaintyJoy
1
现在支持媒体查询。
— atheaos
2
这很棒。您甚至可以在DOM中选择一个元素，它将提供用于该特定容器的CSS。
— webnoob
2
当您找到解决问题的正确工具时，太安静了：)
— sinaza
10

（不是为Firefox，但也许这可以帮助某人）

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

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

  • 让您下载具有所有使用样式的组合CSS
  • 在弹出窗口中显示未使用的样式
  • 包括生成的样式
— 抢
source
很棒的工具，但它会忽略媒体查询CSS。合并后，我的网站不再响应。
— 乔纳斯T
“ CSS删除并合并”似乎已过时，无法在Chrome 67上使用
— 另一则
4

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

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

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

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

— 帕梅卡
source
3

SnappySnippet

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

— 穆巴沙尔
source
1
是的，但是它将类名更改为一些通用ID并不是很有帮助
— Shishir Arora
3

这是我使用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';

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

范例：

    /* 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; }
— 心房
source
如果可以用于将外部站点的CSS应用于我自己的页面，那将是很棒的。我不知道该怎么做...
— 约翰尼，为什么
2

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

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

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

— 赛德
source
1

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

— slacktracer
source
1

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

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

而已。现在，只要您想封装一个静态页面（例如，使其可移植或打算从其自己的iframe投放），只需单击书签，它将在当前页面上以覆盖图的形式显示所有使用过的CSS。单击阴影以关闭覆盖。

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

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

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

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

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

— Shashwat Sahai
source
0

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

— 坎德
source
但是，是否有现成的工具可以做到这一点？
— 罗杰·哈里伯顿
0

截至2020年9月，这个问题已有10年的历史了。提供的大多数解决方案不再起作用，或者链接的项目消失了。

但是，这个问题仍然非常相关，因为Google现在将页面速度用作其优先级指标之一。

在对列出的所有链接进行了大量研究之后，我找到了purgecss.com。这似乎是使用Angular，React，Vue等在现代Web应用程序/ SPA中清理未使用的CSS的最佳选择。还与PostCSS，Webpack，Grunt和Gulp建立了集成。

此外，UnCSS似乎仍然得以维护。它具有与PurgeCSS一样强大的功能，但没有集成到构建过程或单页javascript应用程序中。

— 布莱斯·豪森
source
-1

您也可以使用http://getcssusedinapage.com来获取页面中使用的CSS。它是免费，快速的，并且为您提供了许多详细信息以及最小化和优化的CSS代码，您只需在网站上复制+粘贴即可

— 乔尔
source
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.