1.什么是 CSS hack
不同厂商的浏览器,例如Internet explorer、Safari、Mozilla Firefox、Chrome等,或者同一厂商的浏览器的不同版本,如IE6和7,对css的解析和认识会完全不一样,因此会导致生成和预想相差很大的页面效果,此时我们需针对不同的浏览器写不同的css,让它在不同的浏览器中展现预想的效果
css hack大致有三种表现形式:
名称 | 别称 | 举例 |
---|---|---|
属性前缀法 | 内部hack | ie6能识别下划线和星号,ie7可以识别星号但不能识别下划线,ie6~ie10都识别“\9”,firefox前述三个都不识别 |
选择器前缀法 | 选择器hack | |
ie条件注释法 | html条件注释hack | 针对所有ie:<!--[if IE]>IE浏览器显示的内容<![endif]--> 。针对ie6及以下的版本:<!--[if lt IE6>只在IE6-显示的内容<![endit]--> 。这类hack不仅对 css生效,对写在判断语句里面的所有代码都会生效 |
2.谈一谈浏览器兼容的思路
- 如何做
产品角度:受众群,受众群浏览器比例,优先效果还是优先基本功能
让哪些浏览器支持哪些效果
渐进增强(progressive enhancement):针对低版本浏览器进行构建页面,保证最基本的功能,然后在针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验
优雅降级(graceful degradation):一开始就构建完整的功能,然后在针对低版本浏览器进行兼容 - 解决方案
根据兼容需要选择技术框架、库
根据需要选择兼容工具(html5shiv.js respond.js、css reset、 normalize.css、modernizr)
条件注释、css hack、js能力检查做修补
3.列举5种以上浏览器兼容的写法
- 例1
<!--[if IE 6]> (在ie6里的被识别的标签)
<p>You are using Internet Explorer 6.</p>
<![endif]-->
<!--[if !IE]><!-->
<script>alert(1);</script> (在chrome里被识别的只有这一句)
<!--<![endif]-->
<!--[if IE 8]>(在ie8里的被识别的标签)
<link href="ie8only.css" rel="stylesheet">
<![endif]-->
- 例2
.box{
color: red;
_color: blue; /*ie6*/
*color: pink; /*ie67*/
color: yellow\9; /*ie/edge 6-8*/
}
- 例3
.clearfix:after{
content: '';
display: block;
clear: both;
}
.clearfix{
*zoom: 1; /* 仅对ie67有效 */
}
- 例4
.target{
display: inline-block;
*display: inline;/* 仅对ie67有效 */
*zoom: 1;/* 仅对ie67有效 */
}
- 例5
<!--[if lt IE 9]>/* 仅对ie9以下有效 */
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
4.以下工具/名词是做什么的
条件注释:conditional comment,是用于html源码中被ie有条件解释的语句,条件注释可被用来像ie提供及隐藏代码,ie10以上不再支持条件注释
IE Hack:使用特殊的符号或者方式写出只有IE浏览器可以解析的代码,有CSS属性前缀法、选择器前缀法以及IE条件注释法
js 能力检测:使用JS的语法检测浏览器支持的属性,以便展示效果
html5shiv.js:用于解决IE9以下版本浏览器对HTML5新增标签不识别,并导致CSS不起作用的问题。
respond.js:响应式媒体查询,可以在ie6、ie7上模拟出自己无法识css的属性,可以模拟css3的媒体查询
css reset:去除浏览器的默认样式
normalize.css:是一个很小的CSS文件,但它在默认的HTML元素样式上提供了跨浏览器的高度一致性。相比于传统的CSS reset,normalize.css是一种现代的、为HTML5准备的优质替代方案。normalize.css保护浏览器有用的默认样式,而不是完全去掉他们,为大部分html元素提供一般化的样式,修复浏览器自身的bug并保证浏览器的一致性
Modernizr:处理兼容问题,Modernizr是一个 JavaScript 库,用于检测用户浏览器的 HTML5 与 CSS3 特性。
postCSS:用标准写法写css最后添加一个命令自动添加可以被老版本的浏览器接受的写法
5.一般在哪个网站查询属性兼容性?
canius.com查询css属性兼容
browserhacks查hack写法