Berlanjut pada topik utama kita, kompress kode css ini bisa kita lakukan secara manual maupun dengan menggunakan tools kompress css yang sekarang sudah banyak tersedia di internet. Saya akan berikan contoh kasusnya, perhatikan kode css berikut ini :
a:link {kode css diatas adalah kode standard yang biasa sobat jumpai di HTML template, jika saya kompress secara manual maka hasilnya akan seperti dibawah ini :
color:#006699; text-decoration:none;
}
a:visited {
color:#006699; text-decoration:none;
}
a:hover {
color:#006699; text-decoration:underline;
}
#main .post-body a:link {
color:#006699; text-decoration:underline;
}
#main .post-body a:visited {
color:#006699; text-decoration:underline;
}
#main .post-body a:hover {
color:#006699; text-decoration:none;
}
a:link,a:visited,#main .post-body a:hover {apa yang membedakan kedua bagian diatas ? jika sobat cermat melihat seluruh kode css yang paling atas (sebelum saya kompress) bahwa semua bagian dalam kurung {....} yang membedakan hanya dua bagian yaitu pada penulisan text-decoration:none dan text-decoration:underline. Pemakaian spasi juga sangat berpengaruh dalam penulisan css, jika saya rapatkan maka hasilnya menjadi seperti berikut ini :
color:#006699;
text-decoration:none
}
a:hover,#main .post-body a:link,#main .post-body a:visited {
color:#006699;
text-decoration:underline
}
a:link,a:visited,#main .post-body a:hover{color:#006699;text-decoration:none}Untuk mengkompress kode css pada template, sobat tidak perlu susah payah mengkompress-nya secara manual, karena sekarang sudah banyak tools gratisan yang menyediakan fasilitas kompress css, salah satu yang biasa saya gunakan adalah situs http://www.csscompressor.com
a:hover,#main .post-body a:link,#main .post-body a:visited{color:#006699;text-decoration:underline}
jangan lupa kompress css nya dari Tag
<b:skin><![CDATA[/*Sampai dengan kode :
]]></b:skin>
0 komentar
Tambahkan Komentar Anda