我有一个网站的样式表变得势不可挡,并且某些页面上没有使用完整的50%到90%左右.我不想拥有23个单独的阻止CSS表单,而是想知道我想要在目标页面上使用哪些内容,并将这些内容导出到一个表单中.
我已经看到几个问题,推荐"Dust me选择器"或类似的添加,它将告诉选择器是什么和没有使用; 但这不是我想要的.我需要能够将该特定页面的所有工作表中的所有使用的样式导出到一个可用于替换其他23个页面的新工作表中.该解决方案应该能够支持响应式网站(媒体呼叫).我定位的网站页面是:http://tripinary.com.
我发现:https://unused-css.com但这是付费服务,我需要免费;
我遇到的下一个最接近的事情是http://www.csstrashman.com/,但这并没有看样式表.事实上,它完全忽略了它们,最终我在网站的响应能力方面遇到了麻烦.很多时候,这个网站只是崩溃了.
我不介意一个程序化的解决方案,如果有人不得不这样做,并可以推荐一个方向.
Fel*_*Als 17
(删除了我对RwwL答案的评论,使其成为彻底的答案)
UnCSS,无论是node.js还是grunt或gulp任务,都能够通过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参数作为参数传递给3个插件中的任何一个,例如:
var files = ['my', 'array', 'of', 'HTML', 'files'],
options = { /* (…) */ };
uncss(files, options, function (error, output) {
console.log(output);
});
避免:
urls(Array):
要用Phantom加载的URL数组(如果有的话,已经传递的文件之上).
注意:不推荐使用此功能,您可以直接将URL作为参数传递.
媒体查询和响应被考虑在内:
media(Array):
默认情况下,UnCSS仅处理带有媒体查询"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测试环境中的元素？(它如何呈现并不重要)
在unss中有一个选项吗？
只要你没有:not(.ie9)(怪异)风格,它应该没问题.
编辑:您可以使用带有模式的ignore选项强制uncss" 提供不应由UnCSS删除的选择器列表 ".不会被测试.
2/脚本将检测分辨率(视口宽度)并通过删除/添加或在容器上添加类来调整内容.他们将以桌面分辨率在PhantomJS中执行,因此我们无法完成他们的工作所以你需要修改对PhantomJS的调用或类似的东西...或者深入研究3个项目的选项或GitHub问题(我没有' T)
我听说过的其他工具,未经过测试或勉强或无法测试,不知道MQ部分:
Addy Osmani有无数的100多张幻灯片的演示文稿,展示了这样一个很棒的工具:https://speakerdeck.com/addyosmani/automating-front-end-workflow(你会后悔更多,那些日子只有24小时而不是48错误等待72 ^^)
Firebug的CSS Usage插件怎么样？
脚步:
这里有一些屏幕截图和漫步.不确定媒体查询或它是否适用于您的网站,它可能不会保留-webkit等,但也许它会让你在那里的一部分.
| 归档时间： |
|
| 查看次数： |
14394 次 |
| 最近记录： |