blog, tutorial
Tips CSS (1): Hindarkan penggunaan border
February 1st, 2006
Atas permintaan seorang teman, aku diminta menulis tutorial bagaimana menyesuaikan desain di berbagai browser. Khususnya IE dan Firefox. Aku menulis ini bukan berarti aku handal dan segalanya tahu. Ini didasari dari beberapa pengalamanku yang mungkin berhubungan langsung dengan hal ini.
Kenapa border?
Firefox dan IE mempunyai penterjemahan yang berbeda dalam mengartikan kata kunci border. Berikut sedikit gambar yang menjelaskan bagaimana IE dan Firefox mengaplikasikan kata kunci border.
Penjelasan:
Pada kotak pertama, adalah sebuah kotak tanpa menggunakan border, dan terlihat sama besar dikedua browser. Jika kotak tersebut diberikan border disemua sisi, maka akan terjadi penambahan 1 piksel di setiap sisi pada IE.
Hal ini tidak akan terlalu menjadi masalah jika anda menggunakan beberapa ruang yang cukup untuk menangani perbedaan ini. Tapi bagaimana dengan layout yang benar-benar membutuhkan ketelitian sampai dengan 1 piksel pun sangat berharga? yeah, betul! sangat menjadi masalah.
Lalu siapa yang patut disalahkan? IE atau Firefox? Aku pikir, jangan terlalu cepat mencari kambing hitam dulu. Walaupun secara standar W3C, IE berbeda sendiri. Tapi justru disinilah peran web designer dan developer. Mengatasi perbedaan untuk menghasilkan hasil karya yang lebih baik dan sempurna. *halah!*
Dulu, pernah aku menulis tentang sebuah konsep. Sebelum membuat layout, akan lebih baik kita menggunakan software design seperti Macromedia Fireworks atau Adobe Photoshop. Tidak menjadi masalah jika anda bercoret-coret ria di atas kertas, kemudian menaruh kesemuanya di dalam pikiran, dan dituangkan ke dalam kode-kode CSS. I call that style of web designer. Every designer have a good things and they have own ways to design a site.
Solusi
Itulah gunanya menggunakan software design seperti Macromedia Fireworks atau Adobe Photoshop. Kita bisa membuat border dari design yang kita buat, kemudian tugas kita hanya ekspor bagian tersebut menjadi file gif atau jpg.
Lihat gambar di atas. Gambar pertama menjelaskan sebuah kotak yang sudah di desain dengan menggunakan border, dan gambar kedua menjelaskan how we slice it up. *halah! ga nemu bahasa yang cocok*
Kesimpulan
- Kalau bisa, hindarkan penggunaan border. Karena antara IE dan Firefox mempunyai cara implementasi yang berbeda.
- Jika terpaksa menggunakan border, maka ambillah border sebagai background image.
- Tips-tips lain akan aku teruskan jika sempat *halah*
Daftar sekarang juga untuk cara gampang dapat uang lewat blog
pertamax