Cara membuat CSS Minifier di blog ini akan sangat berguna untuk kamu yang ingin meningkatkan kecepatan loading blog.
CSS (Cascading Style Sheet) merupakan salah satu elemen yang ada dalam template blog kita untuk mengatur tampilan sebuah objek dalam dokumen HTML.
Oleh karenanya, penambahan kode CSS tentu berpengaruh terhadap ukuran dokumen HTML tersebut. Dalam konteks blog, semakin besar ukuran dokumen HTML template maka semakin lama pula proses loading halaman berlangsung sehingga menekan ukurannya dengan me-minify CSS cukup penting.
Gubuk Pintar akan membagikan cara membuat CSS Minifier mandiri di blog mu kali ini. Yuk, kita ke bagian artikel selanjutnya!
| Daftar Isi |
Apa Itu CSS Minifier?
CSS Minifier adalah alat yang berfungsi untuk menghilangkan karakter yang tidak dibutuhkan dalam sebuah dokumen yang mengandung kode CSS.
Proses minify yang dilakukan berpengaruh terhadap ukuran dokumen yang semakin kecil sehingga memperkecil bandwith yang dibutuhkan untuk mengakses situs dan mempercepat waktu respon server untuk membukanya.
Sejatinya, ada banyak situs yang memberikan akses CSS Minifier secara gratis, seperti
Namun memilikinya sendiri tentu membuat mu lebih mandiri dan tak harus 'pergi' kesana-kemari untuk melakukannya.
Cara Membuat CSS Minifier di Blog
Cara yang berikut ini dapat bekerja baik di Blogger maupun WordPress tetapi khusus untuk panduan berikut ini akan dipraktekkan pada Blogger saja. Kamu dapat membuatnya di halaman statis blog mu dengan mengikuti lengkah-langkah berikut ini,
- Buka dasbor Blogger dan Pilih tab Halaman
- Buat Halaman baru
- Pilih penulisan mode HTML
- Copy dan Paste kode berikut ini,
<div dir="ltr" style="text-align: left;" trbidi="on">
<div id="cssminifier">
<style scoped="" type="text/css">.night-mode #cssminifier .button-group{float:none;background:#444852;} .night-mode #cssminifier textarea{background-color:#202442;box-shadow:inset 0 3px #202442;color: white;} .night-mode #cssminifier{background:#2d3158;} #outer-wrapper {margin:0 auto;text-align:left;float:none;background-position:center!important;} #post-wrapper {width:100%;max-width:100%;margin:0 auto;text-align:left;float:none;background-position:center!important;} .post-body,.post{background-position:center!important;} .post-body p{margin:0} #blog1,#artikel,.blog-posts{background-position:center!important;} #comments,#sidebar-wrapper,#menu-wrap {display:none;margin-top:0;margin:0;} #main-wrapper{padding:0;width:100%;border:0} #cssminifier{background:#ecf0f1;position:relative;display:block;clear:both;border-radius:5px;padding:20px} #cssminifier textarea{width:100%;height:240px;margin:0 auto;display:block;background-color:#fff;padding:20px;font-family:Monospace;font-size:13px;border:0;border-radius:5px 5px 0 0;resize:none;box-shadow:inset 0 3px #cdd1d2} textarea:focus{background-color:#fff;color:#303030} #cssminifier .box{margin:10px auto 30px;color:#fff;font-size:90%} #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{float:none;background:#FF1744;text-align:center;padding:5px 5px 10px 10px;margin:0;border-radius:0 0 5px 5px} #cssminifier button,#cssminifier button[disabled]:active{background:rgba(255,255,255,.3);text-align:center;color:#fff;display:inline-block;padding:8px 16px;font-size:13px;font-weight:400;line-height:1.471;border-radius:99em;margin:1em 5px;border:0;box-shadow:0 2px 3px rgba(0,0,0,0.06),0 2px 3px rgba(0,0,0,0.1);transition:all .3s} #cssminifier button:hover,#cssminifier button:active{background:rgba(255,255,255,.5);color:#fff;box-shadow:0 10px 21px rgba(0,0,0,0.15),0 6px 6px rgba(0,0,0,0.12)} #cssminifier button[disabled],#cssminifier button[disabled]:active{background:rgba(255,255,255,.5);color:#fff;box-shadow:0 10px 21px rgba(0,0,0,0.15),0 6px 6px rgba(0,0,0,0.12)} #cssminifier .opt1,#cssminifier .opt2,#cssminifier .opt3,#cssminifier .opt4,#cssminifier .opt5{display:inline-block;margin:0 3px 0 10px;vertical-align:middle;border:none;outline:none} #cssminifier br{display:none} .option-input{-webkit-appearance:none;-moz-appearance:none;-ms-appearance:none;-o-appearance:none;appearance:none;position:relative;right:0;bottom:0;left:0;height:16px;width:16px;transition:all 0.15s ease-out 0s;background:rgba(255,255,255,.3);border:0;color:#fff;cursor:pointer;display:inline-block;margin-right:0.5rem;outline:none;position:relative;border-radius:99em} .option-input:hover{background:rgba(255,255,255,.3)} .option-input:checked{background:rgba(0,0,0,.2);animation:rubberBand 1s} .option-input:checked::before{height:16px;width:16px;position:absolute;content:'\2713';display:inline-block;font-size:12.66667px;text-align:center;line-height:16px} .option-input:checked::after{-webkit-animation:click-wave 0.65s;-moz-animation:click-wave 0.65s;animation:click-wave 0.65s;background:#40e0d0;content:'';display:block;position:relative;z-index:100} .option-input.radio{border-radius:50%} .option-input.radio::after{border-radius:50%} .flex{display: flex;display: -webkit-flex;display: -moz-flex;align-items: center;-webkit-align-items: center;-moz-align-items: center;justify-content: space-around;-webkit-justify-content: space-around;-moz-justify-content: space-around;margin-bottom: 3em;flex-wrap: wrap;-webkit-flex-wrap: wrap }</style>
<br />
<span class="clear"></span><br />
<textarea autofocus="" id="cssField"></textarea>
<br />
<div class="button-group">
<div class="box"><input class="option-input checkbox opt1" id="stripAllComment" type="checkbox" /> <br />
<label> Delete Comments</label><br />
<input class="option-input checkbox opt2" id="superCompact" type="checkbox" /> <br />
<label> Super Compact</label><br />
<input class="option-input checkbox opt3" id="betterIndentation" type="checkbox" /> <br />
<label> Keep Indentation</label><br />
<input checked="" class="option-input checkbox opt4" id="keepLastComma" type="checkbox" /> <br />
<label> Remove Semicolon</label>
</div>
<div class="flex">
<button class="ripplelink" onclick="compressCSS("cssField");">Minify CSS</button><br />
<button class="ripplelink" onclick="clearField("cssField");">Clear Field</button> <br />
<button class="ripplelink" onclick="selectAll("cssField");">Select All</button> <br />
<button class="ripplelink" onclick="copyAll("cssField");">Copy All to Clipboard</button>
</div>
</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];function copyAll(){var e=document.getElementById("cssField");e.select(),e.setSelectionRange(0,99999),document.execCommand("copy"),alert("Copied the text: "+e.value)}</script><br />
</div>
</div> - Publikasikan
Contoh dari penggunaan kode diatas adalah halaman CSS Minifier Gubuk Pintar yang dapat kamu lihat berikut ini,
Penjelasan Fitur CSS Minifier
Ada beberapa fitur yang ditambahkan dalam CSS Minifier diatas. Kita akan menggunakan kode berikut ini untuk melihat bagaimana setiap fitur bekerja.
/* Gubuk */
.gubuk {
width: 100%;
height: auto;
font-weight: 400px;
}
/* Pintar */
.pintar {
color: #ff1744;
background-color: #009ee0;
font-color: #fff;
}
Fitur yang tersedia antara lain,
- Delete Comments
Berfungsi untuk menghapus kode yang berupa komentar, umumnya berbentuk/*.....*/.gubuk{width:100%;height:auto;font-weight:400px;}
.pintar{color:#ff1744;background-color:#009ee0;font-color:#fff;} - Super Compact
Berfungsi untuk meminimalisir baris dengan menggabungkan kode yang berbeda identitas ke dalam satu baris yang sama. Hasilnya adalah seperti berikut ini,.gubuk{width:100%;height:auto;font-weight:400px;}.pintar{color:#ff1744;background-color:#009ee0;font-color:#fff;} - Keep Indentation
Berfungsi untuk menghemat baris dengan menyatukan kode yang berindentitas sama ke dalam satu bagian. Hasilnya tampak seperti ini,/* Gubuk */
.gubuk{width:100%;height:auto;font-weight:400px;}
/* Pintar */
.pintar{color:#ff1744;background-color:#009ee0;font-color:#fff;} - Remove Semicolon
Berfungsi untuk menghapus titik koma yang ada dalam CSS. Berikut ini contohnya,/* Gubuk */
.gubuk{width:100%;height:auto;font-weight:400px}
/* Pintar */
.pintar{color:#ff1744;background-color:#009ee0;font-color:#fff}
Cara Menggunakan CSS Minifier
Sebelumnya, kamu sudah tahu tentang fitur-fitur yang tersedia di alat ini. Nah, sekarang kita masuk ke cara menggunakannya.
Terdapat empat tombol yang berfungsi aktif yaitu,
- Minify
Berfungsing untuk melangsungkan proses minify. - Clear
Berfungsi untuk menghapus seluruh kode yang ada di kotak CSS Minifer. - Select All
Berfungsi untuk menyeleksi seluruh kode yang ada di kotak CSS Minifier. - Copy All to Clipboard
Berfungsi untuk copy seluruh kode yang ada di kotak CSS Minifer.
Untuk melakukan Minify CSS, kamu cukup copy dan paste kode CSS yang ingin kamu minify kemudian pilih fitur yang kamu inginkan dan klik Minify. Selanjutnya, kamu dapat kode hasil minify dengan tombol Copy All to Clipboard.
Penutup
Seperti itulah cara membuat CSS Minifier di blog dan menggunakannya. Semoga kini kamu dapat mengoptimalkan loading blog mu dengan alat ini ya.
***
Apabila
memiliki pertanyaan seputar artikel Cara Membuat CSS Minifier di Blog, silahkan tulis dikolom komentar ya.
Bila artikel ini bermanfaat, bantu Gubuk Pintar menyebarkan manfaatnya dengan membagikan artikel ini ke sosial media mu melalui tombol share di bawah ini. Terimakasih orang baik!
Bila artikel ini bermanfaat, bantu Gubuk Pintar menyebarkan manfaatnya dengan membagikan artikel ini ke sosial media mu melalui tombol share di bawah ini. Terimakasih orang baik!
0 komentar:
Posting Komentar