CSS hack方式


一、css hack是什么?

百度百科是這樣解釋的:CSS hack是由於不同廠商的瀏覽器,比如IE,Safari,Firefox,Chrome,opera等,或者是同一廠商的瀏覽器的不同版本,如IE6和IE7,它們對CSS的解析認識不完全一樣,因此會導致生成的頁面效果不一樣,得不到我們所需要的頁面效果。這個時候我們就需要針對不同的瀏覽器去寫不同的CSS,讓它能夠同時兼容不同的瀏覽器,能在不同的瀏覽器中也能得到我們想要的頁面效果。簡單的說,CSS hack的目的就是使你的CSS代碼兼容不同的瀏覽器。當然,我們也可以反過來利用CSS hack為不同版本的瀏覽器定制編寫不同的CSS效果。

二、原理

由於不同的瀏覽器和瀏覽器各版本對CSS的支持及解析結果不一樣,以及CSS優先級對瀏覽器展現效果的影響,我們可以據此針對不同的瀏覽器情景來應用不同的CSS樣式。

三、分類

CSS Hack大致有3種表現形式:CSS屬性前綴法選擇器前綴法以及IE條件注釋法(即HTML頭部引用if IE)Hack,實際項目中CSS Hack大部分是針對IE瀏覽器不同版本之間的表現差異而引入的。

  • 屬性前綴法(即css類內部Hack):例如 IE6能識別下划線"_"和星號" * ",IE7能識別星號" * ",但不能識別下划線"_",IE6~IE10都認識"\9",但firefox對於前述三個都不能識別等等。
  • 選擇器前綴法(即選擇器Hack):例如 IE6能識別*html .class{},IE7能識別*+html .class{}或者*:first-child+html .class{}。
  • IE條件注釋法(即HTML條件注釋Hack):針對所有IE(注:IE10+已經不再支持條件注釋): <!--[if IE]>IE瀏覽器顯示的內容 <![endif]-->,針對IE6及以下版本: <!--[if lt IE 6]>只在IE6-顯示的內容 <![endif]-->。這類Hack不僅對CSS生效,對寫在判斷語句里面的所有代碼都會生效。

上面一大串內容說得太官方,簡單地說:CSS hack 常用的方式有三種,CSS 內部hack、選擇器hack、HTML 頭部引用,其中 CSS 內部hack 最常用注意一點就是CSS hack的書寫順序一般是先將適用范圍廣、被識別能力強的CSS定義在前面,把一些特殊的,范圍小的CSS定義在后面,比如,firefox寫在IE7前面,而IE7寫在IE6前面以此類推。

CSS 內部 hack

由於CSS 內部 hack 最為常用,故先講一下:

CSS 內部 hack 語法是這樣的 selector{<hack>?property:value<hack>?;},比如:

-background-color:green;

在css屬性前面加上“-”,這樣這條屬性就只有IE6能識別,當然還有加“*”,則IE6/7能識別;還有些是寫在屬性后面的:

background-color:green\9;

在后面加上“\9”,這樣只有IE瀏覽器能識別,而加上“\9\0”則只有IE9/10能識別,以此類推!

還是看圖比較直觀,這里我用Bootstrap弄個簡單的表格來展示一下:

360截圖20150426153856195

OK,根據CSS hack 的書寫順序,這里舉個例子:

div{
        width: 300px;
        height: 300px;
        background-color: red;              /*所有瀏覽器*/
        background-color: blue\9;        /*所有IE(IE6+)*/
        background-color: green\0;      /*IE8 */
        +background-color: pink;          /*IE7*/
        _background-color: orange;      /*IE6*/
 }

如果要區分標准模式下IE6~IE10和Opera/Firefox/Chrome的hack,這里有個例子很詳細:

IE6顯示為:橘色,
IE7顯示為:粉色,
IE8顯示為:黃色,
IE9顯示為:紫色,
IE10顯示為:綠色,
Firefox顯示為:藍色,
Opera顯示為:黑色,
Safari/Chrome顯示為:灰色。  請注意書寫順序!

.hacktest{ 
      background-color:blue;      /* 都識別,此處針對firefox */
      background-color:red\9;      /*all ie*/
      background-color:yellow\0;    /*for IE8/IE9/10 最新版opera也認識*/
     +background-color:pink;        /*for ie6/7*/
     _background-color:orange;       /*for ie6*/
}

@media screen and (min-width:0){ 
     .hacktest {background-color:black\0;}  /*opera*/
} 
@media screen and (min-width:0) { 
     .hacktest { background-color:purple\9; }/*  for IE9/IE10  PS:國外有些習慣常寫作\0,根本沒考慮Opera也認識\0的實際 */
}
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { 
     .hacktest { background-color:green; } /* for IE10+ 此寫法可以適配到高對比度和默認模式,故可覆蓋所有ie10的模式 */
}
@media screen and (-webkit-min-device-pixel-ratio:0){
                 .hacktest {background-color:gray;}    /*for Chrome/Safari*/
 }  

/* #963棕色 :root is for IE9/IE10, 優先級高於@media, 慎用!如果二者合用,必要時在@media樣式加入 !important 才能區分IE9和IE10 */
/*
:root .hacktest { background-color:#963\9; } 
*/

選擇器 hack

選擇器hack其實主要是針對IE瀏覽器,不常用,常用如表:

360截圖20150426162914589

例如:

:root .test
{
           background-color:green;    /* IE9 */
}
HTML頭部引用

這種方式是IE瀏覽器專有的Hack方式,微軟官方推薦使用的hack方式,在非IE瀏覽器下則當做注釋視而不見。

<!--[if IE]>
       這段文字只在IE瀏覽器顯示
<![endif]-->
    
<!--[if IE 6]>
       這段文字只在IE6瀏覽器顯示
<![endif]-->
    
<!--[if gte IE 6]>
      這段文字只在IE6及以上版本IE瀏覽器顯示
<![endif]-->
    
<!--[if ! IE 8]>
        這段文字在非IE8瀏覽器顯示
<![endif]-->

<!--[if !IE]>
        這段文字只在非IE瀏覽器顯示
<![endif]-->

注意點:

lte:就是Less than or equal to的簡寫,也就是小於或等於的意思。

lt :就是Less than的簡寫,也就是小於的意思。

gte:就是Greater than or equal to的簡寫,也就是大於或等於的意思。

gt :就是Greater than的簡寫,也就是大於的意思。

! :就是不等於的意思。

 

PS:學習了CSS hack的各種技巧,不過最重要的還是要注意書寫順序,如果順序寫錯了,就達不到我們想要的效果了哦!當然,除非實際項目需要,一般還是盡量避免使用CSS hack !

 

參考:http://www.cnblogs.com/dolphinX/p/3292630.html

參考:http://blog.csdn.net/freshlover/article/details/12132801


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM