<!doctype html>
<meta charset= "Utf-8" >
<TITLE>CSS compression obfuscation/formatting/landscaping Tools </title>
<style type= "Text/csss" >
@charset "Utf-8";
/* CSS Document */
*{margin:0; padding:0; font-family: "Microsoft yahei UI"; font-size:14px; color: #444;}
Img{border:none;}
Li {list-style:none;}
A{text-decoration:none}
#wrap {width:960px; margin:0 auto;}
#head, #mainbody, #foot {width:100%;}
/* Form control style start*/
. tarea {margin-left:20px; width:90%; height:220px; border:1px solid #e6e6e6; margin-bottom:12px; box-shadow:inset 1px 1p x 1px #eee; padding:4px; border-radius:2px; line-height:18px; Color: #CCC; font-size:12px;}
. Tarea-on{color: #000;}
textarea{overflow:auto; vertical-align:top;}
. sbtn{cursor:pointer; display:inline-block; vertical-align:middle;height:27px; line-height:27px; padding:0 12px; border-radius:2px; border:1px solid #ddd; Text-align:center;}
/* Form control style end*/
. subbtn {margin-left:50px; margin-bottom:10px;}
. Center h2{margin-left:30px;}
. sitetip{margin-bottom:12px;}
</style>
<body>
<div id= "Wrap" >
<div id= "Head" ></div>
<div id= "Mainbody" >
<div class= "center" >
<H1>CSS compression obfuscation/formatting/landscaping Tools <H2 class= "Sitetip" > Paste the CSS code you want to format or compress:<textarea id= "code" class= "Tarea" > formatted or compressed CSS code </textarea>
<div class= "SUBBTN" >
<input type= "button" onclick= "CSS (' Packadv ')" value= "advanced Compression" class= "sbtn"/>
<input type= "button" onclick= "CSS (' Pack ')" value= "normal compression" class= "sbtn"/>
<input type= "button" onclick= "CSS (' format ')" value= "formatted" class= "Sbtn"/>
</div>
<H2 class= "Sitetip" > converted CSS code: <textarea id= "packer" class= "Tarea tarea-on" ></textarea>
</div>
</div>
<div id= "Foot" ></div>
</div>
<script type= "Text/javascript" >
/**
* CSS Compression formatting
*/
var Csscoder = {
Format:function (s) {//Formatting
s = S.replace (/\s* ([\{\}\:\;\,]) \s*/g, "$");
s = S.replace (/;\s*;/g, ";");
s = S.replace (/\,[\s\.\#\d]*{/g, "{");
s = s.replace (/([^\s]) \{([^\s])/g, "$ {\n\t$2");
s = s.replace (/([^\s]) \} ([^\n]*)/g, "$1\n}\n$2");
s = s.replace (/([^\s]);([^\s\}])/g, "$1;\n\t$2");
return s;
},
Packadv:function (s) {//Advanced compression
s = S.replace (/\/\* (. | \ n) *?\*\//g, "");
s = S.replace (/\s* ([\{\}\:\;\,]) \s*/g, "$");
s = S.replace (/\,[\s\.\#\d]*\{/g, "{");
s = S.replace (/;\s*;/g, ";");
s = S.match (/^\s* (\s+ (\s+\s+) *) \s*$/);
return (s = = null)? "": s[1];
},
Pack:function (s) {//normal compression
s = S.replace (/\/\* (. | \ n) *?\*\//g, "");
s = S.replace (/\s* ([\{\}\:\;\,]) \s*/g, "$");
s = S.replace (/\,[\s\.\#\d]*\{/g, "{");
s = S.replace (/;\s*;/g, ";");
s = S.replace (/;\s*}/g, "}");
s = s.replace (/([^\s]) \{([^\s])/g, "$1{$2");
s = s.replace (/([^\s]) \} ([^\n]s*)/g, "$1}\n$2");
return s;
}
};
function CSS (s) {
document.getElementById ("packer"). Value = Csscoder[s] (document.getElementById ("code"). Value);
}
</script>
</body>
The interface appears as shown
CSS compression obfuscation/formatting/landscaping