<!DOCTYPE HTML>
<HTML lang="en">
<head>
<meta charset="UTF-8">
<title>my HTML</title>
<meta name="viewport"
content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
<!-- <script src="https://cdn.staticfile.org/jquery/2.0.3/jquery.min.js"></script> -->
</head>
<body>
<div class="article">
<div class="article-heading">
<h2>CSS压缩/格式化工具</h2>
</div>
<div class="article-body">
<style>
.sitetip {
font-size: 14px;
color: #444;
margin-bottom: 12px;
}
textarea {
font-size: 12px;
font-family: microsoft yahei;
color: #444;
overflow: auto;
vertical-align: top;
}
.tarea {
width: 98%;
height: 220px;
border: #e6e6e6 1px solid;
border-color: #ddd #e6e6e6 #e6e6e6 #ddd;
margin-bottom: 12px;
box-shadow: inset 1px 1px 1px #eee;
padding: 4px;
font-size: 12px;
line-height: 18px;
border-radius: 2px;
}
.subbtn {
margin-bottom: 20px;
}
.sbtn {
position: relative;
cursor: pointer;
display: inline-block;
vertical-align: middle;
font-size: 12px;
font-weight: bold;
height: 27px;
line-height: 27px;
min-width: 52px;
padding: 0 12px;
text-align: center;
text-decoration: none;
border-radius: 2px;
border: 1px solid #ddd;
color: #666;
background-color: #f5f5f5;
background: -webkit-linear-gradient(top, #F5F5F5, #F1F1F1);
background: -moz-linear-gradient(top, #F5F5F5, #F1F1F1);
background: linear-gradient(top, #F5F5F5, #F1F1F1);
}
</style>
<h2 class="sitetip">贴入要格式化或压缩的CSS代码：</h2>
<textarea onmouseover="this.focus();this.select();" id="code" class="tarea"></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 onmouseover="this.focus();this.select();" id="packer" class="tarea"></textarea>
<script>
var lCSSCoder = { 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 = lCSSCoder[s](document.getElementById("code").value) }
</script>
</div>
</div>
</body>
</HTML>
