我有一个网站的样式表变得势不可挡,在某些页面上没有使用整整50%到90%左右的内容。除了要有23个单独的阻塞CSS工作表之外,我想找出要在目标页面上使用的页面,然后将它们导出到一个工作表中。

我已经看到了几个建议使用“Dust me selectors”(灰尘选择器)或类似的附件的问题,这些问题会告诉您使用和不使用哪些选择器。但这不是我想要的。我需要能够将所有用于该特定页面的样式从所有工作表导出到一个新的工作表中,以替换其他23个样式。该解决方案应该能够支持响应性网站(媒体 call )。我定位的网站页面是http://tripinary.com

我发现:https://unused-css.com但这是一项付费服务​​,我需要免费;

我遇到的下一个最接近的东西是http://www.csstrashman.com/,但这不涉及样式表。实际上,它完全忽略了它们,最终我在网站的响应能力上遇到了麻烦。同样,很多时候,该站点崩溃了。

我不介意使用程序化解决方案,如果有人以前必须这样做并且可以建议一个方向。

最佳答案

(删除了我对RwwL答案的评论,以使其成为一个彻底的答案)

无论是node.js还是grunt或gulp任务,UnCSS 都能通过Media Queries数组中的页面数组列出使用的CSS规则。

uncss:https://github.com/giakki/uncss
grunt-uncss:https://github.com/addyosmani/grunt-uncss
gulp-uncss:https://github.com/ben-eb/gulp-uncss

多页:

您可以将files作为参数传递给这三个插件中的任何一个,例如:

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

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

避免:



媒体查询和响应式已考虑在内:



您可以添加样式表,忽略其中一些样式,添加内联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元素中? (如何渲染并不重要)
uncss中有选项吗?
只要您不使用:not(.ie9)(怪异)样式,就可以了。

编辑:您可以将ignore optionpattern一起使用,以强制uncss“提供不应由UnCSS删除的选择器列表”。不过不会被测试。

2 / 脚本,该脚本将检测分辨率(视口(viewport)宽度)并通过删除/添加分辨率或在容器上添加类来使其适应内容。我猜他们将以桌面分辨率在PhantomJS中执行,因此将无法完成工作,因此您将需要修改对PhantomJS的调用或类似的操作...或深入研究3个项目的选项或GitHub问题(我没有t)

我听说过的其他工具,未经测试或勉强测试或无法测试,对MQ部分一无所知:

grunt-uncss自述文件中的
  • ,涵盖部分
  • Opera的
  • ucss(这里已经有答案,无法正常工作)
  • Helium
  • CSSESS
  • mincss

  • 阿迪·奥斯曼尼(Addy Osmani)展示了无数张幻灯片,其中包括100多个幻灯片,这些幻灯片展示了如此出色的工具:https://speakerdeck.com/addyosmani/automating-front-end-workflow(您更遗憾的是,这些日子只有24小时,而不是48 err等待72 ^^)

    关于css - 如何仅提取给定网页上使用的CSS,并将其组合到单独的样式表中?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/24665885/

    10-12 04:46
    查看更多