Hati-Hati Compress CSS Template

Untuk meningkatkan loading blog, salah satunya dengan compress CSS. Compress CSS adalah hal yang sudah umum dalam dunia blog dan hampir semua blogger melakukannya. Dan dari sekian banyak CSS compressor online, hati2 dengan online CSS compressor dari CSSCompressor.com. Kenapa?? Ini adalah sedikit pengalaman saya ketika compress CSS.

Seperti yang kita tau, tidak semua kode CSS berjalan baik dan mulus di semua browser terutama untuk Internet Explorer. Disini saya menggunakan perbandingan antara Mozilla Firefox dan Internet Explorer 7 karena saya membuat template blog menggunakan Firefox dan hanya pada IE7 tampilan template tersebut "sedikit aneh". Untuk mengakali supaya tampilan template made in ireng_ajah di IE bisa lebih sempurna dan hampir sama dengan tampilan pada Firefox 3.6, saya menggunakan tambahan kode khusus untuk IE7. Contoh :

Misalkan kode CSS untuk bagian sidebar-wrapper seperti ini :

#sidebar-wrapper {
width: 320px;
float: right;
margin: 10px 0 0;
.margin-top:20px; /* IE7 */
}

Ketika template tersebut dibuka dengan Firefox, hasilnya sempurna seperti yang kita inginkan tetapi ketika dibuka dengan IE7, tampilan tersbut tidak sempurna karena ternyata jarak (margin) terlalu dekat dan untuk mengakalinya, ditambahkan kode khusus untuk IE7 yaitu kode yang berwarna merah tersebut.

Kode tersebut berfungsi supaya ketika blog dengan kode template seperti itu dibuka dengan IE7, besarnya margin pada bagian sidebar adalah 20px dan bukan 10px.

Lalu apa hubungannya dengan CSSCompressor.com??

Berikut ini adalah hasil dari compress CSS kode template bagian sidebar diatas menggunakan online CSS compressor dari CSS Compressor dibandingakan dengan dari YaHoo Yui dan CSSDrive

1. CSSCompressor didapat :
#sidebar-wrapper{width:320px;float:right;margin:20px 0 0}

2. YaHoo Yui didapat :
#sidebar-wrapper{width:320px;float:right;margin:10px 0 0;.margin-top:20px;}

3. CSSDrive didapat :
#sidebar-wrapper{ width:320px; float:right; margin:10px 0 0; .margin-top:20px; /* IE7 */}

Tampak untuk hasil dari CSSCompressor.com pada bagian margin menjadi margin:20px 0 0 dimana kode margin 20px 0 0 adalah kode margin bagian atas untuk IE dan jika hasil compress tersebut diaplikasikan pada template, maka tampilan blog pada Firefox akan berubah karena kode asli untuk margin: 10px 0 0;

Untuk hasil dari YaHoo Yui dan CSSDrive sendiri tidak masalah. Kode untuk Firefox dan IE masih utuh. Yang membedakan adalah ratio compress saja.

Selama ini saya sering compress CSS menggunakan CSSCompressor karena ratio hasil compress-nya paling besar, hehehehehe.. Dan untuk mengakalinya, saya edit pada bagian kode yang terdapat kode untuk IE.

Bagaimana dengan sobat sendiri?? Tiap blogger punya favorit tool sendiri untuk compress CSS templatenya tetapi jika sobat mengalami kasus seperti diatas dimana yang tadinya sebelum di compress tampilan blog sempurna baik itu di Firefox dan IE tetapi malah "jepat" setelah kode CSS di compress, bisa jadi penyebabnya seperti diatas.


Note : Setingan compress standar dan bawaan langsung dari css compressor online

Pic : http://www.anythingleft-handed.co.uk/media.html