Cara Compress CSS Secara Manual

Mungkin sobat semua malas menggunakan cara manual untuk mengcompress CSS. Berikut ini petunjuk dasar compress CSS secara manual. Karena  mungkin terbiasa ngetik manual CSS nya  Karena ketika saya 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, Jika kode awal CSS sobat 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 biru:

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 sobat 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 sobat ringkas menjadi satu seperti ini:

background:url(http://blabla.com/gambar.jpg) no-repeat center center fixed white;

Gimana sob kurang jelas ea dengan tutorial diatas? Sama, sama juga pusing. saya bingung mesti menulis kalimatnya agar mudah dimengerti. Tapi gimana lagi... lha wong  sudah dipublis hehehehe....

Semoga bermanfaat!!!

BERLANGGANAN VIA EMAIL
Jika sobat menyukai artikel di Blog ini silahkan masukan email untuk berlangganan jangan lupa like'a hehehe,,,
Enter your email address:


Delivered by FeedBurner