CSS hack
由于不同厂商的流览器或某浏览器的不同版本对CSS的支持、解析不一样，导致在不同浏览器的环境中呈现出不一致的页面展现效果。这时，我们为了获得统一的页面效果，就需要针对不同的浏览器或不同版本写特定的CSS样式，我们把这个针对不同的浏览器/不同版本写相应的CSS code的过程，叫做CSS hack。
浏览器兼容的思路
- 要不要做
- 产品的角度（产品受众、受众的浏览器比例，效果优先还是基本功能优先等）
- 成本的角度（有无必要去实现某个需求）
- 做到什么程度
——让浏览器支持哪些效果 - 该怎么做
- 根据兼容需求选择技术框架/库（jQuery）
- 根据兼容需求选择兼容工具（html5shiv.js、respond.js、css reset、normalize.css、Modernizr）
- post CSS（自动根据浏览器加前缀）
- 条件注释、CSS Hack、JS能力检测 做一些修补
渐进增强和优雅降级
- 渐进增强（progressive enhancement）：针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。
- 优雅降级（graceful degradation）：一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。
浏览器兼容的写法
- 合适的框架
| 框架 | 支持版本 |
|---|---|
| Bootstrap | ≥ IE8 |
| jQuery 1._ | ≥IE6 |
| jQuery 2._ | ≥IE9 |
| Vue | ≥IE9 |
- 条件注释
条件注释（conditional comment）是于HTML源码中被IE有条件解释的语句。可被用来向IE提供及隐藏代码。
使用了条件注释的页面在IE9中可正常工作，但在IE10中就不行了。IE10不再支持条件注释。
| 项目 | 支持版本 | 说明 |
|---|---|---|
! |
[if !IE] |
非IE |
lt |
[if lt IE5.5] |
（less than）小于IE5.5 |
lte |
[if lte IE6] |
（less than or equal）小于等于IE6 |
gt |
[if gt IE5] |
（great than）大于IE5 |
gte |
[if gte IE7 |
（great than or equal）大于等于IE7 |
竖线 |
[if (IE6)竖线(IE7)] |
IE6或IE7 |
PS：“非IE”的注释比较特殊一些
<!-- [if !IE]><!-- >_____________<!-- <![end if]-->
-
属性前缀（即内部Hack）
IE6能识别 _ 和 *
IE7能识别 *
IE6~IE10都能认 " \q "
但是以上，FireFox都不认识。 -
选择器前缀
比如IE6能识别html .class{ }，IE7能识别+html .class{ }或者*:first-child+html .class{ }。 -
合适的工具
-
html5shiv.js
-
respond.js
-
css reset
-
normalize.css
-
Modernizr
一些常见的属性和写法
- 常见写法
.box {
color: red;
_color: blue; /* IE6 */
*color: pink; /* IE6、7 */
color: yellow\9; /* IE/Edge 6-8 */
}
<!-- [if IE7] >
<link rel="stylesheet" href="IE7.css" type="text/css" />
<!-- [end if] -->
- 常见属性
| 属性 | 兼容情况 |
|---|---|
| inline-block | ≥IE8 |
| min-width / min-height | ≥IE8 |
| :before / :after | ≥IE8 |
| div:hover | ≥IE7 |
| background-size | ≥IE9 |
| 圆角 | ≥IE9 |
| 阴影 | ≥IE9 |
| 动画 / 渐变 | IE10 |
名词（工具）解释
- 条件注释
这是基于HTML源码中被IE(IE≥9)有条件解释的语句。条件注释可被用来向IE提供及隐藏代码。 - IE Hack
针对IE浏览器编写不同的CSS（属性前缀法、选择器前缀法、IE条件注释法）使得页面效果在不同版本的IE浏览器中达到效果一致。 - js 能力检测
浏览器的能力检测目标不是检测特定的浏览器，而是检测浏览器的能力。这样，只需要检测浏览器是否支持特定的能力，就可以给出特定的解决方案。 - 优先检测达到目的最常用的特性
- 检测实际用到的属性
- html5shiv.js
针对不支持HTML5标签的浏览器，创建并模拟HTML5的标签的效果并使相应的CSS生效。 - respond.js
让 IE6-8 也能实现 CSS3 中的 Media Query（媒体查询）功能，实现响应式设计。 - CSS Reset
- CSS Reset 简单地说就是重置浏览器的 CSS 默认属性。
- 因为浏览器的品种很多，每个浏览器的默认样式也是不同的，比如 标签，在 IE 浏览器、Firefox 浏览器以及 Safari 浏览器中的样式都是不同的，所以，通过重置 button 标签的 CSS 属性，然后再将它统一定义，就可以产生相同的显示效果。
- CSS Reset 内容方法不同，但功能大同小异，都是起到重置的作用，所以说 CSS Reset 是根据个人需求不同可以按需自定义的
- Normalize.css
一个很小的CSS文件，让不同浏览器在渲染浏览器时形式更加统一，但它在默认的HTML元素样式上提供了跨浏览器的高度一致性。是一种CSS reset的替代方案。 - 保护有用的浏览器默认样式：而不是完全去掉它们
- 一般化的样式：为大部分HTML元素提供
- 修复浏览器自身的bug：并保证各浏览器的一致性
- 优化CSS可用性：用一些小技巧
- 解释代码：注释和详细的文档
- Modernizr
Modernizr 使你可以方便地为各种情况编写 JavaScript 和 CSS，无论浏览器是否支持这些特性。这是处理渐进增强的完美方案。
Modernizr 会在页面加载后立即检测特性；然后创建一个包含检测结果的 JavaScript 对象，同时在 html 元素加入方便你调整 CSS 的 class 名。 - PostCSS
PostCSS是一个使用 JavaScript 插件来转换CSS的工具，通过PostCSS这个平台，我们自己也能够开发一些插件，来处理CSS。
网友评论