Mengoptimalkan Ukuran File CSS
Salahsatu kendala cepat tidaknya website ditampilkan di browser selain koneksi internet adalah besar-kecilnya file dari halaman website itu sendiri. Termasuk beberapa elemen pendukung meliputi gambar, javascript, swf, css dll.
Nah kali ini kita akan bahas bagaimana cara file css agar lebih kecil ukurannya sehingga halaman website semakin cepat di-load oleh browser.
Contoh kecil sbb :
.kotak {font-size:11px;color:#333333;}
.bulat {font-size:11px;color:#333333;}
Karena kedua class tersebut memiliki properties yang sama sebaiknya tinggal digabung saja menjadi kayak gini :
.kotak,.bulat {font-size:11px;color:#333333;}
Hemat beberapa huruf kan :)
.hitam {color:#000000;}
.putih {color:#ffffff;}
Untuk warna dengan nilai hexadecimal sama, bisa ditulis sebagian aja. Hasilnya kayak gini :
.hitam {color:#000;}
.putih {color:#fff;}
Lumayan bisa mengurangi ukuran file css meskipun cuman beberapa byte aja :P
Apalagi yah… hmmm… hahahaha… lupa :D
Sementara sekian dulu sedikit tutorial css kali ini kapan-kapan nyambung lagi :)
hehe…iya juga juga..yang mubazir-mubazir bisa dihilangin artinya lebih singkat biar file nya lebih kecil. sip kawan
.
Comment by fitri alifah | 28 May 2009 | 11:21 am
Nice tutorial…
lama ga komen di blog ini boleh nambahin dikit ya… :-p
ada banyak lagi yg bisa dipersingkat di css
misalnya memanfaatkan shorthand property, yaitu property yang bisa menggabung beberapa properti css, misalnya
Border:solid 1px #abc;
yang menggabung 3 properti border.
beberapa properti juga tersedia dengan value yang bisa berbeda2, sehingga kita bisa memilih yang paling efisien dan hemat tempat.
misalnya margin bisa terdiri dari 1,2,3 jumlah value.
Comment by BayuBayu | 3 June 2009 | 10:03 am
Yup nice info bayu…
Ada lagi nih, kalo bisa untuk tahap akhir kode css dijadikan satu baris semuanya. Cara ini juga dapat menghemat ukuran file css lho.
Tapi kalo masih tahap develop mending jangan dulu dijadikan satu baris cz dapat membingungkan hehehehe…
Comment by Zawa | 3 June 2009 | 10:19 am
ternyata bisa diperkecil dengan sedikit permainan kata…..
Comment by komuter | 9 June 2009 | 8:58 am
*catet*
hueheueh… lha wong nggak ngerti aku sama yang begini-begitu 
tapi pastinya bermanfaat bagi yang membutuhkan *tumben bijak gue 
*
sekedar catet, Wa
Comment by tuteh | 10 June 2009 | 2:39 pm
aku udah lama ga praktekin tips2 utak/ik blog mu wa…
Comment by tjahaju | 14 June 2009 | 2:48 pm
kunjungan
Comment by soulharmony | 21 June 2009 | 4:59 pm
weww, nambah ilmu lagi makasih ya mas saya tunggu ilmu lainnya loh thanks
Comment by Investasi | 24 June 2009 | 10:49 pm
kalo males handcoding atau mau mempercepat proses optimisasi bisa pake http://csstidy.sourceforge.net/
Comment by Louis Larry | 25 June 2009 | 2:44 pm
Comment by Zawa | 25 June 2009 | 6:40 pm
happy weekend, wa…
Comment by tuteh | 27 June 2009 | 10:46 am
kadang msh byk jg yg nulis css spt:
font-size: 12px;
font-colour: #990000;
font-family: arial;
pdhl bisa disingkat jadi:
font: 12px arial;
colour: #990000;
atau nulis ‘0′ pake px spt:
padding: 15px 0px 15px 0px;
bisa disingkat dgn:
padding: 15px 0;
bener ga om zawa? hehe..
ikutan belajar ya…
Comment by YNa | 28 June 2009 | 12:46 pm
ok makasih posting nya nambah ilmu lagi saya
Comment by Bisnis | 10 July 2009 | 1:04 am
Saya cuma minta izin Link ini dipasangin di blog ane.ok
Comment by vulkanisir ban blog | 14 July 2009 | 11:04 am