1. 什么是 CSS hack?
由于不同厂商的浏览器,比如Internet Explorer,Safari,Mozilla Firefox,Chrome等,或者是同一厂商的浏览器的不同版本,如IE6和IE7,对CSS的解析认识不完全一样,因此会导致生成的页面效果不一样,得不到我们所需要的页面效果。CSS hack 就是这种情况下我们针对不同的浏览器去写不同的CSS的一个过程,让它能够同时兼容不同的浏览器,能在不同的浏览器中也能得到我们想要的页面效果。
CSS Hack大致有3种表现形式
- CSS属性前缀法
_color:red; /*ie6*/
*color:blue; /*ie6,ie7*/
color:yellow\9; /*ie6-ie8*/
- 选择器前缀法
- IE条件注释法(即HTML头部引用if IE)Hack,实际项目中CSS Hack大部分是针对IE浏览器不同版本之间的表现差异而引入的。
注:IE条件注释法(即HTML条件注释Hack):针对所有IE(注:IE10+已经不再支持条件注释): ,针对IE6及以下版本: 。这类Hack不仅对CSS生效,对写在判断语句里面的所有代码都会生效。
<!–-[if IE 7]>
<link rel="stylesheet" href="ie7.css" type="text/css" />
<![endif]–-> /*只在IE7浏览器下显示*/
<!–-[if lt IE 6]>
<link rel="stylesheet" href="ie5.css" type="text/css" />
<![endif]–-> /*小于IE6浏览器下显示*/
2. 谈一谈浏览器兼容的思路
- 要不要做?
首先要根据你的产品的受众,还有成本和收益考虑,是否有必要做浏览器兼容。然后要考虑是否有其他方案可以代替浏览器兼容,用其他的方法来模拟同样的效果。 - 做到什么程度?
做到兼容到哪一个程度,Internet Explorer,Safari,Mozilla Firefox,Chrome中兼容哪几个,IE浏览器支持哪几个版本。 - 怎么做?
根据兼容需求选择技术库和框架比如
bootstrap(>=ie8)
jquery 1.~(>=ie6),jquery 2.~(>=ie9)
vue(>=ie9)
根据兼容需求选择兼容工具包括:比如html5shiv.js、respond.js、等。
条件注释、CSS Hack、js 能力检测做一些修补。
3. 列举5种以上浏览器兼容的写法
(1) 条件注释:
<!–-[if IE 7]>
<link rel="stylesheet" href="ie7.css" type="text/css" />
<![endif]–-> /*只在IE7浏览器下显示*/
(2) 属性前缀法:
.box{
color: red;
_color: blue; /ie6/
color: pink; /ie6,7/
color: yellow\9; /ie/edge 6-10/
}
(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有效
@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有效
(4) 条件注释和兼容工具相结合
<!–-[if IE 7]>
<script src="../js/html5shiv.js"></script>
<![endif]–->
4. 以下工具/名词是做什么的
名词 | 含义 |
---|---|
条件注释 | 基于HTML源码中被IE(IE<=9)有条件解释的语句。条件注释可被用来向IE提供及隐藏代码。 |
IE Hack | 针对IE浏览器编写不同的CSS(属性前缀法、选择器前缀法、IE条件注释法)使得页面效果在不同版本的IE浏览器中达到效果一致。 |
js 能力检测 | 使用JS来检测浏览器拥有的能力而不是来区分是什么浏览器。这样如果浏览器拥有某种能力则提供一种方案,没有某种能力则提供另一种方案。 |
html5shiv.js | 针对不支持HTML5标签的浏览器,创建并模拟HTML5的标签的效果并使相应的CSS生效。 |
respond.js | 为不支持CSS3媒体查询的浏览器(IE6-8)模拟CSS3的媒体查询。 |
css reset | 清除浏览器默认的元素样式。 |
normalize.css | 保护有用的浏览器默认样式;一般化的样式,修复浏览器自身的bug并保证各浏览器的一致性;优化CSS可用性。 |
Modernizr | 是一个JS类库,用来检测浏览器的CSS3和HTML5能力,从而解决浏览器的兼容问题。 |
postCSS | 利用JS插件转换CSS。可以将CSS解析成抽象语法树。 |
5. 一般在哪个网站查询属性兼容性?
(mission12)