CSS Hack est un remède utilisé lorsque le CSS standard n'est pas compatible avec les effets d'affichage de divers navigateurs. Jusqu'à ce que les fabricants de navigateurs parviennent à un accord sur la manière d'analyser le CSS, nous ne pouvons utiliser cette méthode que pour effectuer de telles tâches. Vous pourrez peut-être rechercher de nombreux CSS Hacks sur Internet, mais vous ne comprendrez peut-être pas tous ceux que j'ai publiés aujourd'hui, car ce sont des CSS Hacks qui ne ciblent qu'un seul navigateur.
Pour vous montrer que ces hacks CSS fonctionnent, j'ai créé six nouvelles balises P et donné à chaque balise P un identifiant unique. Cela vous montrera CSS Hack en action.
| <p id="opera">Je viens d'Opera 7.2 - 9.5</p> <p id="safari">Je suis le Safari magique</p> <p id="firefox">Je viens de Firefox</p> <p id="firefox12">Je suis un Firefox senior FF 1 - 2 </p> <p id="ie7">Je suis 囧IE7</p> <p id="ie6">Je suis un IE 6 en panne</p> |
Ensuite, je laisse ces balises P ne pas s'afficher par défaut
| <style type="text/css"> corps p{affichage : aucun ;} </style> |
Utilisez les commentaires conditionnels CSS IE pour distinguer les navigateurs IE
Le moyen le plus simple de distinguer les navigateurs IE est naturellement d'utiliser leurs commentaires conditionnels. Microsoft a créé une syntaxe puissante qui nous permet d'obtenir cette fonctionnalité. Je ne veux pas présenter les commentaires conditionnels d'IE en détail. Je pense que vous pouvez rechercher des dizaines de milliers de termes de recherche dans le moteur de recherche. Je n'ai besoin que de ces deux éléments ici :
| <!--[si IE 7]> <style type="text/css"> </style> <![endif]--> <!--[si IE 6]> <style type="text/css"> </style> <![endif]--> |
Utilisez l'analyseur CSS Hacks pour distinguer IE
Bien que les commentaires conditionnels d'IE soient très simples et faciles à utiliser, si vous souhaitez mettre tout le CSS dans un seul fichier, vous devez utiliser d'autres méthodes. Notez que le hack IE 7 ici ne fonctionnera que sur IE7, car IE6 ne connaît pas du tout le sélecteur >. Dans le même temps, vous devez noter que le sélecteur > n'est également pas valide pour les autres navigateurs.
| /* Internet Explorer 7 */ html > corps #ie7 {*affichage : bloquer ;} /* Internet Explorer 6 */ corps #ie6 {_display : bloquer ;} |
CSS Hack pour différencier Firefox
Le premier utilise body:empty pour différencier Firefox 1 et 2. Le deuxième hack utilise une extension propriétaire pour tous les navigateurs Firefox : moz. -moz n'est valable que pour Firefox. Vous n'avez pas à vous soucier de l'impact des autres navigateurs lorsque vous utilisez ce hack.
| /* Firefox 1 - 2 */ corps : vide #firefox12 {affichage : bloquer ;} /* Firefox */ @-moz-document url-prefix() {#firefox { display: bloquer }} |
CSS Hack différencie Safari
Le hack CSS de Safari ressemble beaucoup au hack de Firefox. Il utilise l'extension-webkit propriétaire du navigateur Safari et n'est efficace que pour le navigateur Safari.
| /* Safari */ Écran @media et (-webkit-min-device-pixel-ratio:0) {#safari { affichage : bloc }} |
CSS Hack distingue Opera
| /* Opéra */ @media tout et (-webkit-min-device-pixel-ratio:10000), pas tout et (-webkit-min-device-pixel-ratio:0) {head~body #opera { display: bloc }} |
Ensuite, rassemblez tout cela et cela devient
| <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="fr"> <tête> <méta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Hacks du navigateur CSS</title> <style type="text/css"> corps p { affichage : aucun ; } /* Opéra */ html:premier enfant #opera { affichage : bloc ; } /* Internet Explorer 7 */ html > corps #ie7 { *affichage : bloc ; } /* Internet Explorer 6 */ corps #ie6 { _display : bloc ; } /* Firefox 1 - 2 */ corps : vide #firefox12 { affichage : bloc ; } /* Firefox */ @-moz-document url-prefix() { #firefox { affichage : bloquer ; } /* Safari */ Écran @media et (-webkit-min-device-pixel-ratio:0) { #safari { affichage : bloc ; } /* Opéra */ @media tout et (-webkit-min-device-pixel-ratio:10000), pas tout et (-webkit-min-device-pixel-ratio:0) { tête~corps #opera { display: block } } </style> </tête> <corps> <p id="opera">Je viens d'Opera 7.2 - 9.5</p> <p id="safari">Je suis le Safari magique</p> <p id="firefox">Je viens de Firefox</p> <p id="firefox12">Je suis un Firefox senior FF 1 - 2 </p> <p id="ie7">Je suis 囧IE7</p> <p id="ie6">Je suis un IE 6 en panne</p></body> </html> |
Bien que CSS Hack soit efficace et facilement compatible avec divers navigateurs, il ne peut pas passer la vérification du W3C, vous devez donc déterminer s'il est nécessaire de l'utiliser.