一些有关于使用uncss从页面中删除未使用的样式!以及js如何清除样式的相关话题,你对使用uncss从页面中删除未使用的样式!这样的题有了解多少呢?就让小编带各位了解一下吧!
大家好,很高兴再次见到大家。我对前端创业很感兴趣,会加深自己基于前端的技术。喜欢、收藏、转发。
什么是UnCSS?
UnCSS是一个从样式表中删除未使用的CSS的工具,可以跨多个文件工作,并支持Javascript注入的CSS。
UnCSS中删除未使用的规则的流程如下
HTML文件由jsdom加载并运行JavaScript。
所有样式表均由PostCSS解析。
documentquerySelector过滤掉HTML文件中找不到的选择器。
其余规则将转换回CSS。
不过,在使用Uncss时,必须注意以下几点
UnCSS不适用于非HTML页面,例如模板或PHP文件。如果开发人员需要针对模板运行UnCSS,他们必须从模板生成示例HTML页面并在生成的文件上运行uncss,或者运行实时本地开发服务器并将uncss指向该服务器。
UnCSS仅执行页面加载时运行的Javascript。它不处理在用户交互时运行的Javascript。如果您想在用户交互时保留Javascript添加的类,您应该使用忽略选项。
目前,uncss通过MIT协议在Github上开源,拥有超过93,000个star和超过194,000个项目依赖项。
如何使用UnCSS
下面是在Nodejs环境中使用uncss的示例。
varuncss=require39;var文件=[39;39;39;39;39;39;39;public39;39;/test-[0-9]+/],ignoreSheets:[/fontsgoogleapis/]、inject:函数窗口、jsdom:media:[39;]、raw:39;report:false、strictSSL:true、stylesheets:[39;39;]、timeout:1000、uncssrc:39;userAgent3336039;uncss文件,选项,函数错误,输出;/看妈妈,没有选项!/uncssfiles,函数错误,输出;/指定原始HTML/varrawHtml=39;uncssrawHtml,选项,函数错误,输出;UnCSS还可以与其他JavaScript构建系统(例如Grunt、Broccoli或Gulp)一起使用,只需安装某些它们也可以一起使用。
grunt-uncss
gulp-uncss
西兰花-uncss
在CLI环境中使用以下命令
用法uncss[选项]lt;文件或URL,gt;示例uncssrootlt;foldergt;绝对路径34;stylesheet34;path/to/filecss34;/css/stylecss34;
String[]Ignore提供UnCSS不应删除的选择器列表。例如,通过用户与页面交互添加的样式UnCSS尚无法检测到。文字名称和正则表达式模式都可以识别。否则,您可以在特定选择器之前添加注释。
/uncss:ignore/selector1选择器2/uncss:ignorestart//这里的所有规则都将被忽略//uncss:ignoreend/ignoreSheets、inject、jsdom、media、raw、Report、strictSSL、stylesheet、timeout、uncssrc和其他添加内容,包括引用的配置支持信息。文章的最后。
参考
一、js如何修改编辑器图文样式?
基本js是这样写的obj-style-height='样式值'obj-style-width='样式值'jq$-obj,-css-,
二、js中可以直接使用sass样式吗?
您不需要安装这些依赖项。
三、su怎么去掉样式?
1-有多种方法可以删除样式。2-一种常见的方法是使用CSS重置样式表将所有元素的样式设置为默认,从而删除原始样式。3-还可以使用JavaScript或jQuery等脚本语言动态修改元素的样式或手动从HTML代码中删除样式相关的代码。您必须根据您的具体情况选择合适的方法。
No Comment