Membuat pemrograman kondisional didalam HTML

Membuat pemrograman kondisional didalam HTML

sumber materi Dhimas Ronggobramantyo

Seandainya anda telah membuat desain sebuah website yang paling rumit dengan menggunkan HTML dan CSS. Dan entah mengapa ketika dibuka di Internet Explorer dan Firefox tampilannya berbeda. Walaupun sudah dutak-atik sampai mampus tetap saja ada yang berbeda tampilannya antara IE dan Firefox. Satu-satunya cara yaitu membuat CSS yang berbeda untuk browser IE dan Firefox. Tapi bagaimana caranya kita mengenali browser apa yang digunakan?

Kita tidak perlu menggunakan Javascript untuk melakukan hal tersebut. Karena didalam HTML pun ada pemrograman kondisional dimana kita bisa mendeteksi bahwa browser yang digunakan adalah IE.

Pemrograman kondisional ini hanya dapat berjalan di browser Internet Explorer saja.

Oke daripada bingung langsung saja anda perhatikan contoh berikut ini, simpan dengan nama kondisi.html:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>x</title>
</head>
<body>
<!--[if IE 7]>Ini IE 7 Lho<![endif]-->
</body>
</html>

Oke jika anda lihat, kondisional diletakkan didalam tag comment <!--[if IE 7]>Ini IE 7 Lho<![endif]-->. Kode tersebut berarti jika browser anda Internet Explorer 7, maka tulisan diantara [if IE 7] sampai [endif] akan dijalankan. Silahkan anda coba jalankan kode tersebut menggunakan Internet Explorer 7 dan Firefox, bandingkan. Mudah kan, jika anda pengguna IE 6 tinggal ubah angka 7 nya menjadi 6 saja.

Bagaimana jika kita ingin agar untuk semua versi Internet Explorer kodenya dijalankan. Kita cukup menggunakan lte (Less than). Jadi kodenya menjadi seperti ini:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>x</title>
</head>
<body>
<!--[if lte IE 7]>Ini Pake IE Lho<![endif]-->
</body>
</html>

Jalankan dengan browser IE versi berapa saja maka tulisan “Ini pake IE Lho” akan ditampilkan. Tetapi apabila anda menggunakan Firefox, Opera atau lainnya tulisan tersebut tidak akan tampil. Oke sekarang kembali ke permasalahan semula, jadi apabila anda membua desain yang terlihat beda di IE dan Firefox, maka anda perlu membuat CSS yang benar untuk Firefox. Kemdudian dengan menggunakan teknik diatas kita menambahkan CSS untuk IE, sehingga tampilan kita akan terlihat sama di IE dan Firefox

Oke, langsung saja kita coba kode berikut ini:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>x</title>
<style type="text/css" media="all">
.firefox {
font-weight:bold;
}
.ie {
font-weight:lighter;
}
</style>
<!--[if lte IE 7]>
<style type="text/css" media="all">
.firefox {
font-weight:lighter;
}
.ie {
font-weight:bold;
}
</style>
<![endif]-->
</head>
<body>
<p class="firefox">Mozilla Firefox</p>
<p class="ie">Internet Explorer</p>
</body>
</html>

Jika anda jalankan dengan browser apapun selain IE, maka tulisan Mozilla Firefox akan menjadi tebal. Ini dikarenakan class .firefox dibuat tebal pada CSS yang pertama. Dan apabila kita menggunakan IE, maka CSS yang pertama dijalankan dan ketika ia membaca kondisi, maka CSS didalam kondisi dijalankan. Karena CSS yang dikondisi memiliki class yang sama, maka CSS yang sebelumnya akan di replace dengan CSS yang didalam kondisi, dimana class .ie yang menjadi tebal.

Mudah kan? teknik seperti ini sangat berguna apabila anda sudah mentok dan bingung kenapa kode CSS anda tampil beda di IE dan Firefox.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: