Le 03 Mars 2016

Un hack css pour Internet Explorer 10 et 11

Remontons à une époque avant les mobiles et tablettes ou la majorité de nos soucis étaient concentrés sur le problème de mise en page pour les versions 6, 7, 8 et 9 d’ Internet Explorer. Dans son évolution chaque version apportait son lot de nouveauté sans jamais réellement respecter les standards du web recommandés par le W3C

Avant de nous occuper des dernières versions d’IE regardons comment utiliser les commentaires conditionnels pour les versions 9 et antérieurs. Cela peut toujours être utile dans certains cas.

De quoi parlons-nous

C’est très simple, ces hacks permettent de cibler chaque version d’IE soit pour ajouter du code HTML ou éditer un style CSS spécifique.

Exemples

Charger une feuille de style spécifique à IE :

HTML


        

Insérer du code HTML spécifique à une ou plusieurs versions d'IE :

HTML


    

Signification des mots-clé :

gt Supérieur à... (greater than)

gte Equivalent et supérieure à... (greater than equal)

lt Inférieure à... (less than)

lte Equivalent et inférieure à... (less than equal)

Cibler les versions d'IE directement depuis votre feuille css

Si vous n’avez besoin de ne faire que quelques modifications alors il est inutile de charger une feuille de style supplémentaire. Dans ce cas nous ciblons les versions d’IE à appliquer sur nos éléments CSS.

Commençons par définir les versions d’IE qui seront ciblées :

HTML


    

Puis les éléments à modifier dans notre CSS :

CSS


    

-- TESTER LA DEMO SOUS IE --

Cibler les versions 10 + #

Enfin nous y voilà... Maintenant les choses ont bien changées, les versions 10 et 11 respectent parfaitement les standards du web, du coup ces versions ne reconnaissent plus les commentaires conditionnels pourtant bien pratiques.

Alors comment faire ? Vous avez certainement du rechercher et tombant sur diverses articles et réponses parfois douteuses sans donner le résultat escompté.

Je vous propose 3 techniques : les 2 premières passent par l’utilisation d’un @media et la troisième revient à utiliser un commentaire conditionnel. Reste à vous de choisir laquelle répond a vos besoins.

Source: impressivewebs.com

N’hésitez pas à tester chaque technique depuis votre navigateur Internet Explorer. Pour changer de versions faites F12 pour ouvrir la fenêtre d’outils de développement.

Techniques utilisant un @media

Cibler IE 9, 10, 11 et Edge avec le @media Zéro Hack

CSS


    

-- TESTER LE ZERO HACK --

Cibler 10, 11 et Edge avec le @media Contrast-hack

CSS


     

-- TESTER LE CONTRAST HACK --

Technique utilisant un commentaire conditionnel

Cibler Uniquement IE 10

Inconvénient: si cette technique passe par un simple commentaire conditionnel, elle nécessite un petit script JavaScript à placer dans le HEAD de votre code.

HTML


        

CSS


     

-- TESTER LE SCRIPT POUR IE 10

Vous voilà maintenant armé si votre mise en page CSS demande certains ajustements sous Internet Explorer. N’oubliez pas que le recourt aux Hacks CSS est une pratique à faire avec modération, un code HTML bien structuré et valide reste la meilleure des solutions.