瀏覽器的兼容性

* 什么是 CSS hack

css hack由于不同瀏覽器廠商或者不同瀏覽器的不同版本,如IE6.IE7,對(duì)css解析完成不同,因此會(huì)導(dǎo)致頁(yè)面的效果不一樣,得不到我們想要的頁(yè)面效果,這個(gè)時(shí)候就需要針對(duì)不同的瀏覽器寫(xiě)不同的CSS Hack來(lái)達(dá)到我們想要的效果。總之,Css Hack的目的就是是你的Css代碼兼容不同的瀏覽器。反之,也就是利用了不同瀏覽器的Css Hack來(lái)寫(xiě)對(duì)應(yīng)css效果。

* 談一談瀏覽器兼容的思路

1.可以從網(wǎng)站面向的群體來(lái)考慮:
* 如果面向的是銀行 政府 傳統(tǒng)企業(yè) 這類就需要考慮兼容方面的問(wèn)題。
* 如果面型是電子商務(wù),青少年社交網(wǎng)站等年輕群體就一開(kāi)始構(gòu)建完整的功能,然后再針對(duì)低版本瀏覽器優(yōu)雅降級(jí)

2.瀏覽器所占的市場(chǎng)比重:
* 如果一個(gè)瀏覽器市場(chǎng)份額很少,就不太需要關(guān)心兼容方面的問(wèn)題.

3.頁(yè)面是以效果優(yōu)先還是以基本功能優(yōu)先
* 如果是以效果優(yōu)先就一開(kāi)始構(gòu)建完成的功能,然后再針對(duì)低版本瀏覽器優(yōu)雅降低
* 如果是以基本功能優(yōu)先: 那就針對(duì)低版本瀏覽器進(jìn)行頁(yè)面構(gòu)建,保證基本功能,然后在對(duì)新版本瀏覽器進(jìn)行效果 交互 等改進(jìn)和追加功能以達(dá)到更好的用戶體驗(yàn).

做到什么程度:
讓瀏覽器支持哪些功能和效果
如何做

  • 根據(jù)兼容需求選擇技術(shù)框架和庫(kù)(jQuery)
  • 根據(jù)兼容需求選擇兼容工具(html5shiv.js .respond.js .css reset.normalze.css.Modernizr)
  • 條件注釋. css Hack .js能力檢測(cè) 做進(jìn)一步修補(bǔ).

* 瀏覽器兼容的寫(xiě)法

browserhacks

  • html{}會(huì)被IE6識(shí)別
    +htmlP{}會(huì)被IE7識(shí)別
    html{color:red\9}IE6~8識(shí)別
    -webkit-text-shadow{}瀏覽器私有前綴

* 條件注釋

不會(huì)被瀏覽器解析的。添加注釋添加可讀性

* IE Hack

IE不同版本對(duì)css解析不同,針對(duì)不同版本寫(xiě)不同的Css Hack來(lái)達(dá)到想要的頁(yè)面效果

* js 能力檢測(cè)

* html5shiv.js

IE9之前的版本幾乎不支持HTML5與Css3新特性。html5shiv.js可以允許IE9之前的版本識(shí)別HTML5標(biāo)記,使用Css樣式.

* respond.js

主要針對(duì)低版本瀏覽器對(duì)媒體查詢的實(shí)現(xiàn).

* css reset

主要就是早期的瀏覽器對(duì)css的理解不同,造成渲染效果不同。css reset修改了css的默認(rèn)樣式來(lái)盡量達(dá)到渲染效果一致

* normalize.css

基于css reset. 覺(jué)得css reset 太簡(jiǎn)單粗暴了,不應(yīng)該把css的所有默認(rèn)樣式都清除。

推崇的思想每個(gè)元素都有其存在的意義,簡(jiǎn)單粗暴的一視同仁并不好。盡少的修改.
優(yōu)點(diǎn):
* 保護(hù)有用的瀏覽器默認(rèn)樣式
* 一般化的格式
* 修復(fù)瀏覽器自身的Bug
* 優(yōu)化css可用性
* 代碼解釋

* Modernizr

主要來(lái)檢測(cè) 瀏覽器對(duì)一些新的屬性是否支持

* postCSS.

勝于less和sass的Postcss,還支持模塊化,以及靈活的構(gòu)建進(jìn)程。

PostCss提供一個(gè)css解析器和創(chuàng)建可以分析 測(cè)試 處理資源 優(yōu)化 創(chuàng)建回調(diào)。和傳輸給其他解析css
框架的插件的寬框架。具體詳解->PostCss

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

can i use

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

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

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