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.
| Je viens d'Opera 7.2 - 9.5 Je suis le Safari magique Je viens de Firefox Je suis un Firefox senior FF 1 - 2 Je suis 囧IE7 Je suis un IE 6 en panne |
Ensuite, je laisse ces balises P ne pas s'afficher par défaut
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 :
| |
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 propriétaire du navigateur Safari - webkit et n'est efficace que pour le navigateur Safari.
| /* Safari */ Écran @media et (-webkit-min-device-pixel-ratio:0) {#safari { affichage : bloquer ;}} |
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
| Je viens d'Opera 7.2 - 9.5 Je suis le Safari magique Je viens de Firefox Je suis un Firefox senior FF 1 - 2 Je suis 囧IE7 Je suis un IE 6 en panne |