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) : , pour IE6 et versions antérieures : . 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


Ne fonctionne pas sur IE8


Effectif dans les navigateurs non-IE



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