CssGaga教程-css壓縮的技巧

2020-03-24 16:41:03

字體：大中小

來源：轉載

供稿：網友

此功能默認開啟
勾選換行則每條規則后換行，否則全部壓為一行（MHTML除外）
CssGaga參考了一部分YUI Compressor，擁有比YUI Compressor更極限的壓縮去除注釋和空白
Before:/*****
Multi-line comment
before a new html' target='_blank'>class name
*****/
.classname {
/* comment in declaration block */
font-weight: normal;
}After:.classname{font-weight:normal}去除結尾的分號
Before:.classname {
border-top: 1px;
border-bottom: 2px;
}After:.classname{border-top:1px;border-bottom:2px}Before:去除多余的分號
.classname {
border-top: 1px; ;
border-bottom: 2px;;;
}After:.classname{border-top:1px;border-bottom:2px}去除無效的規則
Before:.empty { ;}
.nonempty {border: 0;}After:.nonempty{border:0}去除零值的單位并合并多余的零
Before:a {
margin: 0px 0pt 0em 0%;
background-position: 0 0ex;
padding: 0in 0cm 0mm 0pc
}After:a{margin:0;background-position:0 0;padding:0}去除小數點前多余的0
Before:.classname {
margin: 0.6px 0.333pt 1.2em 8.8cm;
background: rgba(0, 0, 0, 0.5);
}After:.classname{margin:.6px .333pt 1.2em 8.8cm;background:rgba(0,0,0,.5)}壓縮border、outline
Before:.classname {
border-left: 0 none;
border-right: none;
border: 0 none;
outline: 0 none;
}After:.classname{border-left:0;border-right:0;border:0;outline:0}色值壓縮
Before:.color-me {
color: rgb(123, 123, 123);
border-color: #ffeedd;
background: none repeat scroll 0 0 rgb(255, 0,0);
}After:.color-me{color:#7b7b7b;border-color:#fed;background:none repeat scroll 0 0 #f00}不壓縮RGBA與IE濾鏡中的色值
Before:.cantouch {
color: rgba(1, 2, 3, 4);
filter: chroma(color="#FFFFFF");
}After:.cantouch{color:rgba(1,2,3,4);filter:chroma(color="#FFFFFF")}去除編碼聲明
Before:@charset "utf-8";
#foo {
border-width: 1px;
}/* second css, merged */
@charset "another one";
#bar {
border-width: 10px;
}After:#foo{border-width:1px}#bar{border-width:10px}壓縮IE濾鏡
Before:.classname {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)"; /* IE 8 */
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80); /* IE 8 */
}After:.classname{-ms-filter:"alpha(opacity=80)";filter:alpha(opacity=80)}去除多余引號
Before:@import url("mod-1.css");
@import url('mod-2.css');After:@import url(mod-1.css);
@import url(mod-2.css);Before:.classname{ background: url("img/icon.png"); }
.classname{ background: url('img/icon.png'); }After:.classname{background:url(img/icon.png)}
.classname{background:url(img/icon.png)}不影響正常的引號
Before:.clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden;}After:.clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden}對HACK的影響
支持常用HACK
Before:#element {
width: 1px;
width: 2px/9;
*width: 3px;
#width: 3px;
_width: 4px;
}After:#element{width:1px;width:2px/9;*width:3px;#width:3px;_width:4px}不支持以下HACK
html /**/ body p {
color: blue;
}#elem {
width: 100px; /* IE */
voice-family: "/"}/"";
voice-family:inherit;
width: 200px; /* others */
}html教程

鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。

上一篇：html+css+js下拉列表小三角

下一篇：CSS Sprites技術簡介