Home > Menengah > Web Desain > Tutorial CSS > Jamu Sehat CSS Untuk Internet Explorer

.

2 Komentar Untuk Artikel Ini BYAdmin Ilmuwebsite

Lama tak berjumpa setelah sekian lama ;-). Mungkin banyak dari Anda yang mengidolakan saya, :D maksud saya mengidolakan saya untuk tetap menulis untuk Anda. Okelah kalo begitu. 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;
}

Ayo di coba ayoo…

DVD Video Tutorial : Kursus Web Development Komplit Bangun 5 Project Aplikasi Website - Membuat CMS Sendiri Dari Nol, Blog, Portal Berita, Ecommerce, Web Komunitas dengan CodeIgniter 3 JQuery AJAX Bootstrap

Video Tutorial Kursus Web Development Komplit Bangun 5 Project Website ini merupakan ‘penunjuk arah’ agar Anda yang sedang maupun baru akan terjun ke dalam dunia web development yang lebih mendalam memiliki peta perjalanan pembelajaran yang lebih terarah menuju web developer professional. (Disertai pembelajaran dasar HTML CSS, JQuery, PHP & MySQL, CodeIgniter) Dibuat oleh praktisi yang memiliki pengalaman lebih dari 10 tahun di bidang web development (Pemesanan bisa SMS/WA ke 0813 1167 5785, atau bisa pesan secara online di sini)



2 Response untuk Artikel Ini

  1. ellsa

    ilmu WEB mengasikkan tetapi agak sulit dan memusingkan juga yaaa . heheeee


  2. Azteric

    Thankyu tutorialnya ..memang sampai saat ini,.q kesulitas banget nangani web kalo melupakan IE,,mksudnya tanpa menggunakan IE,.. kalo perlu pas buat interface q pakai 4 browser skaligus termasuk IE ..agar kalo ada kesalahan bs d liat d masing2 browser … repooottttnyaaa….


You must be logged in to post a comment.

eXTReMe Tracker