Bagaimana Membuat stylesheet CSS untuk masing-masing browser

Membatasi Login Page untuk IP tertentu
May 3, 2013
Membuat website sendiri (Step by Step tutorial)
May 3, 2013

Kini banyak browser bermunculan. Masing-masing punya kelebihan dan kekurangannya sendiri-sendiri. Website dengan menggunakan satu stylesheet CSS terkadang tidak kompatible jika dilihat dengan menggunakan browser lain. Tutorial website berikut ini akan menjelaskan bagaimana menggunakan lebih dari satu file Stylesheet CSS untuk beberapa browser sekaligus.

Untuk mendeteksi browser apa yang digunakan, cukup gunakan tag IF. Untuk Browser IE6 contohnya. Bisa Anda gunakan Script berikut:

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

Cara yang sama bisa kita terapkan untuk Browser lain :
Untuk IE5 :

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

Untuk IE7:

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

Wah.. Kalau seperti ini caranya, repot dooong kalau suatu saat nanti versi IE sudh tinggi. Jangan khawatir.. kita bisa gunakan selector lt (Less Than), lte (less than or equal), gt (Greater Than) atau gte (greater than or equal) untuk mempersingkat. Contoh, file ie8.css kita peruntukkan jika dibuka dengan browser IE5 sampai IE8, sedangkan ie9.css untuk IE9 dan style.css untuk browser lainnya. Anda bisa gunakan script berikut:

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

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

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

 

2 Comments

  1. IE, browser yang bisanya hanya membuat repot web developer saja :)

Leave a Reply

Your email address will not be published. Required fields are marked *