CSS压缩混淆 / 格式化 / 美化

浏览数：37 / 时间：2015年06月09日

 1 <!doctype html>
 2 <html><head>
 3 <meta charset="utf-8">
 4 <title>CSS压缩混淆 / 格式化 / 美化工具</title>
 5 <style type="text/csss">
 6 @charset "utf-8";
 7 /* CSS Document */
 8 
 9 *{margin:0; padding:0; font-family:"Microsoft YaHei UI"; font-size:14px; color:#444;}
10 img{border:none;}
11 li {list-style:none;}
12 a{text-decoration:none}
13 #wrap{ width:960px; margin:0 auto;}
14 #head, #mainbody, #foot{ width:100%;}
15 
16 /*表单控件样式 start*/
17 .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;}
18 .tarea-on{color:#000;}
19 textarea{ overflow:auto; vertical-align:top;}
20 .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;}
21 /*表单控件样式 end*/
22 
23 .subbtn { margin-left:50px; margin-bottom:10px;}
24 .center h2{ margin-left:30px;}
25 .sitetip{ margin-bottom:12px;}
26 
27 </style>
28 </head>
29 <body>
30 <div id="wrap">
31     <div id="head"></div>
32     <div id="mainbody">
33         <div class="center">
34             <h1>CSS压缩混淆 / 格式化 / 美化工具</h1>
35             <hr />
36             <h2 class="sitetip">贴入要格式化或压缩的CSS代码：</h2>
37             <textarea id="code" class="tarea">格式化或压缩的CSS代码</textarea>
38             <div class="subbtn">
39                 <input type="button" onClick="CSS(‘packAdv‘)" value="高级压缩" class="sbtn" />
40                 <input type="button" onClick="CSS(‘pack‘)" value="普通压缩" class="sbtn" />
41                 <input type="button" onClick="CSS(‘format‘)" value="格式化" class="sbtn" />
42             </div>
43             <h2 class="sitetip">转换后的css代码： </h2>
44             <textarea id="packer" class="tarea tarea-on"></textarea>
45         </div>
46     </div>
47     <div id="foot"></div>
48 </div>
49 <script type="text/javascript">
50 /**
51 * css 压缩 格式化
52 */
53 var CSSCoder = {
54     format: function (s) {//格式化
55         s = s.replace(/\s*([\{\}\:\;\,])\s*/g, "$1");
56         s = s.replace(/;\s*;/g, ";");
57         s = s.replace(/\,[\s\.\#\d]*{/g, "{");
58         s = s.replace(/([^\s])\{([^\s])/g, "$1 {\n\t$2");
59         s = s.replace(/([^\s])\}([^\n]*)/g, "$1\n}\n$2");
60         s = s.replace(/([^\s]);([^\s\}])/g, "$1;\n\t$2");
61         return s;
62     },
63     packAdv: function (s) {//高级压缩
64         s = s.replace(/\/\*(.|\n)*?\*\//g, "");
65         s = s.replace(/\s*([\{\}\:\;\,])\s*/g, "$1");
66         s = s.replace(/\,[\s\.\#\d]*\{/g, "{");
67         s = s.replace(/;\s*;/g, ";");
68         s = s.match(/^\s*(\S+(\s+\S+)*)\s*$/);
69         return (s == null) ? "" : s[1];
70     },
71     pack: function (s) {//普通压缩
72         s = s.replace(/\/\*(.|\n)*?\*\//g, "");
73         s = s.replace(/\s*([\{\}\:\;\,])\s*/g, "$1");
74         s = s.replace(/\,[\s\.\#\d]*\{/g, "{");
75         s = s.replace(/;\s*;/g, ";");
76         s = s.replace(/;\s*}/g, "}");
77         s = s.replace(/([^\s])\{([^\s])/g, "$1{$2");
78         s = s.replace(/([^\s])\}([^\n]s*)/g, "$1}\n$2");
79         return s;
80     }
81 };
82 
83 function CSS(s) {
84     document.getElementById("packer").value = CSSCoder[s](document.getElementById("code").value);
85 }
86 </script>
87 </body>
88 </html>