La liste la plus complète des méthodes de hack CSS (compatible avec plusieurs navigateurs)

Afin d'obtenir un effet de page unifié, vous devez écrire des styles CSS spécifiques pour différents navigateurs ou différentes versions. Nous appelons ce processus d'écriture du code CSS correspondant pour différents navigateurs/différentes versions un hack CSS ! Ayant travaillé sur le front-end depuis de nombreuses années, même si nous n’avons pas souvent besoin de hacks, nous rencontrons souvent des performances incohérentes entre les navigateurs. Sur cette base, dans certains cas, nous serons extrêmement réticents à utiliser cette méthode peu conviviale pour atteindre les performances de page requises par tout le monde. Personnellement, je ne recommande pas d'utiliser des hacks. Un bon front-end doit répondre aux exigences sans utiliser de hacks autant que possible pour obtenir une meilleure expérience utilisateur. Cependant, la réalité est trop cruelle. Les problèmes historiques entre les fabricants de navigateurs nous obligent à faire des compromis avec les pirates informatiques en fonction des exigences de la cible, bien qu'il ne s'agisse que d'un cas isolé. Aujourd'hui, sur la base de ma propre expérience et de ma compréhension, j'ai réalisé plusieurs démos pour résumer les hacks CSS de IE6~IE10 et d'autres navigateurs standards. Cet article devrait peut-être être le résumé le plus complet des hacks actuellement.

Qu'est-ce que le hack CSS
En raison des navigateurs de différents fabricants ou des différentes versions d'un certain navigateur (tels que IE6-IE11, Firefox/Safari/Opera/Chrome, etc.) , la prise en charge et l'analyse CSS sont différentes, ce qui entraîne une présentation des pages incohérente dans différents environnements de navigateur. À l'heure actuelle, afin d'obtenir un effet de page unifié, nous devons écrire des styles CSS spécifiques pour différents navigateurs ou différentes versions. Nous appelons ce processus d'écriture du code CSS correspondant pour différents navigateurs/différentes versions un hack CSS ! 🎜>
Principe du piratage CSS
En raison de la prise en charge et des résultats d'analyse différents des différents navigateurs et versions de navigateur pour CSS, et de l'impact de la priorité CSS sur les effets d'affichage du navigateur, nous pouvons appliquer différents CSS en fonction des différents scénarios de navigateur.

Classification du hack CSS
CSS Hack a généralement trois formes d'expression, la méthode de préfixe d'attribut CSS, la méthode de préfixe de sélecteur et la méthode de commentaire conditionnel IE (c'est-à-dire la référence d'en-tête HTML si IE) Hack. Dans les projets réels, CSS Hack est principalement introduit pour résoudre les différences de performances entre les différentes versions des navigateurs IE.
Méthode de préfixe d'attribut (c'est-à-dire Hack interne de classe) : Par exemple, IE6 peut reconnaître le soulignement "_" et l'astérisque "*", IE7 peut reconnaître l'astérisque "*", mais ne peut pas reconnaître le soulignement "_", IE6~ IE10 reconnaît « 9 », mais Firefox ne peut pas reconnaître les trois ci-dessus.
Méthode de préfixe de sélecteur (c'est-à-dire sélecteur Hack) : par exemple, IE6 peut reconnaître *html .class{}, IE7 peut reconnaître *html .class{} ou *:first-child html .class{}.
Méthode de commentaire conditionnel IE (c'est-à-dire Hack de commentaire conditionnel HTML) : pour tous les IE (Remarque : IE10 ne prend plus en charge les commentaires conditionnels) : 3b91107ae0f6dc60cbcc0243262d767fContenu affiché par le navigateur IEfccabc11cfc882051ea1460ae5d5e834, pour IE6 et versions antérieures : 77ff45aa02bda806843bc31600e44271Contenu affiché uniquement dans IE6-1b771f47d72d900ba74308aee59557f0. Ce type de hack prend effet non seulement sur CSS, mais également sur tout le code écrit dans l'énoncé de jugement.
　
L'ordre d'écriture des hacks CSS est généralement de définir CSS avec une large gamme d'applications et une forte capacité de reconnaissance au premier plan.


Méthode de hack CSS 1 : Méthode de commentaire conditionnel
Cette méthode est une méthode de hack exclusive au navigateur IE et est officiellement recommandée par Microsoft. Par exemple,

ne prend effet que dans IE
3b91107ae0f6dc60cbcc0243262d767f
Ce texte s'affiche uniquement dans le navigateur IE
32e58b5d176aa7c802edc3635d7b0000 ;

Valable uniquement dans IE6
32bf6dd8d9e9c69afb95af0b0e5e6991
Ce texte s'affiche uniquement dans le navigateur IE6
60453962d656d01b50acc4a3185457fa

Valable uniquement dans IE6 et supérieur
91029187a47d4c3a99cc198a5627b173
Ce texte s'affiche uniquement dans les navigateurs IE de IE6 et supérieur (y compris)
< ;![endif]-->

Ne fonctionne pas sur IE8
b11c5b9bbe769c6575cf277092ba7f0b IE8 Le navigateur affiche
1b771f47d72d900ba74308aee59557f0

Effectif dans les navigateurs non-IE
dbf5feeb0d676154b00e7fac3915442f fonctionne dans les navigateurs non-IE Le navigateur IE affiche
1b771f47d72d900ba74308aee59557f0


Deuxième méthode de hack CSS : méthode de préfixe d'attribut intra-classe

Le La méthode de préfixe d'attribut est dans l'attribut de style CSS. Ajoutez des préfixes de hack qui ne peuvent être reconnus que par des navigateurs spécifiques devant le nom pour obtenir l'effet d'affichage de page attendu.
Tableau de comparaison des hacks CSS pour chaque version d'IE

hack

写法

实例

IE6(S)

IE6(Q)

IE7(S)

IE7(Q)

IE8(S)

IE8(Q)

IE9(S)

IE9(Q)

IE10(S)

IE10(Q)

*

*color

青色

Y

Y

Y

Y

N

Y

N

Y

N

Y

color

绿色

Y

Y

Y

Y

N

Y

N

Y

N

Y

-

-color

黄色

Y

Y

N

N

N

N

N

N

N

N

_

_color

蓝色

Y

Y

N

Y

N

Y

N

Y

N

N

#

#color

紫色

Y

Y

Y

Y

N

Y

N

Y

N

Y