Piratage CSS

J'ai toujours été très borné et partial contre les hacks CSS. Je pensais que ces "mauvaises méthodes" ne devraient pas être utilisées dans un code bien écrit. Cependant, un petit problème dans la récente version du produit m'a donné mal à la tête. longtemps. Finalement, après avoir vérifié les informations, il s'est avéré que cela se résolvait facilement en utilisant le hack CSS, mais je dois l'accepter. Vous devez utiliser ces outils pour gérer l'IE magique.

Qu'est-ce que le hack CSS

Parce que différents navigateurs, ou même différentes versions du même navigateur, ont des compréhensions différentes de l'analyse CSS, ce qui entraîne des effets incohérents sur les pages générées, écrivant du CSS pour différents navigateurs le code est appelé CSS hack.

Il existe trois hacks CSS couramment utilisés, des hacks internes CSS, des hacks de sélection et des références d'en-tête HTML, dont le premier est le plus couramment utilisé.

Piratage interne CSS

Le CSS sérieux est écrit comme ceci

nbsp;html>
    
        <title>Test</title>
        <style>
            .test            {
                background-color:green;
            }
        </style>
    
    
        <p></p>
    

Ce code convient à tous les navigateurs actuellement couramment utilisés Tout fonctionne, et le résultat devrait être comme ceci

Mais certaines méthodes d'écriture courantes comme celle-ci sont courantes en CSS3

/*Mozilla内核浏览器：firefox3.5+*/
  -moz-transform: rotate | scale | skew | translate ; /*Webkit内核浏览器：Safari and Chrome*/
  -webkit-transform: rotate | scale | skew | translate ; /*Opera*/
  -o-transform: rotate | scale | skew | translate ; /*IE9*/
  -ms-transform: rotate | scale | skew | translate ; /*W3C标准*/
  transform: rotate | scale | skew | translate ;

S'il n'y avait pas de commentaires, à première vue je trouverais ça ridicule, mais ce genre de code fonctionne très bien ! Ce type de code est vraiment simple à utiliser. La norme CSS3 actuelle n'a pas été unifiée. Chaque navigateur a sa propre manière d'expression. Certains l'implémentent même et d'autres n'ajoutent pas de préfixes devant pour indiquer la prise en charge d'un navigateur spécifique. C'est aussi Les principes de base des hacks internes CSS sont simples et faciles à comprendre, mais le vrai hack CSS est bien plus que cela, car il existe l'immortel IE6 et ses différentes versions étranges de frères.

La syntaxe de hack interne CSS est comme ce sélecteur{?property:value?;} Le code ci-dessus montre le hack avant le nom de la propriété. Bien sûr, il y a aussi ceci <.>

*background-color:green;

L'ajout d'un "*" devant l'attribut ne prendra effet que sur IE6 et 7. Les autres versions d'IE et les navigateurs modernes ignoreront cette instruction (aucune instruction particulière instructions), tous les hacks de cet article font référence à l'effet des documents qui déclarent DOCTYPE)

-background-color:green;

Il y a un "-" devant l'attribut, qui est uniquement reconnu par IE6, et certains sont reconnus par IE6 Le hack suivant

background-color:green!important;

est un moyen d'ajouter "!important" après la valeur de l'attribut. Seul IE6 ne peut pas reconnaître. D'autres versions d'IE et des navigateurs modernes peuvent également le reconnaître.

	IE6	IE7	IE8	IE9	IE10	现代浏览器
*
+
-
!important
\9
\0
\9\0

这样就清楚多了吧。如果只想给上面的test p在IE访问的时候加绿色背景，就可以这么写

background-color:green\9;

如果想IE6红色，IE7绿色，其它黄色（当然没人这么无聊）就可以这么写

background-color:green;
+background-color:green;
_background-color:green;

选择器hack

选择器hanck主要是针对IE浏览器，其实并不怎么常用，语法是这样的： selector{ sRules }

	IE6	IE7	IE8	IE9	IE10	现代浏览器
*html
*+html
:root

针对IE9的hack可以这么写

:root .test{
    background-color:green;
}

HTML头部引用

HTML头部引用就比较特殊了，类似于程序语句，只能使用在HTML文件里，而不能在CSS文件中使用，并且只有在IE浏览器下才能执行，这个代码在非IE浏览下非单不是执行该条件下的定义，而是当做注释视而不见。

<link><link><link>

lte：就是Less than or equal to的简写，也就是小于或等于的意思。

lt ：就是Less than的简写，也就是小于的意思。

gte：就是Greater than or equal to的简写，也就是大于或等于的意思。

gt ：就是Greater than的简写，也就是大于的意思。

! ：就是不等于的意思，跟javascript里的不等于判断符相同。

书写顺序

看看，看看，这么多姿势，那么一个效果，好多种写法，什么顺序写才能保证各个浏览器都得到希望的效果呢？因为CSS只要是同一级别，出现重复属性设置，后出现的会覆盖前面出现的，所以在书写的时候一般把识别能力强的写前面，看个例子

_background-color:red;
background-color:green;

如果希望p在IE6上是红色，其它是绿色，上面的写法可不可以呢？试一下发现所有浏览器上都是绿色，因为在IE6解析的时候，第一句能够识别，背景设为红色，但是第二句所有浏览器都识别，IE6也不例外，背景颜色又被设为绿色，所以得反过来写

background-color:green;
_background-color:red;

总结出的规律就是：先一般，再特殊。有兴趣的同学可以试试试试下面CSS，看看和你想的效果是否一样

background-color:blue; /*所有浏览器*/background-color:red\9;/*所有的ie*/background-color:yellow\0; /* ie8+*/+background-color:pink; /*+ ie7*/

更多CSS hack 相关文章请关注PHP中文网！