1.什么是css hack
由于不同浏览器或者相同浏览器不同版本对css的解析不完全一样,因此导致页面效果不一样,这时我们需要针对不同浏览器去写不同的css,让它能在不同浏览器得到我们需要的效果,这就是css hack。
2.谈一谈浏览器兼容的思路
1.考虑要不要做
- 从产品的角度(产品的受众、受众的浏览器比例、针对受众是效果优先还是基本功能优先)
- 成本的角度(有没有必要去兼容)
2.做到什么程度
要做兼容的话要达到什么程度,让哪些浏览器兼容,IE浏览器做到哪个版本。
3.如何做
- 根据兼容需求选择技术框架/库;
- 根据需求选择兼容工具(html5shiv.js、respond.js、css reset、 normaliz.css、modernizr)
- postCss
- 条件注释、CSS hack、js能力检测。
3.列举5种以上浏览器兼容的写法
1.条件注释
是html源码中被IE有条件解释的语句;可用来向IE提供和隐藏代码。
<!--[if IE 6]>
<p>You are using Internet Explorer 6.</p>
<![endif]--> /* IE6中执行 */
<!--[if !IE]><!-->
<script>alert(1);</script>
<!--<![endif]--> /* 非IE执行 */
<!--[if IE 8]>
<link href="ie8only.css" rel="stylesheet">
<![endif]--> /* IE8中执行 */
只在IE下生效
<!--[if IE]>
这段文字只在IE浏览器显示
<![endif]-->
只在IE6下生效
<!--[if IE 6]>
这段文字只在IE6浏览器显示
<![endif]-->
只在IE6以上版本生效
<!--[if gte IE 6]>
这段文字只在IE6以上(包括)版本IE浏览器显示
<![endif]-->
只在IE8上不生效
<!--[if ! IE 8]>
这段文字在非IE8浏览器显示
<![endif]-->
非IE浏览器生效
<!--[if !IE]>
这段文字只在非IE浏览器显示
<![endif]-->
条件注释结合js
<!--[if lt IE 9]>
<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]-->
Paste_Image.png
2.属性前缀法
IE6能识别下划线""和星号" * ",IE7能识别星号" * ",但不能识别下划线"",IE6~IE10都认识"\9",但firefox前述三个都不能认识
.box{
color: red;
_color: blue; /*ie6*/
*color: pink; /*ie67*/
color: yellow\9; /*ie/edge 6-8*/
}
2.1 浏览器私有前缀添加
-webkit-border-radius: 50%;//chrome
-o-border-radius: 50%;//opera
-moz-border-radius: 50%;//FixFore
-ms-border-radius: 50%;//IE edge
3.选择器前缀法
*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有效
4.使用兼容工具
html5shiv.js:在IE6~8上模拟html5标签
respond.js:在IE6~8上模拟CSS3 Media Queries
css reset normalize.css样式重置
modernizr库
4.以下工具/名词是做什么的
- 条件注释
是于HTML源码中被 IE 有条件解释的语句。条件注释可被用来向 IE提供及隐藏代码。利用IE6-9的漏洞来区分IE各版本。 - IE Hack
IE浏览器不同版本对css的解析不完全一样,因此导致页面效果不一样,这时我们需要针对浏览器去写不同的css,让它能在浏览器得到我们需要的效果,这就是css hack。 - js 能力检测
检测浏览器的类型及版本,是否支持特定的能力,然后根据检测的结果让页面兼容浏览器。检测浏览器支持的属性和方法。 - html5shiv.js
兼容性工具,模拟html5标签,用于解决IE9以下版本浏览器对HTML5新增标签不识别,并导致CSS不起作用的问题。 - respond.js
兼容性工具,为IE6-8和其他不支持css3媒体查询功能的浏览器提供媒体查询的min-width和max-width特性,实现响应式网页设计。 - css reset
兼容性工具,将浏览器的默认样式全部去掉,重新定义标签样式。 - normalize.css
重置样式,与css reset相比相对平和,会保留有用的样式,更好的通用性和可维护性。 - Modernizr
一个用来检测浏览器功能支持情况的 JavaScript 库,会为html标签生成一批css的class名,来标记当前浏览器支持不支持的特性,这样就可以方便为浏览器添加兼容样式。 - postCSS
它是一个平台,可以让一些插件在上面跑来处理css,通过插件可以帮css处理成兼容性代码。
5.一般在哪个网站查询属性兼容性?
http://caniuse.com
<a href="http://browserhacks.com">查询hack写法</a>
网友评论