一、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弄個簡單的表格來展示一下:
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瀏覽器,不常用,常用如表:
例如:
: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