什么是 CSS hack
由于不同的瀏覽器,甚至同一瀏覽器的不同版本對CSS的解析認識不一樣,導致生成的頁面效果不一致礼饱,寫出針對不同瀏覽器CSS 作郭。
談一談瀏覽器兼容的思路
- 要不要做兼容。從產品的角度和成本的角度去考慮逗抑,從產品的角度考慮:產品的受眾剧辐、受眾的瀏覽器比例寒亥、效果優(yōu)先還是基本功能優(yōu)先;從成本的角度考慮:有無必要做某件事荧关、值不值得做溉奕。
- 做到什么程度。讓哪些瀏覽器支持忍啤,又支持哪些效果加勤。
- 如何做。根據兼容需求選擇技術框架/庫(如jquery)同波、根據兼容需求選擇兼容工具(如html5shiv.js胸竞、respond.js、css reset参萄、normalize.css卫枝、Modernizr)、postCSS讹挎、條件注釋校赤、CSS Hack、js 能力檢測做一些修補筒溃。
列舉5種以上瀏覽器兼容的寫法
IE條件注釋:
<!–-[if IE 7]>
<link rel="stylesheet" href="ie7.css" type="text/css" />
<![endif]–->
IE屬性前綴:
.selector{
color: red;
_color: blue; /ie6/
color: pink; /ie6-7/
color: yellow\9; /ie/edge 6-8*/
}
IE選擇器前綴:
html{}/ie6/
+html{}/ie7/
不同瀏覽器添加相應的屬性前綴:
div{
border-radius: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
}
屬性兼容的方式:
inline-block: >=ie8
min-width/min-height: >=ie8
:before,:after: >=ie8
div:hover: >=ie7
inline-block: >=ie8
background-size: >=ie9
以下工具/名詞是做什么的
- 條件注釋
- IE Hack
- js 能力檢測
- html5shiv.js
- respond.js
- css reset
- normalize.css
- Modernizr
- postCSS
條件注釋:
條件注釋 (conditional comment) 是于HTML源碼中被IE有條件解釋的語句马篮。條件注釋可被用來向IE提供及隱藏代碼。IE中的條件注釋(Conditional comments)對IE的版本和IE非IE有優(yōu)秀的區(qū)分能力怜奖,是WEB設計中常用的hack方法浑测。條件注釋只能用于IE5以上。
IE Hack:
針對不同的IE瀏覽器編寫不同的CSS讓IE能夠正常渲染的過程歪玲。
js 能力檢測:
js能力檢測的目標不是識別特定的瀏覽器迁央,而是識別瀏覽器的能力。使用這種方式無需顧及瀏覽器如何如何滥崩,只需確定瀏覽器是否支持特定的能力岖圈,就可以給出相關的方案。
html5shiv.js:
解決ie9以下瀏覽器對html5新增標簽的不識別钙皮,并導致CSS不起作用的問題蜂科。
respond.js:
讓不支持css3 Media Query的瀏覽器包括IE6-IE8等其他瀏覽器支持查詢。
css reset:
HTML標簽在瀏覽器中都有默認的樣式短条,不同瀏覽器的默認樣式之間存在差別导匣。css reset能將瀏覽器的默認樣式全部覆蓋掉。
normalize.css:
Normalize.css 只是一個很小的CSS文件茸时,但它在默認的HTML元素樣式上提供了跨瀏覽器的高度一致性贡定。相比于傳統(tǒng)的CSS reset,Normalize.css是一種現代的屹蚊、為HTML5準備的優(yōu)質替代方案厕氨。
postCSS:
PostCSS基于js插件去轉換css的一個工具进每。PostCSS的目標是通過自定義插件和工具這樣的生態(tài)系統(tǒng)來改造CSS。與Sass和Less這些預編譯器相同的原則命斧,PostCSS把擴展的語法和特性轉換成現代的瀏覽器友好的CSS田晚。
Modernizr:
Modernizr 是一個很小的用來檢測下一代 Web 技術原生實現可用性的 JavaScript 庫。HTML5 和 CSS3 都引入了各自的新特性国葬,但是同時也有很多瀏覽器不支持這些新特性贤徒。Modernizr 提供了一種簡單的方式檢測任意新特性,從而讓我們可以采取相應的操作汇四。