Hal yang menarik dari statistik ini adalah angka IE6, IE7, dan IE8 sangat mirip, sehingga tidak ada satu browser Microsoft pun yang mendominasi—kebalikan dari apa yang terjadi di masa lalu. Berdasarkan statistik yang disesalkan ini, pengembang perlu menguji secara menyeluruh semua browser IE yang saat ini digunakan saat mengembangkan situs web untuk klien, dan ini juga dapat menarik lebih banyak pengguna untuk proyek pribadi.
Berkat pustaka (kerangka kerja) JavaScript, pengujian JavaScript lintas-browser hampir sempurna jika situasi saat ini memungkinkan. Namun tidak demikian halnya dalam pengembangan CSS, terutama jika menyangkut tiga versi IE yang ada saat ini.
Artikel ini mencoba memberikan referensi terperinci dan mudah digunakan untuk berbagai pengembang yang ingin memahami dukungan CSS untuk IE6, IE7, dan IE8. Referensi ini berisi gambaran umum dan kompatibilitas untuk situasi berikut:
A. Item yang didukung oleh salah satu dari tiga browser, namun dua browser lainnya tidak
B. Item yang didukung oleh dua dari tiga browser tetapi satu tidak
Artikel ini tidak membahas:
A. Item yang tidak didukung oleh ketiga browser
B. Atribut pribadi
Oleh karena itu, artikel ini berfokus pada perbedaan antara ketiga browser tersebut, bukan pada kekurangan dukungan yang diperlukan. Daftar ini dibagi menjadi lima bagian berikut:
1. Penyeleksi dan pewarisan
2. Kelas semu dan elemen semu
3. Dukungan atribut
4. Berbagai teknologi lainnya
5. Bug penting dan masalah ketidakcocokan
1. Penyeleksi dan pewarisan
A. Sub-selektor
Contoh
| badan > hal { warna: #fff; } |
menggambarkan
Pemilih anak memilih semua elemen anak langsung dari elemen induk tertentu. Dalam contoh di atas, body adalah elemen induk dan p adalah elemen anak.
Status dukungan
| IE6 Tidak IE7 Ya IE8 Ya |
Bug
Di IE7, pemilih anak tidak akan berfungsi jika ada komentar HTML antara tag induk dan tag anak.
B.Jenis rantai
Contoh
| .kelas1.kelas2.kelas3 { latar belakang: #fff; } |
menggambarkan
Kelas rantai digunakan untuk mengirim elemen HTML dengan beberapa deklarasi kelas, seperti ini:
| Konten di sini. |
Status dukungan
| IE6 Tidak IE7 Ya IE8 Ya |
Bug
IE6 tampaknya mendukung situasi ini, karena dapat mencocokkan kelas terakhir dalam rantai dengan elemen yang menggunakan kelas tersebut, namun, IE6 tidak dapat membatasi elemen yang menggunakan semua kelas dalam rantai.
C. Pemilih atribut
Contoh
| a[href] { warna: #0f0; } |
menggambarkan
Pemilih ini memperbolehkan suatu elemen ditempatkan asalkan memiliki atribut yang ditentukan. Pada contoh di atas, semua tag a dengan atribut href akan memenuhi syarat, sedangkan tag tanpa atribut href tidak akan memenuhi syarat.
Status dukungan
| IE6 Tidak IE7 Ya IE8 Ya |
D. Pemilih saudara terdekat
Contoh
| h1+p { warna: #f00; } |
menggambarkan
Pemilih ini menempatkan tag saudara yang berdekatan dengan elemen tertentu. Contoh di atas akan memenuhi syarat tag p, namun harus merupakan saudara dari tag h1 dan harus langsung mengikuti tag h1. Misalnya:
judulKonten di sini. Konten di sini. |
Pada kode di atas, style CSS hanya akan efektif untuk p pertama. Karena merupakan saudara dari h1 dan mengikuti h1. P kedua juga merupakan saudara dari h1, tetapi tidak langsung mengikuti h1.
Status dukungan
| IE6 Tidak IE7 Ya IE8 Ya |
Bug
Di IE7, pemilih saudara yang berdekatan tidak akan berpengaruh jika ada komentar HTML antar saudara.
E. Pemilih saudara biasa
Contoh
| h1~p { warna: #f00; } |
menggambarkan
Pemilih ini menempatkan semua elemen saudara setelah elemen tertentu. Menerapkan pemilih ini pada contoh di atas akan berlaku untuk kedua tag p. Tentunya jika ada elemen p yang muncul sebelum h1, maka elemen p tersebut tidak akan cocok.
Status dukungan
| IE6 Tidak IE7 Ya IE8 Ya |