Mungkin kalian malas menggunakan cara manual untuk mengcompress CSS. Berikut ini petunjuk dasar
compress CSS secara manual. Karena
Zackmaru memang terbiasa ngetik manual CSS nya ==v Karena ketika aku menggunakan CSS Compressor Online, masih ada spasi yang belum terbuang, dan tanda titik koma (;) yang paling akhir ternyata hilang. Waduh, kok makin gak beres nih CSS nya.
Memangnya kode titik koma ; berpengaruh ya? Tentu saja, karena titik koma merupakan penanda bahwa pengaturan style CSS tersebut selesai (sorry gue pake istilah asal-asalan karena gak ngerti namanya :P ). Jika tanda titik koma ; tidak ada, maka browser tetap memproses bagian tersebut karena belum dianggap selesai (nambah loading jadi lama dikit).
Sekedar memberi contoh jika kalian ingin mengcompress CSS secara manual ==v Jika kode awal CSS kalian contohnya seperti ini:
body {
margin : 0px;
padding : 0px;
font-family : Arial;
font-size : 12pt;
color : black;
border : 1px solid #ff0000;
}
Maka untuk mengcompressnya, cukup hapus saja spasi-spasi yang tidak berguna ==v.
Jika kalian bingun bagian manakah spasi-spasi yang tidak berguna, coba lihat dibawah ini yang aku beri warna merah:
body {
margin : 0px;
padding : 0px;
font-family : Arial;
font-size : 12pt;
color : black;
border : 1px solid #ff0000;
}
Apakah Break Space juga dihapus? Yuph, hapus Break Space juga. Apa sih Break Space itu? Break Space itu adalah ganti baris (ketika kalian tekan ENTER, akan ganti baris. Kurang jelas? SPasi kebawah itu namanya Break Space). Jadi nanti hasilnya seperti ini:
body{margin:0px;padding:0px;font-family:Arial;font-size:12pt;color:black;border:1px solid #ff0000;}
Selain itu, gabungkan juga CSS yang sama. Contohnya CSS untuk background. Coba lihat dibawah ini:
background-image: url(http://blabla.com/gambar.jpg);
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed;
background-color: white;
Kode background diatas terlalu banyak. Bisa kalian ringkas menjadi satu seperti ini:
background:url(http://blabla.com/gambar.jpg) no-repeat center center fixed white;
Masih pusing dengan tutorial diatas? Sama, aku juga pusing. Aku bingung menulis kata-katanya agar mudah dimengerti. Tapi yasudahlah... Yang penting sudah diposting. :P
Belum ada tanggapan untuk "Trik Compress CSS Dengan Cara Manual"
Posting Komentar