Tạo trang nén và làm đẹp code CSS

Nén CSS giúp mã nguồn trang Web gọn hơn, giảm dung lượng, còn làm đẹp CSS để cho các dòng code trở nên dễ nhìn hơn, thuận lợi cho việc chỉnh sửa code.

Hướng dẫn tạo trang nén và làm đẹp code CSS

Preview

Đơn giản bạn chỉ cần tạo trang tĩnh mới, copy code bên dưới dán vào, xuất bản trang là xong!

<style type="text/css">
.left{float:left;margin-left:1%}
.col{width:48%;margin:0 auto 30px;margin-left:auto}
.right{float:right;margin-right:1%;margin-bottom:15px}
.box p{margin:4px}
label{cursor:pointer;text-decoration:none}
textarea{display:block;text-shadow:none;width:98%;height:479px;margin:10px auto 30px;padding:0 5px;background-color:#e9f9e9;text-align:left;border:1px solid #47ae32;font:normal 14px/15px "Consolas","Monaco","Consolas","Andale Mono","Bitstream Vera Sans Mono","Courier New",Courier,monospace;color:#555555}
.button-group{text-align:center;border:1px solid #47ae32;padding:15px;margin:0 0 10px}
.box{text-align:left;margin:10px auto 30px}
pre{overflow:auto;white-space:pre;white-space:pre-wrap;word-wrap:break-word;text-shadow:none;background-color:#fff;border:2px groove #00ad62;margin:0 2% 30px;cursor:text;height:300px}
pre .st{color:purple}
pre .pr{color:brown}
pre .vl{color:darkgreen}
pre .pn{color:black}
pre .im{color:red}
pre .cm,pre .cm span{color:#666!important;font-style:italic;font-weight:normal}
</style>
<h2></h2>
<div class="clear"></div><div class="col left"><span class="right"><input type="checkbox" checked="" id="highlightCode"> <label for="highlightCode">Hiển thị HighLight Code?</label> <button class="button" onclick="clearField(&quot;cssField&quot;);">Clear</button> <button class="button" onclick="selectAll(&quot;cssField&quot;);">Sellect All</button></span><span class="clear"></span><textarea autofocus="" placeholder="Paste your CSS code here..." id="cssField" spellcheck="false"></textarea></div><div class="col right"><div class="button-group"><div class="box"><p><input type="checkbox" id="stripAllComment"> <label for="stripAllComment">Xóa bỏ tất cả chú thích</label></p><p><input type="checkbox" id="superCompact"> <label for="superCompact">Nén siêu gọn</label></p><p><input type="checkbox" id="betterIndentation"> <label for="betterIndentation">Giữ thụt đầu dòng trong <code>@query {}</code></label></p><p><input type="checkbox" checked="" id="keepLastComma"> <label for="keepLastComma">Xóa bỏ các dấu chấm phẩy cuối cùng</label></p></div><button class="button" onclick="compressCSS(&quot;cssField&quot;);">Compressor CSS</button></div><div class="button-group"><div class="box"><p><input type="checkbox" onchange="beautifyCSS(&quot;cssField&quot;);" id="inlineLayout"> <label for="inlineLayout">Bố cục theo dòng</label></p><p><input type="checkbox" id="toTab" onchange="beautifyCSS(&quot;cssField&quot;);"> <label for="toTab">Replace double space indentation with:</label><br>&emsp;&nbsp;<span id="tabOpt"><input type="radio" onchange="beautifyCSS(&quot;cssField&quot;);" id="op-1" name="op" disabled=""> <label for="op-1">Một Tab</label> <input type="radio" onchange="beautifyCSS(&quot;cssField&quot;);" id="op-2" name="op" disabled=""> <label for="op-2">4 dấu cách</label></span></p><p><input type="checkbox" checked="" id="breakSelector" onchange="beautifyCSS(&quot;cssField&quot;);"> <label for="breakSelector">Chia đa bộ  (e.g: <code>html,<span style="color:darkred;">\n</span>body,<span style="color:darkred;">\n</span>table {}</code>)</label></p><p><input type="checkbox" id="spaceBetween" onchange="beautifyCSS(&quot;cssField&quot;);"> <label for="spaceBetween">Thêm dấu cách sau <code>:</code> và <code>,</code></label></p><p><input type="checkbox" id="inlineSingleProp" onchange="beautifyCSS(&quot;cssField&quot;);"> <label for="inlineSingleProp">Chế độ một dòng cho thuộc tính đơn</label></p><p><input type="checkbox" id="removeLastSemicolon" onchange="beautifyCSS(&quot;cssField&quot;);"> <label for="removeLastSemicolon">Loại bỏ dấu chấm phẩy cuối cùng cho chế độ một dòng</label></p><p><input type="checkbox" id="singleBreak" onchange="beautifyCSS(&quot;cssField&quot;);"> <label for="singleBreak">Loại bỏ dòng trắng</label></p></div><button class="button" onclick="beautifyCSS(&quot;cssField&quot;);">Beautifier Code</button></div></div><div class="clear"></div><h2  style="display: block; clear:both">Kết quả:</h2><pre id="highlightedResult" style="display: block;"><code>#foo <span class="pn">{</span><span class="pr">
  width</span><span class="pn">:</span><span class="vl">560px</span><span class="pn">;</span>
<span class="pr">  background</span><span class="pn">:</span><span class="vl">#ffffff url<span class="pn">(</span>http<span class="pn">:</span>https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqMs1Uu61KFVYXmuKeXLdYbjCHoSlggjfF-wQl2bLCpQSLJoasy5_eRhdh6OV1YMi8gq5d4vw0V9Kb4YWsaaKhibmupGT5kCPJw_AbtHFnpNxYBeCVq3l6pPpcjpPHgE8jNZMDBWw76mk/s1600/-04.jpg<span class="pn">)</span> repeat</span><span class="pn">;</span>
<span class="pr">  border-collapse</span><span class="pn">:</span><span class="vl">collapse</span><span class="pn">;</span>
<span class="pr">  color</span><span class="pn">:</span><span class="vl">white</span><span class="pn">;</span>
<span class="pn">}</span>

.foo td,
.foo th <span class="pn">{</span><span class="pr">
  border</span><span class="pn">:</span><span class="vl">2px solid white</span><span class="pn">;</span>
<span class="pr">  padding</span><span class="pn">:</span><span class="vl">5px</span><span class="pn">;</span>
<span class="pn">}</span></code></pre></div>
<script type="text/javascript">
/*
CSS Compressor & Beautifier Script by Taufik Nurrohman,
https://plus.google.com/108949996304093815163/posts
*/

function get(id) {
 return document.getElementById(id);
}

var hc = get('highlightCode'),
 sa = get('stripAllComment'),
 sc = get('superCompact'),
 cm = get('keepLastComma'),
 bi = get('betterIndentation'),
 bs = get('breakSelector'),
 tt = get('toTab'),
 to = get('tabOpt').getElementsByTagName('input'),
 sb = get('spaceBetween'),
 ip = get('inlineSingleProp'),
 rs = get('removeLastSemicolon'),
 il = get('inlineLayout'),
 si = get('singleBreak'),
 hr = get('highlightedResult'),
 rt = document.getElementsByTagName('h2')[1];

/* Syntax Highlighter */
function highlightCode(el) {
 if (hc.checked) {
  var t = el.innerHTML;
  t = t.replace(/\{([\s\S]+?)\}/g, function(m) {
   return m.replace(/\'(.*?)\'/g, "<span class='st'>\'$1\'</span>").replace(/\"(.*?)\"/g, "<span class='st'>\"$1\"</span>").replace(/(\{|\n|;)?(.[^\{]*?):(.[^\{]*?)(;|\})/g, "$1<span class='pr'>$2</span>:<span class='vl'>$3</span>$4").replace(/<span class='pr'>\{/g, "{<span class='pr'>");
  });
  t = t.replace(/&lt;(.*?)('|")(.*?)('|")&gt;/g, function(m) {
   return m.replace(/'(.*?)'/g, "<span class='vl'>\'$1\'</span>").replace(/"(.*?)"/g, "<span class='vl'>\"$1\"</span>")
  });
  t = t.replace(/\{([\s\S]+?)\}/g, function(m) {
   return m.replace(/([\(\)\{\}\[\]\:\;\,]+)/g, "<span class='pn'>$1</span>").replace(/\!important/ig, "<span class='im'>!important</span>");
  });
  t = t.replace(/\/\*([\w\W]+?)\*\//gm, "<span class='cm'>/*$1*/</span>");
  el.innerHTML = '<code>' + t + '</code>';
  hr.style.display = "block";
  rt.style.display = "block";
 } else {
  hr.style.display = "none";
  rt.style.display = "none";
 }
}

/* CSS Compressor */
function compressCSS(id) {
 var cf = get(id),
  iq = /@(media|-w|-m|-o|keyframes|page)(.*?)\{([\s\S]+?)?\}\}/ig,
  v = cf.value,
  ln = v.length;
 v = (sa.checked || sc.checked) ? v.replace(/\/\*[\w\W]*?\*\//gm, "") : v.replace(/(\n+)?(\/\*[\w\W]*?\*\/)(\n+)?/gm, "\n$2\n");
 v = v.replace(/([\n\r\t\s ]+)?([\,\:\;\{\}]+?)([\n\r\t\s ]+)?/g, "$2");
 v = (sc.checked) ? v : v.replace(/\}(?!\})/g, "}\n");
 v = (bi.checked) ? v.replace(iq, function(m) {
  return m.replace(/\n+/g, "\n  ");
 }) : v.replace(iq, function(m) {
  return m.replace(/\n+/g, "");
 });
 v = (bi.checked && !sc.checked) ? v.replace(/\}\}/g, "}\n}") : v;
 v = (bi.checked && !sc.checked) ? v.replace(/@(media|-w|-m|-o|keyframes)(.*?)\{/g, "@$1$2{\n  ") : v;
 v = (cm.checked) ? v.replace(/;\}/g, "}") : v.replace(/\}/g,";}").replace(/;+\}/g,";}").replace(/\};\}/g,"}}");
 v = v.replace(/\:0(px|em|pt)/ig, ":0");
 v = v.replace(/ 0(px|em|pt)/ig, " 0");
 //v = v.replace(/ +?(\>|\+|\~) +?/g,"$1");
 v = v.replace(/\s+\!important/ig, "!important");
 v = v.replace(/(^\n+|\n+$)/, "");
 cf.value = v;
 hr.innerHTML = '\/\* ' + (ln - v.length) + ' of ' + ln + ' unused characters has been removed. \*\/\n' + v.replace(/</g, "&lt;").replace(/>/g, "&gt;");
 highlightCode(hr);
}
/* CSS Beautifier */
function beautifyCSS(id) {
 sc.checked = false;
 sa.checked = false;
 bi.checked = false;
 compressCSS('cssField'); // Compress first...
 var bf = get(id),
  iq = /\n@(media|-w|-m|-o|keyframes|page)(.*?)\{([\s\S]+?)?\}\n\}/ig, // Inside `@query{}`
  v = bf.value;
 if (!il.checked) {
  v = v.split(';').join(';\n  ');
  v = v.split('{').join(' {\n  ');
  v = v.split('}').join(';\n}\n');
  v = v.replace(/\}([\n\s;]+?)?\}/g, "}\n}");
  v = (bs.checked) ? v.replace(/\n(.*?)\{/g, function(m) {
   return m.replace(/,/g, ",\n"); // Break multiple selectors
  }) : v;
  v = v.replace(/@([\s\S]+?)\{/g, function(m) {
   return m.replace(/,\n/g, ", ");
  });
  v = v.replace(iq, function(m) {
   return m.replace(/\n/g, "\n  ").replace(/\n\s+\n/g, "\n").replace(/\}\n+\s+\}/g, "}\n}");
  });
 } else {
  v = v.replace(/;/g, "; ");
  v = v.replace(/\{(.*?)\}/g, " { $1; }");
  v = v.replace(/\}\}/g, "}\n}");
  v = v.replace(iq, function(m) {
   return m.replace(/\n/g, "\n    ").replace(/\n+\s+\n/g, "\n").replace(/\}\n\s+\}/g, "}\n}");
  })
  v = v.replace(/\{(.*?)\{(.*?):(.*?)\}\n/g, "{\n     $1 { $2:$3}\n");
 }
 v = v.replace(/\{\n  ;\n\}|\{ ; \}/g, "{}"); // Empty selectors
 v = (sb.checked) ? v.replace(/\{([\s\S]+?)\}|\((.*?)\)/gm, function(m) {
  return m.replace(/(,|\:)/g, "$1 ");
 }) : v;
 v = (sb.checked) ? v.replace(/(.*?)\{/g, function(m) {
  return m.replace(/,/g, ", ");
 }) : v;
 v = v.replace(/\!important/g, " !important");
 v = v.replace(/data: ?image(.*?);([\n\r\t\s]+)base64, ?/g, "data:image$1;base64,"); // Data URI Image
 v = v.replace(/\n\s+@(.*?)\{\n    /g, "\n\n@$1{\n  ");
 //v = v.replace(/(\>|\+|\~)/g," $1 ");
 v = (ip.checked) ? v.replace(/(.*){(\n\s+|\t)(.*)\:(.*);\n(\s+)?}/g, "$1{$3:$4;}") : v;
 v = (rs.checked) ? v.replace(/\{(.*?)\;(\s+)?\}/g, "{$1$2}") : v;
 v = (tt.checked && to[0].checked) ? v.split(/  /).join('\t') : v;
 v = (tt.checked && to[1].checked) ? v.split(/  /).join('    ') : v;
 v = (il.checked) ? v.replace(iq, function(m) {
  return m.replace(/\}/g, "} ");
 }) : v;
 v = (si.checked) ? v.replace(/(\}|\*\/)\n+/g, "$1\n").replace(/\/\*/g, "\n/*") : v.replace(/\*\/\n(.)/g, "*/\n\n$1");
 v = v.replace(/(^\n+|\n+$)/, "");
 bs.disabled = (il.checked) ? true : false;
 ip.disabled = (il.checked) ? true : false;
 tt.disabled = (il.checked) ? true : false;
 to[0].disabled = (tt.checked && !il.checked) ? false : true;
 to[1].disabled = (tt.checked && !il.checked) ? false : true;
 bf.value = v;
 hr.innerHTML = v.replace(/</g, "&lt;").replace(/>/g, "&gt;");
 highlightCode(hr);
}

/* Clear the field value */
function clearField(id) {
 var fl = get(id);
 fl.value = "";
 fl.focus();
}

/* Select All */
function selectAll(id) {
 get(id).focus();
 get(id).select();
}
</script><!--Beautifier Script-->