如何在给定的网页上只提取使用的CSS，并将它们合并成一个单独的样式表？ [英] How can I extract only the used CSS on a given web page and have that combined into a separate style sheet?
问题描述
我有一个网站的样式表变得压倒性，在某些页面上不使用完整的50％到90％左右。而不是有23个单独的阻止CSS表单，我想找出哪些正在我想要定位的页面上使用，并将它们导出到一个表。
我已经看到几个问题，建议粉尘我选择器或类似的添加，将告诉什么选择器是和不使用;但这不是我想要的。我需要能够将所有使用的样式从该特定页面的所有工作表导出到一个新工作表，可以用来替换23其他。解决方案应该能够支持响应式网站（媒体通话）。我定位的网站网页是： http://tripinary.com 。
我发现： https://unused-css.com ，但这是一项付费服务，我需要免费;
我遇到的最接近的问题是 http://www.csstrashman.com/但这不看样式表。事实上，它完全忽略他们，最终我有麻烦的网站的响应。很多时候，这个网站只是崩溃了。
我不介意程序化的解决方案，如果有人以前必须这样做，并可以推荐一个方向。 >
（删除了我对RwwL回答的评论，以便彻底回答） UnCSS （无论是node.js还是grunt或gulp任务）都能够通过媒体查询数组中的一组页面列出所使用的CSS规则。 uncss： https://github.com/giakki/uncss
grunt-uncss： https://github.com/addyosmani/grunt-uncss
gulp-uncss： https://github.com/ben-eb/gulp-uncss
/ code>作为任何3个插件的参数，如：
var files = ['my' 'array'，'of'，'HTML'，'files']，
options = {/ *（...）* /};
unss（files，options，function（error，output）{
console.log（output）;
}）;
避免：
urls（Array）：
要使用Phantom加载的网址数组（已传递的文件顶部）。
注意：此功能已弃用
媒体查询和响应式：
media（Array）：
默认情况下，UnCSS只处理样式表媒体查询全部，屏幕和没有一个。
您可以添加样式表，忽略其中的一些，添加内嵌CSS和许多其他选项，例如 htmlroot
其他问题：
1 / 条件类（如果您在IE9中使用它们）。它们显然不会在WebKit PhantomJS环境中匹配！
HTML：
<！ - [if IE 9]>< html class =ie9 lte -ie9lang =en><！[endif] - > <！ - 条件注释/类 - >
CSS：
.ie9 .some-class {property：value; ] / *仅在IE9中匹配，而不是WebKit PhantomJS * /
到测试环境中的 html 元素？ （如何呈现并不重要）
在uncss中是否有选项？
只要不使用：：（.ie9） ）（奇怪），应该很好。
编辑：你可以使用忽略选项与模式 force uncss to提供不应由UnCSS删除的选择器列表。
2 / 可检测分辨率的脚本（视口宽度），并通过删除/添加内容来调整内容或在容器上添加类。他们将执行PhantomJS在桌面分辨率我猜，因此不会做他们的工作，所以你需要修改PhantomJS或类似的东西...或者挖掘选项或GitHub问题的3个项目（我没有' t）
我听说过的其他工具，没有测试，或者没有测试，或者不能测试，不知道MQ部分：
Addy Osmani有100多张幻灯片，这一个： https://speakerdeck.com/addyosmani/automating-front-end-workflow （you更令人遗憾的是，这些日子只有24小时，而不是48错误等待72 ^^）
I have a site whose stylesheets are becoming overwhelming, and a full 50% to 90% or so is not used on certain pages. Rather than have 23 separate blocking CSS sheets, I'd like to find out which are being used on the page I'd like to target, and have those exported into one sheet.
I have seen several questions that recommend "Dust me selectors" or similar add on which will tell what selectors are and are not being used; but that's not what I want. I need to be able to export all used styles from all sheets for that particular page into one new sheet that can be used to replace the 23 others. The solution should be able to support a responsive website (media calls). The website page I'm targeting is: http://tripinary.com.
I've found: https://unused-css.com but this is a paid service and I need free;
The next closest thing I've come across is http://www.csstrashman.com/ but this does not look at stylesheets. In fact, it completely ignores them and ultimately I'm having trouble with the responsiveness of the site. Many times as well, this site just crashes.
I don't mind a programmatic solution if someone has had to do this before and can recommend a direction.
(deleted my comment to RwwL answer to make it a thorough answer)
UnCSS, whether node.js or as a grunt or gulp task, is able to list used CSS rules by an array of pages in an array of Media Queries.
uncss: https://github.com/giakki/uncss
grunt-uncss: https://github.com/addyosmani/grunt-uncss
gulp-uncss: https://github.com/ben-eb/gulp-uncss
Multipage:
You can pass files as an argument to any of the 3 plugins, like:
var files = ['my', 'array', 'of', 'HTML', 'files'],
options = { /* (…) */ };
uncss(files, options, function (error, output) {
console.log(output);
});
Avoid:
urls (Array):
array of URLs to load with Phantom (on top of the files already passed if any).
NOTE: this feature is deprecated, you can pass URLs directly as arguments.
Media Queries and responsive are taken into account:
media (Array):
By default UnCSS processes only stylesheets with media query "all", "screen", and those without one. Specify here which others to include.
You can add stylesheets, ignore some of them, add inline CSS and many other options like htmlroot
Remaining problems:
1/ Conditional classes if you use them for IE9-. They obviously won't be matched in a WebKit PhantomJS environment!
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 */
Should they be added by hand or script to the html element in testing environment? (how it renders is of no importance)
Is there an option in uncss?
As long as you don't style with :not(.ie9) (weird), it should be fine.
EDIT: you can use the ignore option with a pattern to force uncss to "provide a list of selectors that should not be removed by UnCSS". Won't be tested though.
2/ Scripts that will detect resolution (viewport width) and adapt content to it by removing/adding it or adding a class on a container. They will execute in PhantomJS in desktop resolution I guess and thus won't do their job so you'll need to modify calls to PhantomJS or something like that... Or dig into options or GitHub issues of the 3 projects (I didn't)
Other tools I heard of, not tested or barely or couldn't test, no idea about the MQ part:
- in grunt-uncss readme, the Coverage part
- ucss from Opera (there's already an ansswer here, couldn't make it work)
- Helium
- CSSESS
- mincss
Addy Osmani has countless presentations of 100+ slides presenting awesome tools like this one: https://speakerdeck.com/addyosmani/automating-front-end-workflow (you'll regret even more that days are made only of 24 hours and not 48 err wait 72 ^^)
这篇关于如何在给定的网页上只提取使用的CSS，并将它们合并成一个单独的样式表？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
