家好,很高兴又见面了,我是"高级前端?进阶?",由我带着大家一起关注前端前沿、深入前端底层技术,大家一起进步,也欢迎大家关注、点赞、收藏、转发,您的支持是我不断创作的动力。
UnCSS 是一个从样式表中删除未使用的 CSS 的工具,可以跨多个文件工作,并支持 Javascript 注入的 CSS。
UnCSS 删除未使用规则的过程如下:
但是使用 Uncss 需要注意以下几点:
目前 uncss 在 Github 上通过 MIT 协议开源,有超过 9.3k 的 star,194k 的项目依赖量,是一个值得关注的前端开源项目。
下面是在 Node.js 环境中使用 uncss 的示例:
var uncss=require('uncss');
var files=['my', 'array', 'of', 'HTML', 'files', 'or', 'http://urls.com'],
options={
banner: false,
csspath: '../public/css/',
htmlroot: 'public',
ignore: ['#added_at_runtime', /test\-[0-9]+/],
ignoreSheets: [/fonts.googleapis/],
inject: function (window) {
window.document
.querySelector('html')
.classList.add('no-csscalc', 'csscalc');
},
jsdom: {
userAgent: 'Mozilla/5.0 (iPhone; CPU iPhone OS 10_3 like Mac OS X)',
},
media: ['(min-width: 700px) handheld and (orientation: landscape)'],
raw: 'h1 { color: green }',
report: false,
strictSSL: true,
stylesheets: [
'lib/bootstrap/dist/css/bootstrap.css',
'src/public/css/main.css',
],
timeout: 1000,
uncssrc: '.uncssrc',
userAgent: 'Mozilla/5.0 (iPhone; CPU iPhone OS 10_3 like Mac OS X)',
};
uncss(files, options, function (error, output) {
console.log(output);
});
/* Look Ma, no options! */
uncss(files, function (error, output) {
console.log(output);
});
/* Specifying raw HTML */
var rawHtml='...';
uncss(rawHtml, options, function (error, output) {
console.log(output);
});
值得一提的是,UnCSS 还可以与其他 JavaScript 构建系统结合使用,例如: Grunt、Broccoli 或 Gulp,只需要安装特定的库即可。
在 CLI 环境中使用命令如下:
Usage: uncss [options] <file or URL, ...>
e.g. uncss https://getbootstrap.com/docs/3.3/examples/jumbotron/ > stylesheet.css
Options:
-h, --help output usage information
-V, --version output the version number
-i, --ignore <selector, ...> Do not remove given selectors
-m, --media <media_query, ...> Process additional media queries
-C, --csspath <path> Relative path where the CSS files are located
-s, --stylesheets <file, ...> Specify additional stylesheets to process
-S, --ignoreSheets <selector, ...> Do not include specified stylesheets
-r, --raw <string> Pass in a raw string of CSS
-t, --timeout <milliseconds> Wait for JS evaluation
-H, --htmlroot <folder> Absolute paths' root location
-u, --uncssrc <file> Load these options from <file>
-n, --noBanner Disable banner
-a, --userAgent <string> Use a custom user agent string
-I, --inject <file> Path to javascript file to be executed before uncss runs
-o, --output <file> Path to write resulting CSS to
请注意,可以将本地文件路径(由 glob 处理)和 URL 传递给程序。
/* uncss:ignore */
.selector1 {
/* this rule will be ignored */
}
.selector2 {
/* this will NOT be ignored */
}
/* uncss:ignore start */
/* all rules in here will be ignored */
/* uncss:ignore end */
https://github.com/uncss/uncss
https://m.youtube.com/watch?v=DX7McYRGJ8o
https://uncss-online.com/
ss是一种用来为Html文档添加样式(字体、间距、位置、颜色、角度等显示效果)的计算机语言。学习网站W3school。
css的引用样式:
一:style标签(内联样式)
通过在head标签中间新建一个style标签,该标签内部存放的就是网页文件中的css代码。
二:外部引用css文件(外联样式)
新建一个css文件
在head标签中间新建一个link标签,通过href属性设置外部的css文件地址。rel=“stylesheet”表示我们引用的一个样式表(css文件)。
三:标签内部style属性(行内样式)
在开始标签的内部可以设置一个叫做style的属性,属性的双引号存放该元素代码的css样式(不推荐使用)。
一般用的就是通过link标签来引入外部css文件来修改样式,一般修改样式有字体,颜色,大小,文本居中,间距等。
叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML或XML等文件样式的计算机语言。CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。CSS 能够对网页中元素位置的排版进行像素级精确控制,支持几乎所有的字体字号样式,拥有对网页对象和模型样式编辑的能力。
下面简单介绍一下外部引用CSS两种方式:link和@import。
XML/HTML代码
<link rel="stylesheet" rev="stylesheet" href="CSS文件" type="text/css" media="all" />
XML/HTML代码
<style type="text/css" media="screen">
@import url("CSS文件");
</style>
两者都是外部引用CSS的方式,但是存在一定的区别:
区别1:默认的差别。link是XHTML标签,除了加载CSS外,还可以定义RSS等其他事务;@import属于CSS范畴,只能加载CSS。
区别2:加载顺序的差别。当一个页面被加载的时候(就是被浏览者浏览的时候),link引用的CSS会同时被加载,而@import引用的CSS会等到页面全部被下载完再被加载。所以有时候浏览@import加载CSS的页面时开始会没有样式(就是闪烁),网速慢的时候还挺明显
区别3:兼容性的差别。由于@import是CSS2.1提出的所以老的浏览器不支持,@import只有在IE5以上的才能识别,而link标签无此问题。
区别4:使用dom控制样式时的差别。当使用javascript控制dom去改变样式的时候,只能使用link标签,因为@import不是dom可以控制的。 @import可以在css中再次引入其他样式表,比如可以创建一个主样式表,在主样式表中再引入其他的样式表,如:
main.css ———————-
@import “sub1.css”;
@import “sub2.css”;
sub1.css ———————-
p {color:red;}
sub2.css ———————-
.myclass {color:blue}
这样更利于修改和扩展。
更多 长沙网站开发 原创内容,请关注长沙蒲公英网络。
原创文章链接:http://www.0731pgy.com/a/news/IndustryNews/429.html
*请认真填写需求信息,我们会在24小时内与您取得联系。