La partie intéressante de ces statistiques est que les chiffres pour IE6, IE7 et IE8 sont très proches, ce qui empêche un seul navigateur Microsoft de dominer la scène, contrairement à ce qui a été le cas dans le passé. Sur la base de ces statistiques regrettables, il est nécessaire que les développeurs testent minutieusement tous les navigateurs IE actuellement utilisés lors du développement de sites Web pour leurs clients, ce qui peut également attirer davantage d'utilisateurs pour des projets personnels.
Grâce aux bibliothèques JavaScript (frameworks), les tests JavaScript multi-navigateurs sont aussi proches de la perfection que la situation actuelle le permet. Mais ce n’est pas le cas dans le développement CSS, surtout lorsqu’il s’agit des trois versions d’IE qui existent actuellement.
Cet article tente de fournir une référence détaillée et facile à utiliser pour les différents développeurs qui souhaitent comprendre la prise en charge CSS pour IE6, IE7 et IE8. Cette référence contient une présentation et une compatibilité pour les situations suivantes :
A. Éléments pris en charge par l'un des trois navigateurs mais pas par les deux autres
B. Éléments pris en charge par deux des trois navigateurs mais pas un seul
Cet article ne traite pas :
A. Éléments non pris en charge par les trois navigateurs
B. Attributs privés
Par conséquent, cet article se concentre sur les différences entre les trois navigateurs, plutôt que sur les lacunes nécessaires du support. La liste est divisée en cinq sections suivantes :
1. Sélecteurs et héritage
2. Pseudo-classes et pseudo-éléments
3. Prise en charge des attributs
4. Diverses autres technologies
5. Bugs importants et problèmes d'incompatibilité
1. Sélecteurs et héritage
A. Sous-sélecteur
Exemple
| corps > p { couleur : #fff ; } |
décrire
Le sélecteur d'enfant sélectionne tous les éléments enfants directs d'un élément parent spécifique. Dans l'exemple ci-dessus, body est l'élément parent et p est l'élément enfant.
Statut d'assistance
| IE6 Non IE7 Oui IE8 Oui |
Insectes
Dans IE7, les sélecteurs enfants ne fonctionneront pas s'il y a un commentaire HTML entre la balise parent et la balise enfant.
B. Type de chaîne
Exemple
| .class1.class2.class3 { arrière-plan : #fff ; } |
décrire
La classe chain est utilisée pour envoyer un élément HTML avec plusieurs déclarations de classe, comme ceci :
| <div class="class1 classe2 classe3"> <p>Contenu ici.</p> </div> |
Statut d'assistance
| IE6 Non IE7 Oui IE8 Oui |
Insectes
IE6 semble prendre en charge cette situation, car il peut faire correspondre la dernière classe de la chaîne à l'élément utilisant cette classe. Cependant, il ne peut pas restreindre un élément utilisant toutes les classes de la chaîne.
C. Sélecteur d'attribut
Exemple
| une[href] { couleur : #0f0 ; } |
décrire
Ce sélecteur permet de localiser un élément à condition qu'il possède les attributs spécifiés. Dans l'exemple ci-dessus, toutes les balises avec des attributs href seront qualifiées, tandis que les balises sans attributs href ne seront pas qualifiées.
Statut d'assistance
| IE6 Non IE7 Oui IE8 Oui |
D. Sélecteur de frères et sœurs à proximité
Exemple
| h1+p{ couleur : #f00 ; } |
décrire
Ce sélecteur localise les balises frères et sœurs adjacentes à l'élément spécifié. L'exemple ci-dessus qualifiera la balise p, mais elle doit être une sœur de la balise h1 et doit suivre directement la balise h1. Par exemple:
| <h1>titre</h1> <p>Contenu ici.</p> <p>Contenu ici.</p> |
Dans le code ci-dessus, le style CSS ne sera efficace que pour le premier p. Parce que c'est le frère de h1 et suit h1. Le deuxième p est aussi un frère de h1, mais il ne suit pas immédiatement h1.
Statut d'assistance
| IE6 Non IE7 Oui IE8 Oui |
Insectes
Dans IE7, les sélecteurs de frères et sœurs adjacents n'auront aucun effet s'il y a un commentaire HTML entre frères et sœurs.
E. Sélecteur de frères et sœurs ordinaires
Exemple
| h1 ~ p { couleur : #f00 ; } |
décrire
Ce sélecteur localise tous les éléments frères suivant un élément spécifié. L'application de ce sélecteur à l'exemple ci-dessus s'appliquera aux deux balises p. Bien sûr, s’il y a un élément p qui apparaît avant h1, cet élément p ne sera pas mis en correspondance.
Statut d'assistance
| IE6 Non IE7 Oui IE8 Oui |