CSS compression obfuscation/formatting/beautification, css Obfuscation
<! Doctype html>
<Html> <Meta charset = "UTF-8">
<Title> CSS compression obfuscation, formatting, and beautification 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 1px 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>
</Head>
<Body>
<Div id = "wrap">
<Div id = "head"> </div>
<Div id = "mainbody">
<Div class = "center">
<H1> CSS compression obfuscation, formatting, and beautification tools <Hr/>
<H2 class = "sitetip"> paste the CSS code to be formatted or compressed: <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 ('package')" value = "common compression" class = "sbtn"/>
<Input type = "button" onClick = "CSS ('format')" value = "formatting" class = "sbtn"/>
</Div>
<H2 class = "sitetip"> converted css code: <Textarea id = "packer" class = "tarea-on"> </textarea>
</Div>
</Div>
<Div id = "foot"> </div>
</Div>
<Script type = "text/javascript">
/**
* Css compression and formatting
*/
Var CSSCoder = {
Format: function (s) {// format
S = s. replace (/\ s * ([\{\}\:\;\,]) \ s */g, "$1 ");
S = s. replace (/; \ s *;/g ,";");
S = s. replace (/\, [\ s \. \ # \ d] * {/g ,"{");
S = s. replace (/([^ \ s]) \ {([^ \ s])/g, "$1 {\ 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, "$1 ");
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, "$1 ");
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>
</Html>
Shows the interface.