Ne vous méprenez pas, IE ne prend pas en charge les sélecteurs avancés CSS3, y compris le dernier IE8 (voir « Prise en charge des sélecteurs CSS par le navigateur » pour plus de détails), mais les sélecteurs CSS sont en effet très utiles. Ils peuvent grandement simplifier notre travail et améliorer notre code. L'efficacité nous permet de créer facilement des pages hautement maintenables.
Cependant, la prise en charge par IE des sélecteurs CSS avancés, en particulier des sélecteurs CSS3, nous a empêché de promouvoir l'application des sélecteurs CSS. Cependant, même si nous ne pouvons pas contrôler la part de marché des navigateurs, nous pouvons améliorer notre travail grâce à certaines technologies. Nous pouvons également utiliser d'autres technologies pour permettre à IE de prendre en charge les sélecteurs CSS3 déguisés.
Keith Clark, un ingénieur en développement Web britannique, a développé une solution JavaScript pour permettre à IE de prendre en charge les sélecteurs CSS3. Ce script prend en charge différentes versions d'IE5 à IE8.
usage
Il vous suffit de télécharger le script DOMAssistant et ie-css3.js de Robert Nyman et de les importer dans la balise head de votre page, comme ceci :
<tête>
<script type="text/javascript" src="DOMAssistantCompressed-2.7.4.js"></script>
<script type="text/javascript" src="ie-css3.js"></script>
</tête>
Sélecteurs pris en charge
nième enfant
nième-dernier-enfant
nième de type
nième-dernier-type
premier enfant
dernier enfant
enfant unique
premier du type
dernier type
uniquement de type
vide
Quelques limitations de ie-css3
Les feuilles de style doivent être introduites via la balise <link>. Les feuilles de style au niveau de la page ou les feuilles de style en ligne n'auront aucun effet. mais
Vous pouvez utiliser @import dans des fichiers de style externes pour importer d'autres fichiers de style ;
Le fichier de feuille de style doit être placé sous le même nom de domaine que la page ;
Les fichiers de style utilisant le chemin file:// ne fonctionneront pas en raison de problèmes de sécurité du navigateur ;
Le sélecteur :not() n'est pas encore pris en charge ;
Cette méthode n'est pas dynamique. La modification du DOM une fois le style appliqué ne sera pas valide.
Comment ça marche ?
ie-css3.js télécharge chaque fichier de style pour la page et analyse ses pseudo-sélecteurs CSS3. Si un sélecteur est trouvé, il est remplacé par la classe CSS du même nom. Par exemple : div:nth-child(2) deviendra div._iecss-nth-child-2. Le DOMAssistant de Robert Nyman est ensuite utilisé pour trouver le nœud DOM qui correspond au sélecteur CSS3 de l'élément, puis y ajoute la classe CSS correspondante.
A terme, la feuille de style de l'élément sera remplacée par la nouvelle version, puis le style correspondant sera ajouté à l'élément correspondant à l'aide des sélecteurs CSS3.
Évitez l'interpréteur CSS d'IE
Selon le W3C, un navigateur doit ignorer les règles CSS qu'il ne reconnaît pas. Cela crée un problème : nous devons utiliser des sélecteurs CSS3 dans le fichier de feuille de style, mais IE les supprimera.
Pour éviter ce problème, chaque fichier de style est téléchargé via XMLHttpRequest. Cela permet au script de contourner l'interpréteur CSS intégré au navigateur et de pouvoir lire le fichier CSS brut.
Visitez la page d'accueil du projet
Télécharger ie-css3.js
Télécharger DOMAAssistant
alternative
Évidemment, ce n'est pas une solution parfaite. Pour les sites Web Ajax, elle est fondamentalement inutilisable, car changer le DOM après l'application de la feuille de style générée ne sera pas efficace. Mais en fait, nous pouvons personnaliser nous-mêmes un ie-css3. Ce n'est tout simplement pas aussi intelligent que celui-ci.