1. CSS hack
1. 什么是css hack？
针对 不同浏览器/不同版本写相应的CSS code的过程，叫做css hack
出现问题： 由于不同厂商的浏览器 或 某浏览器的不同版本，对CSS的支持， 解析不一样，导致在不同浏览器的环境中呈现出不一致的页面展现效果。
解决方案： 为了获得统一的页面效果，就需要针对不同的浏览器或不同版本写特定的CSS样式 我们针对不同浏览器、不同版本写相应的CSS code
2. CSS hack分类
CSS Hack 大致有三种表现形式
- css属性前缀法（即内部Hack）
- 选择器前缀法
- IE条件注释法
1.属性前缀法（即类内部Hack）
例如 IE6 能识别下划线_和星号，IE7 能识别星号，但不能识别下划线_, IE6~IE10都认识\9,但firefox前面描述的都不认识
选择器前缀法（即选择器HACK）
例如IE6能识别html .class{},IE7能识别 +html .class{} 获取* ：first-child+html .class{}.
IE条件注释法（即HTML条件注释Hack）
针对所有IE（注： ie10+已经不再支持条建注释）：， 针对ie6 及以下版本。 这类Hack不仅对css生效， 对写在判断语句里面的所有代码都会生效
CSS hack 常用的方式有三种，CSS 内部hack、选择器hack、HTML 头部引用，其中 CSS 内部hack 最常用。而CSS hack书写顺序，一般是将适用范围广、被识别能力强的CSS定义在前面比如，firefox写在IE7前面，而IE7写在IE6前面以此类推
2.谈一谈 浏览器兼容的思路
- 首先考虑要不要做浏览器兼容。
- 从产品角度出发，产品面向的客户、客户使用浏览器的比例(参照浏览器市场份额统计——百度统计)，产品需要着重效果还是保障基本功能优先。
- 比如客户群体主要是年轻人，则主要考虑手机端以及chrome等，页面是不是需要更人性化一些，
- 如果是面向政府、银行等传统企业，则考虑他们使用的大多是xp系统，则应该兼容IE低版本，并且页面应该以基本功能、稳定性、安全性优先等。
- 从产品成本出发考虑，如果客户使用IE低版本的比例不大，那还需要费时费力的去做低版本兼容吗？
- 需要做到什么程度
- 如果需要兼容浏览器，那么需要兼容的浏览器作出什么样的效果。
- 比如在chrome文本有阴影效果，那我的文本在IE6/7上的效果还需要阴影吗，
- 比如采用下划线的显示效果。
- 如果实现这种效果特别复杂，在不影响基本功能的情况下，是不是可以省略这些效果。
- 如何去兼容
- 根据兼容的需求选择框架或者库
(1)Bootstrap (>=ie8)
(2)jQuery 1.~ (>=ie6), jQuery 2.~ (>=ie9)
(3)Vue (>= ie9)
- 根据兼容需求选择兼容工具(html5shiv.js、respond.js、css reset、normalize.css、Modernizr、postCSS)
- 条件注释、CSS hack、js能力检测做一些修补
- 渐进增强(progressive enhancement): 针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。
- 优雅降级 (graceful degradation): 一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。
3. 列举5种以上浏览器兼容的写法
- 条件注释
条件注释（condition comment）是于HTML源码中被IE有条件解释的语句。条件注释可被用来向IE提供及隐藏代码。使用了条件注释的页面在 windows Internet Explorer9 中可以正常工作，IE10 中无法运行
<!--[if IE 6]>
<p>You are using Internet Explorer 6.</p>
<![endif]-->
<!--[if !IE]><!-->
<script>alert(1);</script>
<!--<![endif]-->
<!--[if IE 8]>
<link href="ie8only.css" rel="stylesheet">
<![endif]-->
- 选择器前缀
content: '';
display: block;
clear: both;
}
.clearfix{
*zoom: 1; /* 仅对ie67有效 */
}
兼容IE67的清除浮动
- 条件注释设置样式
<!–-[if IE 7]>
<link rel="stylesheet" href="ie7.css" type="text/css" />
<![endif]–->
- 条件注释引用JS
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>——支持HTML5的标签
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>——支持媒体查询
<![endif]-->
- 条件注释增加css样式处理兼容
<!DOCTYPE html>
<!--[if IEMobile 7 ]> <html dir="ltr" lang="en-US"class="no-js iem7"> <![endif]-->
<!--[if lt IE 7 ]> <html dir="ltr" lang="en-US" class="no-js ie6 oldie"> <![endif]-->
<!--[if IE 7 ]> <html dir="ltr" lang="en-US" class="no-js ie7 oldie"> <![endif]-->
<!--[if IE 8 ]> <html dir="ltr" lang="en-US" class="no-js ie8 oldie"> <![endif]-->
<!--[if (gte IE 9)|(gt IEMobile 7)|!(IEMobile)|!(IE)]><!--><html dir="ltr" lang="en-US" class="no-js"><!--<![endif]-->
4. 以下工具/名词是做什么的
条件注释条件注释 (conditional comment) 是HTML源码中被IE有条件解释的语句。条件注释可被用来向IE提供及隐藏代码。只有IE6，7，8，9才识别，其他浏览器就认为是个注释。
IE Hack使用CSS Hack解决IE浏览器不同版本之间CSS样式的兼容问题，CSS Hack大部分是针对IE浏览器不同版本之间的表现差异而引入的。
js 能力检测看浏览器是否支持当前对象的属性或是方法，先通过获得页面文本内容的方式来了解兼容性，并封装函数或对象以解决此类问题。
html5shiv.js通过引用js，来模拟HTML5标签，使浏览器支持HTML5的标签
respond.js通过引用js，来使不支持的CSS3的媒体查询的浏览器也能使用该功能；
css reset用于将浏览器默认样式重置的css代码
normalize.css解决不同浏览器默认样式兼容性的css代码，相比粗暴的css reset，有以下几点：
- 保护有用的浏览器默认样式而不是完全去掉它们
- 为大部分元素提供一般化的样式
- 修复浏览器自身的bug并保证各浏览器的一致性
- 优化CSS可用性：用一些小技巧
- 解释代码：用注释和详细的文档
Modernizr检测浏览器HTML5和CSS的特性可用性的JS库，根据支持或者不支持，在htmL标签上增加相应的class，然后在css中对各class进行样式设置
postCSS移植CSS样式的工具，通过使用该工具，可以将标准的CSS样式写法，通过自动添加前缀等，转换成浏览器支持的写法
5.一般在哪个网站查询属性兼容性
caniuse.com可以用来查询不同厂家、不同版本的浏览器对css样式的支持情况
browserhacks.com因为Hugo Giraudel和Tim Pietrusky将各浏览器下的hack写整理放在了Browserhacks.com之上
网友评论