Tại sao cần nén mã CSS?
CSS là một ngôn ngữ khá cơ bản và thiết yếu trong thiết kế web. Tổ hợp CSS trong toàn bộ một trang web ảnh hưởng lớn đến tốc độ hạ tải trang web đó. Nếu CSS nặng thì sẽ gây tốn nhiều thời gian cho việc tải trang web và ngược lại. Chính vì vậy việc nén mã CSS sẽ giúp tăng tốc độ hạ tải trang web.
Ví dụ:
- Đối với dòng mã CSS:
#sidebar h1 {padding-top:3px;
padding-right:0;
padding-bottom:3px;
padding-left:3px;
- Nên rút ngắn lại thành như sau:
#sidebar h1 {padding:3px 0 3px 3px;}
- Ngoài ra có thể loại bỏ các chú thích (comments) và các khoảng trống để tinh giản CSS.
Xóa chú thích
Siêu Nén (Nén tất cả thành một dòng)
3 comments
Ghé Thăm Gởi Lời Chúc Vui Vẻ Đến Admin Nhé.
Xin chào.
---------------
Eng : Lương Văn Thanh
Web : http://www.vietcons.info
Email : vietcons.infovn@gmail.com
<textarea cols="50" id="source" onclick="this.select();" rows="10">Dán code CSS vào đây</textarea>
<span style="font-size: small;"><input id="comments2" type="checkbox" />Xóa chú thích</span>
<span style="font-size: small;"><input id="super" type="checkbox" />Siêu Nén (Nén tất cả thành một dòng)</span>
<span style="font-size: small;"><input onclick="convert('css')" type="button" value="Nén CSS nào!" />
<textarea cols="50" id="result" onclick="this.select();" rows="10">Kết quả...</textarea></span>
<div id="status">
</div>
<script type="text/javascript">function convert(){var b=$id("source"),c=$id("result"),a=$id("status"),d;c.value=cssOptimize(b.value);b=b.value.length;c=c.value.length;d=(b-c)/b*100;a.innerHTML="Trước: <b>"+b+"</b> bytes. Sau: <b>"+c+"</b> bytes. Tối ưu: <b>"+d.toFixed(1)+"%</b>."}function cssOptimize(a){a=a.replace(/[\r\t\n]/g,"");a=a.replace(/ {2,}/g," ");a=a.replace(/ *([{}:;,]) */g,"$1");a=a.replace(/;}/g,"}");a=a.replace(/#([\da-f])\1([\da-f])\2([\da-f])\3/gi,"#$1$2$3");a=a.replace(/(\d+px)( \1){3}/gi,"$1");a=a.replace(/(\d+px \d+px) \1/gi,"$1");a=a.replace(/(\d+px) (\d+px) (\d+px) \2/gi,"$1 $2 $3");a=a.replace(/(\D)0px/gi,"$10");if(!isChecked("super")){a=a.replace(/}/g,"}\n")}if(isChecked("comments2")){a=a.replace(/\/\*.*?\*\//g,"")}return a}function isChecked(a){return $id(a).checked}function $id(a){return document.getElementById(a)};</script>
Cảm ơn bạn đã ghé thăm Troll VL !
Insert Emoticons» Tạm thời ngăn không cho comment với chế độ ẩn danh vì có một số bạn không có thành ý cố tình spam. Mong các bạn thông cảm!
» Bạn nên viết bằng Tiếng Việt có dấu để mọi người dễ đọc, dễ bình luận
» Để liên hệ,góp ý và đóng góp bài viết bạn click vào đây
Sử dụng các thẻ sau cho comments
» Chèn nội dung vào blockquote <b rel="quote">Nội dung blockquote</b>
» Chèn nội dung vào note <em rel="note">Nội dung note</em>
» Chèn code vào khung pre <i rel="pre">Nội dung code</i>
» Chèn hình ảnh <i rel="image">Link hình ảnh</i>
» Chèn video từ youtube [youtube]link video[/youtube]
» Chèn link <i rel="anchor">Link</i>
Mã Hóa Code Tạo và xem trước comments Cancel Reply
&Convert
'Convert
"Convert
<Convert
>