CSSハック

私は以前、CSS ハックに対して非常に偏狭で偏見を持っていましたが、よく書かれたコードはこれらの「邪悪な方法」を使用すべきではないと感じていました。しかし、最近の製品リリースでの小さな問題が私を長い間悩ませてきました。最後に、情報を確認したところ、CSS が使用されていることがわかりました。このハックは簡単に解決しますが、魔法の IE に対処するにはこれらの鋭いツールを使用する必要があります。

CSS ハックとは

異なるブラウザー、さらには同じブラウザーの異なるバージョンでも CSS 解析の理解が異なり、生成されるページに一貫性のない影響が生じるため、異なるブラウザー用の CSS コードを記述することを CSS ハックと呼びます。

よく使用される CSS ハックは、CSS 内部ハック、セレクター ハック、HTML ヘッダー参照の 3 つです。最初のハックが最もよく使用されます。

CSS内部ハック

本格的なCSSは次のように書かれています

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

このようなコードは現在一般的に使用されているすべてのブラウザで簡単に使用でき、結果は次のようになります

しかし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 ;

ではこのようなメソッドがよくありますが、コメントがないと一見、とんでもないことだと思うかもしれませんが、このようなコードは使いやすいです！この種のコードは非常に使いやすいですが、現在の CSS3 標準は統一されていないため、ブラウザごとに独自の表現方法があり、特定のブラウザのサポートを示すために先頭にいくつかのプレフィックスを追加する場合もあります。 CSS 内部ハックの基本原則はシンプルで理解しやすいものですが、不滅の IE6 とそのさまざまな奇妙な兄弟バージョンがあるため、実際の CSS ハックはそれをはるかに超えています。

CSS の内部ハック構文は、このセレクター {?property:value?;} のようなものです。 もちろん、この

*background-color:green;

も存在します。属性の前に「*」を追加すると、IE6 および 7 でのみ有効になります。他のバージョンの IE および最新のブラウザーは、この指示を無視します (特別な指示はありません。この記事のすべてのハックは、DOCTYPE を宣言するドキュメントの効果を参照しています)。

-background-color:green;

属性の前に「-」がありますが、これはIE6でのみ認識され、後ろにはいくつかのハックがあります

background-color:green!important;

属性の後に「!重要」を追加するこの方法値は IE6 でのみ認識され、他のバージョンは IE と最新のブラウザで認識でき、「+」と「」もあります

	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中文网！