聊聊css hack

什麼是CSS hack

CSS hack因爲不一樣廠商的 瀏覽器，好比Internet Explorer,Safari, Mozilla Firefox,Chrome等，或者是同一廠商的瀏覽器的不一樣版本，如IE6和IE7，對CSS的解析認識不徹底同樣，所以會致使生成的頁面效果不同，得不到咱們所須要的頁面效果。 這個時候咱們就須要針對不一樣的瀏覽器去寫不一樣的CSS，讓它可以同時兼容不一樣的瀏覽器，能在不一樣的瀏覽器中也能獲得咱們想要的頁面效果。

簡單的說，CSS hack的目的就是使你的CSS代碼兼容不一樣的瀏覽器。固然，咱們也能夠反過來利用CSS hack爲不一樣版本的瀏覽器定製編寫不一樣的CSS效果。

 

經常使用的CSS hack 有三種方式，CSS 內部hack、選擇器hack、HTML 頭部引用，其中第一種最經常使用。

 

通常咱們的內部樣式是這樣寫的：

<style type="text/css" >
    .test{
                background-color:green;
    }
   </style>

htm代碼：

<div class="test" style="height:100px; width:100px; line-height:100px; margin:50px; border:1px solid #000;"></div>

結果應該是這樣的：

在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 內部hack的基本原理。

目前還有很大部一部分人習慣仍是用IE的瀏覽器，因此這一塊市場仍是要作的，這就致使了前端的工做量增多了很多。下面說說CSS 內部hack。

CSS 內部hack的語法 是 selector{<hack>?property:value<hack>?;} ，例如：

<style type="text/css" >
    .test{
               * background-color:green;
    }
</style>

在屬性前面加個「*」這樣的寫法只會對IE六、7生效，其它版本IE及現代瀏覽器會忽略這條指令（沒有特殊說明，本文全部hack都是指在聲明瞭DOCTYPE的文檔的效果）

<style type="text/css" >
    .test{
               - background-color:green;
    }
</style>

在屬性前面有個「-」這樣的只有IE6識別。

<style type="text/css" >
    .test{
               _background-color:green;
    }
</style>

在屬性前面有個「_」這樣的只有IE6識別。

<style>
    .test{
             *+background-color:pink;             
}
</style>

在屬性前面有個「*+」這樣的只有IE6,IE7能識別。

<style type="text/css" >
    .test{
               background-color:green!important;
    }
</style>

在屬性值後面添加「!important」的寫法只有IE6不能識別，其它版本IE及現代瀏覽器均可以識別。

還有\9,\0,\9\0。

<style type="text/css" >
    .test{
               background-color:green\9;
    }
</style>

在屬性後面加「\9」的，在全部（IE6,IE7,IE8,IE9,IE10）下均可以顯示。其餘瀏覽器都不會顯示。

<style type="text/css" >
    .test{
               background-color:green\0;
    }
</style>

在屬性後面加「\0」的，在全部（IE8,IE9,IE10）下均可以顯示。其餘瀏覽器都不會顯示。

<style type="text/css" >
    .test{
               background-color:green\9\0;
    }
</style>

在屬性後面加「\9\0」的，在IE9,IE10下均可以顯示。其餘瀏覽器都不會顯示。

以上是css hack 內部樣式。

選擇器hack

選擇器hack最多見的三種狀況分別是：*html,*+html,:root。還有其餘的，如：

@media screen\9{...}只對IE6/7生效
@media \0screen {body { background: red; }}只對IE8有效
@media \0screen\,screen\9{body { background: blue; }}只對IE6/7/8有效
@media screen\0 {body { background: green; }} 只對IE8/9/10有效
@media screen and (min-width:0\0) {body { background: gray; }} 只對IE9/10有效
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {body { background: orange; }} 只對IE10有效

 

*html是針對IE6顯示的。

*+html是針對IE7顯示的。

:root是針對IE9顯示的。

若是你想針對IE7顯示寫，你能夠像如下這樣：

*+html #ie7test { /* IE7 only*/
    color:green;
}

 

若是你想針對IE9顯示寫，你能夠像如下這樣寫：

：root .test{
   background:green;  
}

HTML頭部引用

這是條件註釋法，這種方式是IE瀏覽器專有的Hack方式，微軟官方推薦使用的hack方式。舉例以下：

<!--[if IE]>
    這段文字只在IE瀏覽器顯示
    <![endif]-->
    
    只在IE6下生效
    <!--[if IE 6]>
    這段文字只在IE6瀏覽器顯示
    <![endif]-->
    
    只在IE6以上版本生效
    <!--[if gte IE 6]>
    這段文字只在IE6以上(包括)版本IE瀏覽器顯示
    <![endif]-->
    
    只在IE8上不生效
    <!--[if ! IE 8]>
    這段文字在非IE8瀏覽器顯示
    <![endif]-->
    
    非IE瀏覽器生效
    <!--[if !IE]>
    這段文字只在非IE瀏覽器顯示
    <![endif]-->

暫時先寫到這裏，後續再上。