標籤:不同 css 未來 ie8 文檔 維護 html ref xpl
由於不同廠商的瀏覽器,比如Internet Explorer,Safari,Mozilla Firefox,Chrome等,或者是同一廠商的瀏覽器的不同版本,如IE6和IE7,對CSS的解析認識不完全一樣,導致產生的不是我們所需要的頁面效果。 這個時候我們就需要針對不同的瀏覽器去寫不同的CSS,讓它能夠同時相容不同的瀏覽器,在不同的瀏覽器中也能得到我們想要的頁面效果。
簡單的說,CSS hack的目的就是使你的CSS代碼相容不同的瀏覽器。當然,我們也可以反過來利用CSS hack為不同版本的瀏覽器定製編寫不同的CSS效果。
啥?還木明白?就是說同一個效果你要根據不同的瀏覽器寫不同的css 代碼!現在主要就是針對IE瀏覽器了。
原理:使用CSS屬性的優先順序來實現CSS Hack。
CSS Hack書寫順序,一般是將適用範圍廣、被識別能力強的CSS定義在前面。
CSS Hack的實現方式:
1、CSS 類內部Hack
通過 屬性和值的首碼或尾碼來實現瀏覽器版本的識別。
例如 IE6能識別底線"_"和星號" * ",IE7能識別星號" * ",但不能識別底線"_",IE6~IE10都認識"\9",但firefox前述三個都不能認識。
2、選取器Hack
在 瀏覽器前加首碼來實現不同的瀏覽器版本的識別。
* : 識別IE6
*+ 首碼: 識別IE7
ex:
*div{
}
3、HTML頭部引用Hack(掌握)
原理:使用 IE的條件注釋來完成瀏覽器版本的判斷(註:IE10+已經不再支援條件注釋)。
文法:
<!--[if 條件 IE 版本]>
滿足瀏覽器版本時要執行的操作
<![endif]-->
版本:6-10,如果省略版本號碼的話,則判斷是否為IE
<!--[if IE 6]>
只在IE6中要執行的操作
<![endif]-->
條件:
1、gt
判斷當前瀏覽器版本是否大於指定版本
2、gte
判斷當前瀏覽器版本是否大於等於指定版本
3、lt
判斷當前瀏覽器版本是否小於指定版本
4、lte
判斷當前瀏覽器版本是否小於等於指定版本
5、!
非,取反,不是
判斷當前瀏覽器版本是否不等於指定版本
6、不寫
判斷瀏覽器是否為IE或IE的指定版本
CSS hack利弊
一般情況下,我們盡量避免使用CSS hack,但是有些情況為了顧及使用者體驗實現向下相容,不得已才使用hack。比如由於IE8及以下版本不支援CSS3,而我們的項目頁面使用了大量CSS3新屬性在IE9/Firefox/Chrome下正常渲染,可能就得讓IE8-的專屬hack出馬了。使用hack雖然對頁面表現的一致性有好處,但過多的濫用會造成html文檔混亂不堪,增加管理和維護的負擔。相信只要大家一起努力,少用、慎用hack,未來一定會促使瀏覽器廠商的標準越來越趨於統一,順利過渡到標準瀏覽器的主流時代。拋棄那些陳舊的IE hack,必將減輕我們編碼的複雜度,少做無用功。
關於CSS Hack