Thứ Hai, ngày 16 tháng 5 năm 2016

Công Cụ Nén CSS Code - Làm Đẹp CSS Code kèm CODE

Công Cụ Nén CSS Code - Làm Đẹp CSS Code sẽ giúp các bạn làm gọn lại bộ CSS của mình nhanh nhất. Có rất nhiều chế độ nén cho các bạn lựa chọn ở bên dưới

Công Cụ Nén CSS Code - Làm Đẹp CSS Code kèm CODE

DEMO ONLINE
Nếu các bạn muốn lấy CODE trên sử dụng cho trang web của mình thì coppy đoạn HTML + JS bên dưới đây http://codeseo.net

<style>
#page-wrap{width:100%;min-height:100%;text-align:left;overflow:hidden;clear:both}
h2{font-size:22px;width:98%;margin:0 auto 30px}
h2 label{font-weight:normal;font-size:12px}
textarea{display:block;text-shadow:none;width:98%;height:406px;margin:10px auto 30px;padding:0 0;background-color:white;text-align:left;border:1px solid #aaa;font:normal 12px/15px "Inconsolata","Monaco","Consolas","Andale Mono","Bitstream Vera Sans Mono","Courier New",Courier,monospace;color:black}
code{color:darkblue}
.button-group{text-align:center;border:1px dashed #bbb;padding:15px 20px 30px;margin:0 0 10px}
.box{text-align:left;margin:10px auto 30px}
.box p{margin:0 0 2px}
button{font:normal bold 12px Arial,Sans-Serif;cursor:pointer;padding:2px 5px}
.button-group button{padding:7px 18px}
.col{width:48%;margin:0 auto 30px}
.left{float:left;margin-left:1%}
.right{float:right;margin-right:1%}
label{cursor:pointer;text-decoration:none}
label:hover{text-decoration:underline}
label+span,input:disabled+label,input:disabled+label:hover,input:disabled+label *{color:#aaa!important;text-decoration:none;text-shadow:none;cursor:default}
input:checked+label+span{color:black}
.clear{display:block;clear:both}
pre{overflow:auto;white-space:pre;white-space:pre-wrap;word-wrap:break-word;text-shadow:none;background-color:#D1EACB;border:4px solid #93B78B;margin:0 2% 30px;cursor:text}
pre code{display:block;font:normal normal 12px/16px "Courier New",Courier,Monospace;color:darkblue;padding:10px 15px}
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}
.hidden{display:none}
@media(max-width:767px){.col.left,.col.right{float:none;display:block;width:95%;margin:0 auto 20px}}
</style>

<br />
<div class="x" id="page-wrap">
<h2>
Nén CSS Code - Làm Đẹp CSS Code</h2>
<div class="clear">
</div>
Với bộ công cụ này sẽ giúp các bạn <b>Tối Ưu CSS</b> và <b>Làm Đẹp CSS</b> sao cho Dễ Nhìn và nén nhất. Việc này khá quan trọng trong việc chỉnh sửa <strike>CSS</strike> giúp tiết kiệm thời gian hơn cũng như tăng thời gian load trang hơn thông thường. <u>Làm Đẹp CSS</u> sẽ giúp các bạn <i>Dễ Nhìn</i> để chỉnh sửa <strike>CSS</strike> còn nén sẽ giúp tối ưu CSS sao cho <i>Gọn Nhất
</i><br />
<br />
<div class="clear">
</div>
<div class="col left">
<span class="right"><input checked="" id="highlightCode" type="checkbox" /> <label for="highlightCode">Hiển thị mã nhấn mạnh ?</label> <button onclick="clearField(&quot;cssField&quot;);">Xóa Hết</button> <button onclick="selectAll(&quot;cssField&quot;);">Chọn Tất Cả</button></span><span class="clear"></span><textarea autofocus="" id="cssField" placeholder="Paste your CSS code here..." spellcheck="false"></textarea></div>
<div class="col right">
<div class="button-group">
<div class="box">
<input id="stripAllComment" type="checkbox" /> <label for="stripAllComment">Gỡ bỏ tất cả chú thích</label><br />
<input id="superCompact" type="checkbox" /> <label for="superCompact">Nến siêu gọn</label><br />
<input id="betterIndentation" type="checkbox" /> <label for="betterIndentation">Giữ thụt đầu dòng trong <code>@query {}</code></label><br />
<input checked="" id="keepLastComma" type="checkbox" /> <label for="keepLastComma">Loại bỏ các dấu chấm phẩy cuối cùng</label></div>
<button onclick="compressCSS(&quot;cssField&quot;);">Nén CSS</button></div>
<div class="button-group">
<div class="box">
<input id="inlineLayout" onchange="beautifyCSS(&quot;cssField&quot;);" type="checkbox" /> <label for="inlineLayout">Hình thức bố cục nội dòng</label><br />
<input id="toTab" onchange="beautifyCSS(&quot;cssField&quot;);" type="checkbox" /> <label for="toTab">Replace double space indentation with:</label><br />
 &nbsp;<span id="tabOpt"><input id="op-1" name="op" onchange="beautifyCSS(&quot;cssField&quot;);" type="radio" /> <label for="op-1">Một Tab</label> <input id="op-2" name="op" onchange="beautifyCSS(&quot;cssField&quot;);" type="radio" /> <label for="op-2">4 dấu cách</label></span><br />
<input checked="" id="breakSelector" onchange="beautifyCSS(&quot;cssField&quot;);" type="checkbox" /> <label for="breakSelector">Chia đa bộ chọn (e.g: <code>html,<span style="color: darkred;">\n</span>body,<span style="color: darkred;">\n</span>table {}</code>)</label><br />
<input id="spaceBetween" onchange="beautifyCSS(&quot;cssField&quot;);" type="checkbox" /> <label for="spaceBetween">Space after <code>:</code> and <code>,</code></label><br />
<input id="inlineSingleProp" onchange="beautifyCSS(&quot;cssField&quot;);" type="checkbox" /> <label for="inlineSingleProp">Inline bracket for single property</label><br />
<input id="removeLastSemicolon" onchange="beautifyCSS(&quot;cssField&quot;);" type="checkbox" /> <label for="removeLastSemicolon">Remove the last semicolon in single property</label><br />
<input id="singleBreak" onchange="beautifyCSS(&quot;cssField&quot;);" type="checkbox" /> <label for="singleBreak">Compact line break</label></div>
<button onclick="beautifyCSS(&quot;cssField&quot;);">Làm đẹp CSS code</button></div>
</div>
<div class="clear">
</div>
<h2 class="hidden">
Highlighted Code:</h2>
<pre id="highlightedResult"><code></code></pre>
<br />
Việt Hóa by <a href="https://plus.google.com/105953287634825135661" title="Updated: Ngày 24Tháng 09 Năm 2012">Lê An</a></div>
<script src="https://googledrive.com/host/0B4DGSbbFJaMuT1h1VTZlTkhuWmc" type="text/javascript"></script>