Salah satu statistik paling aneh tentang browser adalah bahwa Internet Explorer Versions 6, 7 dan 8 hidup berdampingan. Pada artikel ini, versi Internet Explorer menyumbang sekitar 65% dari pangsa pasar secara total. Dalam komunitas pengembangan situs web, jumlah ini jauh lebih kecil, dan statistik menunjukkan bahwa hanya sekitar 40%.
Bagian yang lebih menarik dari statistik ini adalah bahwa nilai -nilai antara IE6, IE7, dan IE8 sangat dekat, yang mencegah browser Microsoft tunggal mendominasi kebalikan dari masa lalu. Menurut statistik yang disesalkan ini, perlu bagi pengembang untuk melakukan pengujian komprehensif dari semua browser IE yang saat ini digunakan saat mengembangkan situs web untuk pelanggan, dan ini juga akan menarik lebih banyak pengguna pada proyek pribadi.
Berkat perpustakaan JavaScript (kerangka kerja), pengujian javascript lintas-browser sedekat dengan sempurna seperti situasi saat ini memungkinkan. Tapi ini tidak terjadi dalam pengembangan CSS, terutama tiga versi yang saat ini ada di IE.
Artikel ini berupaya memberikan referensi yang terperinci dan mudah digunakan untuk berbagai pengembang yang ingin memahami dukungan CSS untuk IE6, IE7, dan IE8. Referensi ini berisi tinjauan umum dan kompatibilitas dari situasi berikut:
A. Salah satu dari tiga browser mendukung entri tetapi dua lainnya tidak.
B. Dua dari tiga browser mendukung entri tetapi yang lain tidak mendukungnya.
Artikel ini tidak akan membahas:
A. Entri yang tidak didukung oleh tiga browser
B. Atribut Pribadi
Oleh karena itu, fokus artikel ini adalah pada perbedaan di antara tiga browser, daripada kekurangan dukungan yang diperlukan. Daftar ini dibagi menjadi lima bagian berikut:
1. Pemilih dan Warisan
2. Kelas semu dan elemen semu
3. Dukungan atribut
4. Teknologi lainnya
5. Bug penting dan masalah ketidakcocokan
1. Pemilih dan Warisan
A. Sub-selektor
Contoh
| tubuh> p { Warna: #FFFF; } |
menggambarkan
Pemilih anak memilih semua elemen anak langsung dari elemen induk tertentu.
Mendukung
| IE6 tidak IE7 ya Yaitu ya |
Serangga
Di IE7, jika ada komentar HTML antara tag induk dan tag anak, pemilih anak tidak akan berfungsi.
B. Rantai
Contoh
| .class1.class2.class3 { Latar Belakang: #FFFF; } |
menggambarkan
Kelas rantai digunakan untuk mengirim elemen HTML dengan beberapa deklarasi kelas, seperti ini:
| <Div class = "class1 class2 class3"> <p> Konten di sini. </p> </div> |
Mendukung
| IE6 tidak IE7 ya Yaitu ya |
Serangga
IE6 tampaknya mendukung situasi ini karena dapat mencocokkan kelas terakhir dalam rantai dengan elemen yang menggunakan kelas, namun, ia tidak membatasi elemen yang menggunakan semua kelas dalam rantai.
C. Atribut pemilih
Contoh
| a [href] { Warna: #0F0; } |
menggambarkan
Pemilih ini memungkinkan elemen diposisikan selama memiliki sifat yang ditentukan. Dalam contoh di atas, semua tag dengan atribut HREF akan terbatas, sedangkan tag tanpa atribut HREF tidak akan terbatas.
Mendukung
| IE6 tidak IE7 ya Yaitu ya |
D. mendekati pemilih saudara
Contoh
| h1+p { Warna: #F00; } |
menggambarkan
Pemilih ini menempatkan tag saudara yang dekat dengan elemen yang ditentukan. Contoh di atas akan membatasi tag P, tetapi harus menjadi saudara dari tag H1 dan harus mengikuti langsung di belakang tag H1. Misalnya:
| <H1> Heading </h1> <p> Konten di sini. </p> <p> Konten di sini. </p> |
Dalam kode di atas, gaya CSS hanya akan berfungsi untuk hal pertama. Karena itu adalah saudara H1 dan segera mengikuti H1. P kedua juga adalah saudara H1, tetapi tidak segera mengikuti H1.
Mendukung
| IE6 tidak IE7 ya Yaitu ya |
Serangga
Di IE7, jika ada komentar HTML antara saudara kandung, pemilih saudara yang berdekatan akan tidak valid.
E. Pemilih saudara biasa
Contoh
| h1 ~ p { Warna: #F00; } |
menggambarkan
Pemilih ini menempatkan semua elemen saudara mengikuti elemen yang ditentukan. Menerapkan pemilih ini ke contoh di atas akan berfungsi untuk kedua t tag. Tentu saja, jika elemen P muncul sebelum H1, elemen P itu tidak akan dicocokkan.
Mendukung
| IE6 tidak IE7 ya Yaitu ya |