[HTML Page] Công cụ CSS minifier - Nén css

  • blogger


    Công cụ CSS minifier - Nén css


    Công cụ CSS minifier - Nén css là công cụ để giảm độ dài của css làm tăng tốc độ của website

    Code:
    <div id="cssminifier">
    <style scoped="" type="text/css">
    #cssminifier{background:#ecf0f1;position:relative;display:block;clear:both;border-radius:5px;padding:20px;border:1px solid rgba(0,0,0,0.05)}
    #cssminifier textarea{width:100%;height:240px;margin:0 auto;display:block;background-color:#fff;padding:20px;font:normal 13px 'Courier New',Monospace;border:0;box-shadow:inset 0 0 0 1px rgba(0,0,0,0.05);border-radius:5px 5px 0 0;resize:none}
    textarea:focus{background-color:#FFF;color:#303030}
    #cssminifier .box{margin:10px auto 30px;color:rgba(255,2255,255,.6);}
    #cssminifier .box p{margin:0 0 2px}
    #cssminifier button{cursor:pointer;}
    #cssminifier .col{width:48%;margin:0 auto 30px}
    #cssminifier .left{float:left;margin-left:1%}
    #cssminifier .right{float:right;margin-right:1%}
    #cssminifier .button-group{background:#2980b9;text-align:center;padding:20px 20px 40px 20px;margin:0;border-radius:0 0 5px 5px}
    #cssminifier button,#cssminifier button[disabled]:active{background:rgba(255,255,255,0.2);text-align:center;color:#fefefe;display:inline-block;padding:6px 12px;font-size:14px;font-weight:400;line-height:1.471;border-radius:4px;margin:0 5px;border:0;transition:all .1s}
    #cssminifier button:hover,#cssminifier button:active{background:#fff;color:#2980b9}
    #cssminifier button[disabled],#cssminifier button[disabled]:active{background:#fff;}
    #cssminifier .opt1,#cssminifier .opt2,#cssminifier .opt3,#cssminifier .opt4,#cssminifier .opt5{display:inline-block;margin:0 0 0 10px;vertical-align:middle;border:none;outline:none}
    #cssminifier br{display:none}
    </style>
    <span class="clear"></span>
    <textarea autofocus="" id="cssField" placeholder="Paste your CSS code here..." spellcheck="false"></textarea>
    <div class="button-group">
    <div class="box">
    <input class="opt1" id="stripAllComment" type="checkbox" />
    <label for="stripAllComment">Strip all comments</label>
    <input class="opt2" id="superCompact" type="checkbox" />
    <label for="superCompact">Super compact</label>
    <input class="opt3" id="betterIndentation" type="checkbox" />
    <label for="betterIndentation">Keep indentation</label>
    <input checked="" class="opt4" id="keepLastComma" type="checkbox" />
    <label for="keepLastComma">Remove the last semicolon</label>
    </div>
    <button onclick="compressCSS("cssField");">Compress CSS</button>
    <button onclick="clearField("cssField");">Clear Field</button>
    <button onclick="selectAll("cssField");">Select All</button>
    </div>
    <div class="clear">
    </div>
    <script type="text/javascript">
    function get(e){return document.getElementById(e)}function highlightCode(e){if(hc.checked){var a=e.innerHTML;a=a.replace(/\{([\s\S]+?)\}/g,function(e){return e.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'>")}),a=a.replace(/<(.*?)('|")(.*?)('|")>/g,function(e){return e.replace(/'(.*?)'/g,"<span class='vl'>'$1'</span>").replace(/"(.*?)"/g,"<span class='vl'>"$1"</span>")}),a=a.replace(/\{([\s\S]+?)\}/g,function(e){return e.replace(/([\(\)\{\}\[\]\:\;\,]+)/g,"<span class='pn'>$1</span>").replace(/\!important/gi,"<span class='im'>!important</span>")}),a=a.replace(/\/\*([\w\W]+?)\*\//gm,"<span class='cm'>/*$1*/</span>"),e.innerHTML="<code>"+a+"</code>",hr.style.display="block",rt.style.display="block"}else hr.style.display="none",rt.style.display="none"}function compressCSS(e){var a=get(e),c=/@(media|-w|-m|-o|keyframes|page)(.*?)\{([\s\S]+?)?\}\}/gi,n=a.value,t=n.length;n=sa.checked||sc.checked?n.replace(/\/\*[\w\W]*?\*\//gm,""):n.replace(/(\n+)?(\/\*[\w\W]*?\*\/)(\n+)?/gm,"\n$2\n"),n=n.replace(/([\n\r\t\s ]+)?([\,\:\;\{\}]+?)([\n\r\t\s ]+)?/g,"$2"),n=sc.checked?n:n.replace(/\}(?!\})/g,"}\n"),n=bi.checked?n.replace(c,function(e){return e.replace(/\n+/g,"\n  ")}):n.replace(c,function(e){return e.replace(/\n+/g,"")}),n=bi.checked&&!sc.checked?n.replace(/\}\}/g,"}\n}"):n,n=bi.checked&&!sc.checked?n.replace(/@(media|-w|-m|-o|keyframes)(.*?)\{/g,"@$1$2{\n  "):n,n=cm.checked?n.replace(/;\}/g,"}"):n.replace(/\}/g,";}").replace(/;+\}/g,";}").replace(/\};\}/g,"}}"),n=n.replace(/\:0(px|em|pt)/gi,":0"),n=n.replace(/ 0(px|em|pt)/gi," 0"),n=n.replace(/\s+\!important/gi,"!important"),n=n.replace(/(^\n+|\n+$)/,""),a.value=n,hr.innerHTML="/* "+(t-n.length)+" of "+t+" unused characters has been removed. */\n"+n.replace(/</g,"<").replace(/>/g,">"),highlightCode(hr)}function clearField(e){var a=get(e);a.value="",a.focus()}function selectAll(e){get(e).focus(),get(e).select()}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];
    </script>
    </div>

  • dksFeed
    2. Re: [HTML Page] Công cụ CSS minifier - Nén css
    avatar MEM LV3
    Để làm j ?


    --Chữ ký--
  • the_dav
    @dksFeed đã viết:Để làm j ?

    nén css đó. tăng tốc độ web

  • Sponsored content

Thông tin tác giả
avatar
MEM LV2
Bài viết :
88
Points :
236
Like :
36
blogger
An toàn
Xem lý lịch thành viên
Thông tin tác giả
avatar
MEM LV3
Bài viết :
154
Points :
238
Like :
26
Punbb
Status :
Rất vui khi được tham gia cùng HotroFM !
Xem lý lịch thành viên http://9fgame.forumvi.com/
Thông tin tác giả
avatar
MEM LV3
Bài viết :
222
Points :
319
Like :
47
Punbb
Quản trị
Xem lý lịch thành viên
Thông tin tác giả
Sponsored content
Bài viết liên quan
    Đang tải dữ liệu

Permissions in this forum:
Bạn không có quyền trả lời bài viết

<