Bagaimana Membuat stylesheet CSS untuk masing-masing browser

Bagaimana Membuat stylesheet CSS untuk masing-masing browser

resellerhosting murah, ceap reseller hosting

Kini banyak browser bermunculan. Masing-masing punya kelebihan dan kekurangannya sendiri-sendiri. Website dengan menggunakan satu stylesheet CSS terka

Tips Membuat  Situs Desain Web  Terbaik
Cara Mematikan fungsi Update dan Install WordPress plugin
14 Cara Jitu Mencegah situs WordPress Anda dari serangan Hacker

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]-->

 

Loading...
loading...

COMMENTS

WORDPRESS: 2
  • comment-avatar

    IE, browser yang bisanya hanya membuat repot web developer saja 🙂

  • DISQUS: 1