css压缩、美化和净化工具

此作品是他刚写好的一款原创前端小工具，该css美化工具包含css美化,css净化,css压缩,另外还包含详细的注释，美化是将代码格式化使代码容易阅读，净化是将代码单选化,并去除注释，压缩是将代码最小化,去除多余空格和分号加快css的加载速度，

分类：css3 > 按钮难易：初级

查看演示下载资源下载积分： 20 积分

关注公众号，免费赠送安装视频教程、环境和学习视频，后面会不断更新。

css代码：

textarea{width:900px;height: 420px;font: 12px/1.6em 'Lucida Console', 'monospace', 'Consolas';letter-spacing: 1px}
textarea::-webkit-scrollbar{width:10px;height:10px;}
textarea::-webkit-scrollbar-button:vertical:increment{background-color:transparent;}
textarea::-webkit-scrollbar-track:enabled{background-color:rgba(113,112,107,0.1);-webkit-border-radius:5px;}
textarea::-webkit-scrollbar-thumb:vertical{height:50px;background-color:rgba(0,0,0,.2);-webkit-border-radius:5px;}
textarea::-webkit-scrollbar-thumb:horizontal{width:50px;background-color:rgba(0,0,0,.2);-webkit-border-radius:5px;}

js核心代码

//压缩代码 var val = oCode.value; val = val.replace(/\/\*(.|\n)*?\*\//g,''); //去除注释 val = val.replace(/^\s+|\s+$/g,''); //清除首尾空格 val = val.replace(/(:)\s+/g,'$1'); //去除冒号后多个空格如 width: 100px => width:100px val = val.replace(/\s{2,}/g,' '); //去除多余空格2个以上如 margin: 10px 20px 30px => margin:10px 20px 30px val = val.replace(/,\s+|\s+,/g,','); //去除多个样式共享时的多余空格如 h1, h2 , h3 =>h1,h2,h3 val = val.replace(/;{2,}|;\s+/g,';'); //去除多个分号或分号后面多余空格如 width:200px;; height:100px => width:200px;height:100px val = val.replace(/\s*\{\s*/g,'{'); //去除选择符后面多余空格如 div { height:100px} => div{height:100px} val = val.replace(/\s*}\s*/g,'}'); //去除选择器前面多余空格如 div{height:100px} a{} => div{height:100px}a{} val = val.replace(/[\n\t\f\r]/g,''); //去除换行,制表符,分页符,回车 val = val.replace(/;}/g,'}'); //去除元素样式的最后分号如 div{height:100px;} => div{height:100px} oCode.value = val; };