CSS壓縮混淆 / 格式化 / 美化，css混淆

最後更新：2016-05-30 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

<!doctype html>
<html><head>
<meta charset="utf-8">
<title>CSS壓縮混淆 / 格式化 / 美化工具</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%;}

/*表單控制項樣式 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;}
/*表單控制項樣式 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壓縮混淆 / 格式化 / 美化工具</h1>
<hr />
<h2 class="sitetip">貼入要格式化或壓縮的CSS代碼：</h2>
<textarea id="code" class="tarea">格式化或壓縮的CSS代碼</textarea>
<div class="subbtn">
<input type="button" onClick="CSS('packAdv')" value="進階壓縮" class="sbtn" />
<input type="button" onClick="CSS('pack')" value="普通壓縮" class="sbtn" />
<input type="button" onClick="CSS('format')" value="格式化" class="sbtn" />
</div>
<h2 class="sitetip">轉換後的css代碼： </h2>
<textarea id="packer" class="tarea tarea-on"></textarea>
</div>
</div>
<div id="foot"></div>
</div>
<script type="text/javascript">
/**
* css 壓縮格式化
*/
var CSSCoder = {
format: function (s) {//格式化
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) {//進階壓縮
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) {//普通壓縮
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>

介面顯示如所示

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More

CSS壓縮混淆 / 格式化 / 美化，css混淆

聯繫我們

A Free Trial That Lets You Build Big!

Sales Support

After-Sales Support