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

发布时间：2020-12-14 21:21:16 所属栏目：资源来源：网络整理

导读：我有一个网站的样式表变得势不可挡,并且在某些页面上不使用完整的50％到90％左右.我不想拥有23个单独的阻止CSS表单,而是想找出我想要定位的页面上使用的内容,并将这些内容导出到一个表单中. 我已经看到几个问题,推荐“Dust me选择器”或类似的添加,它将告诉

我有一个网站的样式表变得势不可挡,并且在某些页面上不使用完整的50％到90％左右.我不想拥有23个单独的阻止CSS表单,而是想找出我想要定位的页面上使用的内容,并将这些内容导出到一个表单中.

我已经看到几个问题,推荐“Dust me选择器”或类似的添加,它将告诉选择器是什么和没有使用;但这不是我想要的.我需要能够将该特定页面的所有工作表中的所有使用的样式导出到一个可用于替换其他23个页面的新工作表中.该解决方案应该能够支持响应式网站(媒体呼叫).我定位的网站页面是：http://tripinary.com.

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

我遇到的下一个最接近的东西是http://www.csstrashman.com/,但这并没有看样式表.事实上,它完全忽略了它们,最终我在网站的响应性方面遇到了麻烦.很多时候,这个网站只是崩溃了.

如果某人以前必须这样做并且可以推荐方向,我不介意程序化解决方案.

解决方法

(删除了我对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

多页：

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

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

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

避免：

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 (Array):
By default UnCSS processes only stylesheets with media query “all”,“screen”,and those without one. Specify here which others to include.

您可以添加样式表,忽略其中一些,添加内联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中有选项吗？
只要你没有风格：不(.ie9)(怪异),它应该没问题.

编辑：您可以使用ignore option和pattern强制解压缩“提供不应由UnCSS删除的选择器列表”.不会被测试.

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

我听说过的其他工具,未经测试或勉强或无法测试,不知道MQ部分：

>在grunt-uncss自述文件中,Coverage部分
>来自Opera的ucss(这里已经有了一个问题,无法使其工作)
> Helium
> CSSESS
> mincss

Addy Osmani有无数的100张幻灯片演示文稿,展示了这样一个令人敬畏的工具：https://speakerdeck.com/addyosmani/automating-front-end-workflow(你会后悔更多的日子只有24小时,而不是48等待72 ^^)

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!