瀏覽器兼容

什么是 CSS hack

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

CSS Hack大致有3種表現(xiàn)形式

  • CSS屬性前綴法
  • 選擇器前綴法
  • IE條件注釋法(即HTML頭部引用if IE)Hack,實際項目中CSS Hack大部分是針對IE瀏覽器不同版本之間的表現(xiàn)差異而引入的。
    注:IE條件注釋法(即HTML條件注釋Hack):針對所有IE(注:IE10+已經(jīng)不再支持條件注釋): ,針對IE6及以下版本: 。這類Hack不僅對CSS生效,對寫在判斷語句里面的所有代碼都會生效。

談一談瀏覽器兼容的思路

  • 要不要做

  • 產(chǎn)品的角度(產(chǎn)品的受眾、受眾的瀏覽器比例、效果優(yōu)先還是基本功能優(yōu)先)

  • 成本的角度 (有無必要做某件事)

  • 做到什么程度

  • 讓哪些瀏覽器支持哪些效果

  • 如何做

  • 根據(jù)兼容需求選擇技術框架/庫(jquery)

  • 根據(jù)兼容需求選擇兼容工具(html5shiv.js、respond.jscss reset、normalize.css、Modernizr)
    postCSS

  • 條件注釋、CSS Hack、js 能力檢測做一些修補


列舉5種以上瀏覽器兼容的寫法

條件注釋

<!--[if IE 6]> 
    <p>You are using Internet Explorer 6.</p>
 <![endif]-->
<!--[if !IE]><!--> 
    <script>alert(1);</script> 
<!--<![endif]-->
 <!--[if IE 8]>
     <link href="ie8only.css" rel="stylesheet"> 
<![endif]-->

CSS hack

.box{ 
    color: red; _color: blue; /*ie6*/
    *color: pink; /*ie67*/ 
    color: yellow\9; /*ie/edge 6-8*/
}

以下工具/名詞是做什么的

條件注釋
條件注釋 (conditional comment) 是于HTML源碼中被 Microsoft Internet Explorer 有條件解釋的語句。條件注釋可被用來向 Internet Explorer 提供及隱藏代碼 ``
IE Hack
使用特殊的符號或者方式寫出只有IE瀏覽器可以解析的代碼,有CSS屬性前綴法、選擇器前綴法以及IE條件注釋法
js 能力檢測
使用JS的語法檢測瀏覽器支持的屬性,以便展示效果
html5shiv.js
用于解決IE9以下版本瀏覽器對HTML5新增標簽不識別,并導致CSS不起作用的問題。
respond.js
讓不支持css3 Media Query的瀏覽器包括IE6-IE8等其他瀏覽器支持查詢。
css reset
通過重新定義標簽樣式,“覆蓋”瀏覽器的CSS默認屬性
normalize.css
Normalize.css 只是一個很小的CSS文件,但它在默認的HTML元素樣式上提供了跨瀏覽器的高度一致性。相比于傳統(tǒng)的CSS reset,Normalize.css是一種現(xiàn)代的、為HTML5準備的優(yōu)質替代方案。
Modernizr
Modernizr是一個 JavaScript 庫,用于檢測用戶瀏覽器的 HTML5 與 CSS3 特性。
postCSS
PostCSS是一個JS插件轉換樣式表的工具。這些插件能夠檢驗你的CSS、支持變量和混合,轉化css3的新特性語法、行內(nèi)圖片等。


一般在哪個網(wǎng)站查詢屬性兼容性?

caniuse :查css屬性 選擇器在各瀏覽器的兼容。
browserhacks:查css屬性 選擇器在各瀏覽器Hack的寫法

最后編輯于
?著作權歸作者所有,轉載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

相關閱讀更多精彩內(nèi)容

  • 什么是 CSS hack CSS hack是通過在CSS樣式中加入一些特殊的符號,讓不同的瀏覽器識別不同的符號(什...
    怎么昵稱閱讀 528評論 0 1
  • CSS Hack 不同的瀏覽器對某些CSS代碼解析會存在一定的差異,因此就會導致不同瀏覽器下給用戶展示的頁面效果不...
    zx9426閱讀 478評論 0 0
  • 一、如何調試 IE 瀏覽器? IE調試的一般方法(css): 使用高版本IE控制臺(對于IE7以上)IE11的開發(fā)...
    婷樓沐熙閱讀 607評論 0 6
  • 一、問答部分 1. 如何調試 IE 瀏覽器 IE7及以上版本有調試臺,可以按F12啟動。Paste_Image.p...
    _hello__world_閱讀 565評論 0 1
  • 北緯37度或許正在飄著雪 她卻在南方艷陽里流著汗 當我在濃霾籠罩的地方寫著簡書 你在漠河看極光 而她那里或正繁星滿...
    婉兒2017閱讀 333評論 0 2

友情鏈接更多精彩內(nèi)容