Dalam tutorial css kali ini penulis akan membawakan Tips CSS untuk Internet Explorer. Ya, sampai detik tutorial ini dibuat pun penulis masih saja menemui para web developer yang kerap kali menggunakan Internet Explorer sebagai browser dasar ketika melakukan proses pembuatan interface untuk aplikasi berbasis webnya. Entah apa yang ada dalam pikiran pihak atasan hingga meminta sang developer untuk tetap menggunakan Internet Explorer. Tapi itu bukan inti permasalahannya.Permasalahannya adalah, bagaimana ketika seorang developer itu tetap bisa menjaga tampilan layout atau interfacenya jika ada user yang menggunakan browser lain selain dari pada Internet Explorer, misalkan menggunakan Chrome ataupun Mozilla Firefox. Oke, sebetulnya untuk menjaga agar tampilan di browser berbagai browser tetap sama, penulis telah menjelaskannya di artikel sebelum-sebelumnya. Yakni artikel berikut ini http://www.ilmuwebsite.com/tutorial-html/standards-compliance-quirks-mode-html,
dan
http://www.ilmuwebsite.com/web-desain-development/tutorial-css/web-design-tips-css-reset. Tapi tetap saja ada yang kurang, karena pada dasarnya besarnya pixel di internet explorer agak sedikit berbeda dengan browser-browser yang lain, misalnya ketika kita memberikan height ataupun width pada firefox maupun chrome itu berbeda sekali ukurannya dengan Internet Explorer. Sehingga hal seperti inilah yang harus kita tangani.
Jika sudah seperti ini rasanya mau tidak mau seorang developer harus memperlakukan IE secara khusus, tentunya buang-buang waktu, tapi demi membuat sang bos senang, lebih baik gunakan saja cara ini.
Ketika masuk dalam tahapan proses styling menggunakan CSS, perlu ditambahkan barisan kode yang diletakkan di dalam tag <head> seperti ini :
<head>
…
<!–[if IE]>
<link rel=”stylesheet” type=”text/css” href=”all-ie-only.css” />
<![endif]–>
…
</head>
Hal ini digunakan untuk memperlakukan ie secara khusus, sehingga Anda membutuhkan 2 file css nantinya, satu untuk Internet Explorer, dan satu lagi untuk browser selain Internet Explorer,. Benar-benar membuang waktu bukan? Mau nggak mau… mau nggak mau.. mau nggak mau asal kumpul… :D (*slank mode). Barisan kode tersebut memiliki arti, jika yang digunakan adalah browser Internet Explorer maka style yang diapit itu yang akan digunakan oleh browser untuk menampilkan layout webnya. Ada juga jenis yang lain :
<!–[if !IE]><!–>
<link rel=”stylesheet” type=”text/css” href=”not-ie.css” />
<!–<![endif]–>
Memiliki arti jika user menggunakan browser selain dari IE, maka gunakanlah file css tersebut.
Barisan kode tersebut digunakan didalam tag <html><head>. Ada pula bentuk lain, Anda bisa memasukkannya kedalam file cssnya langsung. Misalkan penulis memiliki kode seperti ini
<div id=”head”>
<img src=”http://www.ilmuwebsite.com/logo.png” />
</div>
Nah biasanya ketika akan memberikan style kepada <div id=”head”> kita cukup panggil id selectornya saja dalam file css-nya seperti ini :
#head{
height:200px;
}
Ketika memberikan style height kepada browser ie cukup tambahkan :
_height:200px;
Menjadi :
#head{
height:200px;
_height:200px;
}
Sumber : www.ilmuwebsite.com
dan
http://www.ilmuwebsite.com/web-desain-development/tutorial-css/web-design-tips-css-reset. Tapi tetap saja ada yang kurang, karena pada dasarnya besarnya pixel di internet explorer agak sedikit berbeda dengan browser-browser yang lain, misalnya ketika kita memberikan height ataupun width pada firefox maupun chrome itu berbeda sekali ukurannya dengan Internet Explorer. Sehingga hal seperti inilah yang harus kita tangani.
Jika sudah seperti ini rasanya mau tidak mau seorang developer harus memperlakukan IE secara khusus, tentunya buang-buang waktu, tapi demi membuat sang bos senang, lebih baik gunakan saja cara ini.
Ketika masuk dalam tahapan proses styling menggunakan CSS, perlu ditambahkan barisan kode yang diletakkan di dalam tag <head> seperti ini :
<head>
…
<!–[if IE]>
<link rel=”stylesheet” type=”text/css” href=”all-ie-only.css” />
<![endif]–>
…
</head>
Hal ini digunakan untuk memperlakukan ie secara khusus, sehingga Anda membutuhkan 2 file css nantinya, satu untuk Internet Explorer, dan satu lagi untuk browser selain Internet Explorer,. Benar-benar membuang waktu bukan? Mau nggak mau… mau nggak mau.. mau nggak mau asal kumpul… :D (*slank mode). Barisan kode tersebut memiliki arti, jika yang digunakan adalah browser Internet Explorer maka style yang diapit itu yang akan digunakan oleh browser untuk menampilkan layout webnya. Ada juga jenis yang lain :
<!–[if !IE]><!–>
<link rel=”stylesheet” type=”text/css” href=”not-ie.css” />
<!–<![endif]–>
Memiliki arti jika user menggunakan browser selain dari IE, maka gunakanlah file css tersebut.
Barisan kode tersebut digunakan didalam tag <html><head>. Ada pula bentuk lain, Anda bisa memasukkannya kedalam file cssnya langsung. Misalkan penulis memiliki kode seperti ini
<div id=”head”>
<img src=”http://www.ilmuwebsite.com/logo.png” />
</div>
Nah biasanya ketika akan memberikan style kepada <div id=”head”> kita cukup panggil id selectornya saja dalam file css-nya seperti ini :
#head{
height:200px;
}
Ketika memberikan style height kepada browser ie cukup tambahkan :
_height:200px;
Menjadi :
#head{
height:200px;
_height:200px;
}
Sumber : www.ilmuwebsite.com
0 comments:
Post a Comment