Cara Menyesuaikan Tampilan Blog Di Semua Browser Dengan Mudah

Sebagai seorang web developer, anda tentu ingin mengoptimalkan tampilan website / blognya di semua browser seperti Mozilla Firefox, Google Chrome, Opera Mini, Maxthon, Rockmelt, Safari, dan Internet Explorer dengan baik. Lalu bagaimana cara untuk menguji situs anda ke semua web browser tersebut ?
Caranya akan dibahas pada kesempatan tutorial kali ini. Seperti yang kita ketahui Internet Exploreryang merupakan jendela browser milik Microsoft, kurang memiliki teknologi yang digunakan oleh browser lain saat ini. Sebut saja CSS 3 dan HTML 5. Beberapa perintah script kode yang berkaitan dengan bahasa tersebut, terkadang tidak di support oleh Internet Explorer sehingga tampilan situs anda menjadi kurang menarik dan sering terlihat berantakan. Contohnya apabila anda memasang widget musik, kotak komentar facebook, atau membuat efek zoom pada gambar belum tentu semuanya akan tampil dan berjalan dengan baik di browser tersebut.

Memang keunggulan dari Internet Explorer mulai dari versi terbaru 9 dan yang lainnya memiliki Tingkat Security yang bagus. Tetapi di balik itu semua, Microsoft pun mungkin 'sadar' akan kekurangan ini, sampai-sampai membuat cara bagaimana membuat sebuah kondisi di mana halaman web dapat mendeteksi apakah browser yang digunakan itu IE atau bukan. Caranya adalah dengan menambahkan sebuah komentar HTML pada halaman web, maka dari itu dinamakan Conditional Comments.

Bagaimana cara menggunakan conditional comments tersebut? Caranya mudah, kita tinggal menambahkan kode :

<!--[if IE]>
    <p>Browser yang kamu gunakan adalah Internet Explorer, Bukan Google Chrome.</p>
<![endif]-->

Mungkin jika anda pengguna Blogger, pada saat mengedit template terkadang melihat kode seperti diatas. Kode tersebut akan bekerja hanya pada Internet Explorer. Sekarang coba refresh halaman web kamu. Jika kamu menggunakan IE versi apa saja, maka akan muncul paragraf tersebut. Cara ini juga digunakan untuk styling pada halaman web menggunakan CSS. Karena kode load CSS sebaiknya disimpan di head, maka conditional comment juga harus dsimpan di head. Cara menggunakannya adalah:

<!--[if IE]>
    <link rel="stylesheet" href="style_ie.css" type="text/css" />
<![endif]-->

Untuk menguji tampilan blog atau website anda di semua browser tentu anda harus melihatnya satu persatu dengan browser yang sebelumnya telah anda download. Untuk mempermudah dalam pengujian tampilan website, kita dapat menggunakan sebuah layanan yang disediakan oleh sebuah situs terkenal. Anda dapat mengetes dan melihat interface situs anda di www.browsercam.com

Dengan menggunakan beberapa tools layanan tersebut, anda dapat mengambil screenshoot sebuah URL menggunakan browser yang mereka miliki. Fungsi berikut fitur lainnya adalah pemotongan gambar, sistem operasi, email, dan juga dapat diakses melalui perangkat mobile (Android, Blackberry, IPhone,Windows Mobile).

Bagi anda para web developer, designer, web master, atau creator template dapat menggunakannya dengan sangat mudah. Anda hanya perlu melakukan registrasi terlebih dahulu. Semoga artikel yang khusus dengan durasi 5 menit ini dapat bermanfaat.

jika berkenan tolong untuk follow dan klik iklan yang terdapat :)