Hati-Hati Compress CSS Template

css compressor onlineUntuk 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

33 Comments

  1. haha,,saya paling duka css compressor...kalo sama yahoo yui template saya jadi rusak...

  2. This is a great blog post. . It's really nice and informative post. Thanks so much.

  3. makasih nih atas artikelnya, omong2 css template blogger saya ga sempat saya comress soalnya masih sibuk urusan lain.
    saya senang berkunjung di blog kamu soalnya banyak tips yang menarik untuk di cobain, sory yah kalau baru sekarang sempat beri komentar diblognya. salam kenal

  4. This is fantastic information for blog. I really love the way infomration presented in your post. I have added to you in my social bookmark…and i am w8ing ur next post.

  5. This is a good blog, it is encouraging to see people giving value
    through great post.Thanks

  6. This is a good blog, it is encouraging to see people giving value
    through great post.Thanks

  7. Multimedia Blog which contains hundreds of exciting games, challenging, and needed the strategies to solve any of available games

  8. infinity downline business
    infinity downline business
    infinity downline business
    infinity downline business
    infinity downline business
    infinity downline business

  9. Really awesome blog. I enjoyed reading this review from you. I found that you really update your site regularly that made me more interesting. I've bookmarked your site for my future use.

  10. Saya Jarang Pake IE Jadi Saya Ga Tau Nih Gimana Tampilan Blog Saya
    Ada Alternatif Lain Gak Buat Tset Browser

  11. Template harus disave dulu

  12. @Mercedes-Benz Mobil Mewah Terbaik Indonesia dan pulsa elektrik termurah :

    Rajin koment disetiap postingan ane gan. Tarik terus gan.. mumpung DoFollow :D:D

  13. thank banget nih infonya bermanfaat. ngomong2, ini bisa utk wordpress dan blogger juga,kan?

  14. tutorial yang sangat sangat bermanfaat
    salam sukses

  15. thanks bwt infonya...

  16. krennn mass bro infonya krennn skali...

  17. info nya sangat bagus dan sangat menarik nie,,,,,,,,

  18. Hhhmmmm
    Gitu yah Gan,. Makasih Banyak Gan Infonya,. ,. Keep Posting./

  19. ok deh akan lebih hati2... mksih ya buat saran nya :D

  20. mksih untuk info nya.... saya akan lebih hati hati

  21. info yang berangfaat gan
    salm kenal all:)

  22. betul mas memang perlu hati2 klo compres CSS Template. salah2 bisa acak2an blognya. kaya yg pernah aku aami pertama kali compres hehehe. akhirnya mau g mau aku musti pasang template baru lg hohoho. nice info gan

  23. infonya menarik buat di simak nih. ijin baca2 ya mas.

  24. infonya membantu brow.....sy tunggu artikel barunya...lain kali mampir lagi ke sini. Thanks!

  25. Saya Jarang Pake IE Jadi Saya Ga Tau Nih Gimana Tampilan Blog Saya
    Ada Alternatif Lain Gak Buat Tset Browser

  26. tips compress css template sangat membantu saya

  27. Terima kasih sobb...
    ada tambahan info jadinya..:)

  28. Nice info, woud test in 4u Pictures soon... :)
    thanks all..

  29. Wah tricky juga ya kalo ga baca2 dulu disini bs pusing tujuh keliling saya.. makasih tipsnya

  30. sip deh buat infonya :)

  31. Jadi Program Compressor Yang Palig Bagus Apa Sob ?
    Kalo Saya Rada-Rada Bingung Kalo Perlu Di Edit Lagi :)

    Visit Blog Ane Sob ... Oke !
    http://pusyakiz.blogspot.com/

  32. krennn mass bro infonya krennn skali...

Post a Comment

- Blog ini DoFollow tapi dimoderasi.

- Silahkan gunakan Name Author sebagai Keyword karena Link Live tidak diperkenankan.

- Link taruhan & lendir tidak diperkenankan.