Fatal编程技术网
  • css/
  • 如何仅提取给定网页上使用过的CSS，并将其合并到单独的样式表中？

如何仅提取给定网页上使用过的CSS，并将其合并到单独的样式表中？

css

如何仅提取给定网页上使用过的CSS，并将其合并到单独的样式表中？,css,Css,我有一个网站，它的样式表正变得势不可挡，而且有整整50%到90%左右没有在某些页面上使用。我不想有23个单独的阻塞CSS表，而是想找出我想要定位的页面上使用的是哪些，并将它们导出到一个表中 我已经看到一些问题，建议“灰尘我选择器”或类似的附加组件，这将告诉什么选择器是和没有被使用；但那不是我想要的。我需要能够将所有使用过的样式从该特定页面的所有图纸导出到一个新的图纸中，该图纸可用于替换其他23个图纸。解决方案应能够支持响应性网站（媒体电话）。我的目标网站页面是： 我发现：但这是一项有偿服务，我需

我有一个网站，它的样式表正变得势不可挡，而且有整整50%到90%左右没有在某些页面上使用。我不想有23个单独的阻塞CSS表，而是想找出我想要定位的页面上使用的是哪些，并将它们导出到一个表中

我已经看到一些问题，建议“灰尘我选择器”或类似的附加组件，这将告诉什么选择器是和没有被使用；但那不是我想要的。我需要能够将所有使用过的样式从该特定页面的所有图纸导出到一个新的图纸中，该图纸可用于替换其他23个图纸。解决方案应能够支持响应性网站（媒体电话）。我的目标网站页面是：

我发现：但这是一项有偿服务，我需要免费服务

我遇到的下一个最接近的事情是，但这并不是样式表。事实上，它完全忽略了它们，最终我在网站的响应能力方面遇到了问题。很多时候，这个网站只是崩溃

如果有人以前必须这样做，并且可以推荐方向，我不介意使用编程解决方案。

Opera软件在Github上发布了一个CSS爬虫，声称它可以找到未使用的和重复的选择器。如果您熟悉命令行工具，它可能会起作用

你的房间怎么样

步骤：

  • 在Firefox中访问您的页面
  • 单击Firebug中的“CSS使用”选项卡
  • 单击“扫描”按钮
  • 单击粗体文件名
  • 将CSS选择器的页面保存到磁盘
    • 。不确定媒体查询或它是否能在您的网站上运行，并且它可能不会保留
    -webkit
    等，但它可能会让您部分实现。

    （删除我对RwwL答案的评论，使其成为一个完整的答案）

    UnCSS，无论是node.js还是作为咕噜或咕噜任务，都能够通过媒体查询数组中的页面数组列出使用过的CSS规则

    uncss:
    咕噜咕噜的uncss:
    吞咽uncss：

    多页：

    您可以将
    文件
    作为参数传递给3个插件中的任何一个，如：

    var files   = ['my', 'array', 'of', 'HTML', 'files'],
    options = { /* (…) */ };

uncss(files, options, function (error, output) {
    console.log(output);
});
    避免：

    URL（数组）：
    要使用Phantom加载的URL数组（位于已传递的文件之上，如果有）。
    注意：此功能已弃用，您可以直接将URL作为参数传递


    考虑媒体查询和响应：

    媒体（阵列）：
    默认情况下，UnCSS只处理带有媒体查询“all”、“screen”的样式表以及没有媒体查询“all”、“screen”的样式表。在此指定要包含的其他内容

    您可以添加样式表，忽略其中一些，添加内联CSS和许多其他选项，如
    htmlroot


    剩余问题：

    1/条件类如果您将它们用于IE9-。在WebKit PhantomJS环境中，它们显然是不匹配的

    HTML:
<!--[if IE 9]><html class="ie9 lte-ie9" lang="en"><![endif]--> <!-- teh conditional comment/class -->

CSS:
.ie9 .some-class { property: value; ] /* Only matched in IE9, not WebKit PhantomJS */

    HTML：
CSS:
.ie9.某些类{property:value；]/*仅在ie9中匹配，而不是WebKit PhantomJS*/
    在测试环境中，是否应该手动或通过脚本将它们添加到
    html
    元素中？（如何呈现并不重要）
    uncss中有选项吗？
    只要你不使用
    ：not（.ie9）
    （怪异）的样式，就应该可以了

    编辑：您可以使用with a强制uncss“提供uncss不应删除的选择器列表”。但不会进行测试

    2/将检测分辨率的脚本（视口宽度）并通过删除/添加或在容器上添加类来调整内容。我猜它们将以桌面分辨率在PhantomJS中执行，因此无法完成它们的工作，所以您需要修改对PhantomJS或类似的调用……或者深入研究3个项目的选项或GitHub问题（我没有）

    我听说的其他工具，未测试或几乎无法测试，对MQ部分一无所知：

    • 在grunt uncss自述中，覆盖部分
    • 来自Opera的UCS（这里已经有一个应答器，无法使其工作）
    艾迪·奥斯马尼（Addy Osmani）有无数的100多张幻灯片，展示了这样一个很棒的工具：（你会更加后悔，一天只有24个小时，而不是48个错误等待72^^）

    你可以通过执行inspect element（F12）在谷歌浏览器中进行检查。未使用的CSS在标记上有一行。

    如果需要，可以尝试构建在（非生产）上运行的脚本服务器，它检查每个css规则，将其从样式表中删除，使用类似phantomjs的东西加载页面，并检查是否与上次加载页面时有任何更改。如果有，则将css规则放回，如果没有，则将其删除，然后移到下一个规则。运行该规则需要一段时间，但会起作用。您可能需要lso必须设置一个不使用缓存的服务器实例才能运行。

    尝试使用这个工具，它只是一个简单的js脚本 此工具有助于从列出活动样式的所有源的特定页面获取CSS，并将其保存为JSON，其中源为键，规则为值。 它从href链接加载所有CSS，并告知从它们应用的所有样式
    您可以修改代码，将所有css保存到一个.css文件中。从而组合所有css。

    Dust me选择器，甚至Chrome的开发工具都可以找到未使用的选择器，但这不是我要找的。我需要一个解决方案，在一个页面上查找所有正在使用的ID和类，聚合这些css样式，并以我可以找到的方式输出它们n创建一个在该页面上100%使用的CSS样式表。您建议的解决方案没有做到这一点，但它确实引导了我。我仍在使用它，但到目前为止，这也不像是解决方案。如果您的解决方案满足了我的需要，请提供有关如何实现的更多详细信息？抱歉，我没有使用它，只是知道而已。我理解坦德