* 什么是 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ě)法
- 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