Cara Mudah Memasang CSS Minifier Tool Di Blog

Dalam dunia blogging, tentu kita pasti mengenal apa itu CSS. CSS adalah kependekan dari Cascading Style Sheets yang mempunyai arti suatu kode yang diterapkan untuk memberi sentuhan corak dan gaya tampilan (style) pada sebuah element atau struktur halaman web yang dibuat oleh HTML. Tentunya kode CSS juga mempunyai ukuran yang jika telalu banyak baris kode yang kita buat maka akan berpengaruh pada loading sebuah web.

Sesuai yang telah direkomendasikan para webmaster, kode CSS bisa dikompres agar bisa mengurangi beban di web yang kita buat. Nahh.. kali ini saya akan membagikan sebuah alat untuk meminify atau mengkompress kode CSS agar lebih ringkas dan ringan untuk web kalian. Tool ini sangat cocok bagi kalian yang bekerja dibidang web design ataupu web development.

Silahkan gunakan tool di bawah ini, cukup copy paste kode CSS kalian dan selesai dalam hitungan detik.

Sebagai contoh kode dibawah ini akan saya minify dengan tool diatas :

.foo {
     font-size: 14px;
     color: blue;
}
.bar {
    font-family: calibri, helvetica, sans-serif;
}
.foobar {
        text-decoration: underline;
        font-size: 23px;
        color: black;
}

Dan setelah di minify, akan menjadi seperti ini :

.foo{font-size:14px;color:blue}.bar{font-family:calibri,helvetica,sans-serif}.foobar{text-decoration:underline;font-size:23px;color:black}

Jika kalian ingin menampilkan tool CSS Minifier di blog kalian, silahkan gunakan copy kode dibawah ini dan paste di halaman statis atau postingan kalian. Saya memberikan 2 opsi yaitu untuk blog custom AMP dan Non AMP.

• Blog AMP

Gunakan kode berikut ini :

<amp-iframe noloading title="CSS Minifier"

              src="https://cdn.staticaly.com/gh/HendraSurya/Tool/master/CSS-Minifier.html"

              height="575"

              layout="fixed-height"

              frameborder="0"

              sandbox="allow-forms allow-scripts allow-same-origin allow-modals allow-popups">

<amp-img noloading src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgoPJROUR3BTxIO1puWTTS91nuTE_S61-2tgj8r5sGRG4LaCAsmOUl5D0vGedyPE_dgyCFnXa2MI0dnc2JwVOaONAaGjuLqljoL27j7RdRGC1Su9aG7xlJN5xBaqZnNeaa1cN_anCHvHZg/s1600/placeholder.png"

             layout="fixed-height"

             height="575"

             width="auto"

             placeholder>

</amp-img>

</amp-iframe>

• Blog Non AMP

Gunakan kode berikut :

<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(&quot;cssField&quot;);">Compress CSS</button>

<button onclick="clearField(&quot;cssField&quot;);">Clear Field</button>
 
<button onclick="selectAll(&quot;cssField&quot;);">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(/&lt;(.*?)('|")(.*?)('|")&gt;/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,"&lt;").replace(/>/g,"&gt;"),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>

Simpel kan ??, ayo silahkan dicoba di blog masing-masing. Atau jika kalian ingin menggunakan tool ini tanpa menyimpannya, boleh kok bookmark halaman ini di browser kalian dan gunakan kapan saja kalian mau.

UPDATE !!

Changelog : CDN move to Staticaly (26 Juli 2020)