一、什么是 CSS hack
CSS hack由于不同厂商的浏览器,比如Internet Explorer,Safari,Mozilla Firefox,Chrome等,或者是同一厂商的浏览器的不同版本,如IE6和IE7,对CSS的解析认识不完全一样,因此会导致生成的页面效果不一样,得不到我们所需要的页面效果。 这个时候我们就需要针对不同的浏览器去写不同的CSS,让它能够同时兼容不同的浏览器,能在不同的浏览器中也能得到我们想要的页面效果。
简单的说,CSS hack的目的就是使你的CSS代码兼容不同的浏览器。当然,我们也可以反过来利用CSS hack为不同版本的浏览器定制编写不同的CSS效果。
CSS hack大致有3种表现形式,css属性前缀法、选择器前缀法以及IE条件注释法。实际项目中CSS Hack大部分是针对IE浏览器不同版本之间的表现差异而引入的。
二、谈一谈浏览器兼容的思路
-
要不要做
- 产品的角度(产品的受众、受众的浏览器比例、效果优先还是基本功能优先)
- 成本的角度(有无必要做某件事)
-
做到什么程度
- 让哪些浏览器支持哪些效果
-
如何做
- 根据兼容需求选择框架/库(jquery)
- 根据兼容需求选择兼容工具(html5shiv.js、respond.js、css resect、normalize.css、Modemizr)
- postCSS
- 条件注释、CSS Hack、js能力检测做一些修补
-
渐进增强优雅降级
- 渐进增强:针对低版本浏览器进行构建页面,保证最基本的功能,然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验
- 优雅降级:一开始就构建完整功能,然后再针对低版本浏览器进行兼容。
三、列举5种以上浏览器兼容的写法
-
属性前缀法(即类内部Hack):例如IE6能识别下划线“”和,IE7能识别,但不能识别下划线,IE6~IE10都识别“\9”,但firefox前述三个都不认识。
.box{ color:red; _color:blue;/*ie6*/ *color:pink;/*ie67*/ color:yellow\9;/*ie/edge 6-8*/ }
-
IE条件注释法
<!--[if IE 7]> <link rel="stylesheet" href="ie7.css" type="text/css" /> <![endif]->
-
选择器前缀法(即选择器Hack):例如 IE6能识别html .class{},IE7能识别+html .class{}或者*:first-child+html .class{}。
*html *前缀只对IE6生效 *+html *+前缀只对IE7生效 @media screen\9{...}只对IE6/7生效 @media \0screen {body {background: red; }}只对IE8有效 @media \0screen\,screen\9{body { background: blue; }}只对IE6/7/8有效 @media screen\0 {body { background: green; }} 只对IE8/9/10有效 @media screen and (min-width:0\0) {body { background: gray; }} 只对IE9/10有效 @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {body { background: orange; }} 只对IE10有效
-
条件注释和兼容工具结合
<<!--[if lt IE9]> <script src="../js/html5shiv.min.js"></script> <script src="../js/respond.min.js"></script> <![endif]-->
-
使用Modernizr:利用Modernizr的能力检测,对标签不存在的能力特别优化,而不是利用if这种条件注释。
<html class="no-js no-textshadow"> <div class="box">hello</div> .box{ text-shadow:3px 3px 3px; }/*IE67下不支持*/ .no-textshadow .box{ border:1px solid red; }/*IE7下另外设定*/
四、以下工具/名词是做什么的
- 条件注释:条件注释可被用来向IE提供及隐藏代码。(IE 10不在支持条件注释)
- IE Hack:针对不同的浏览器去写不同的CSS,让它能够同时兼容不同的浏览器,能在不同的浏览器中也能得到我们想要的页面效果。
- js 能力检测:检测当前浏览器是否支持某些特定的js样式。
- html5shiv.js:针对不支持HTML5标签的浏览器,创建并模拟HTML5的标签,并使浏览器渲染该标签。
- respond.js:为不支持css3媒体查询的浏览器(IE678)模拟css3的媒体查询。
- css reset:清除浏览器默认样式。
- normalize.css:“css reset的替代品”,?;び杏玫匿榔髂涎?;一般化的样式:为大部分HTML元素提供;修复浏览器自身的bug并保证各浏览器的一致性;用一些小技巧优化css可用性;用注释和详细的文档来解释代码。
- Modernizr:是一个JS类库,用来检测浏览器的CSS3和HTML5能力,从而解决浏览器的兼容问题。
- postCSS:利用JS插件转换CSS。
五、一般在哪个网站查询属性兼容性?
- caniuse.com查css属性兼容
补充两个网站:
- browserhacks查hack的写法
- 浏览器市场份额