什么是CSS hack
所谓css hack是指在css样式中加上一些特殊的符号，让不同的浏览器能够识别不同的特殊符号，用来达到应用不同CSS样式的目的。简单来说，就是不同浏览器在解读CSS时候，进行对网页内容显示差别的处理，由于各个浏览器的内核不相同，因此造成误差难以避免。
浏览器兼容的思路
对于浏览器兼容的思路，首先考虑的是，要不要做？从两个方面进行考虑，一个是产品的角度进行考虑，对于一个产品，要考虑其受众，受众的浏览器比例，是功能优先还是效果优先；
其次考虑的是要做到什么程度，让哪些浏览器支持，要实现什么效果。
再者考虑的是如何做？从中要根据技术的需求选择技术框架/库(jquery)，其中框架如下
Bootstrap (>=ie8)
jQuery 1.~ (>=ie6), jQuery 2.~ (>=ie9)
Vue (>= ie9)
根据兼容需求选择兼容工具。然后对条件注释，css hack，js的能力检测做一些修补。
对于浏览器兼容还包括平稳退化和渐进增强。
平稳退化是指一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。
渐进增强是指针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。
列举五种以上浏览器兼容的写法
- 条件注释
<!--[if IE 7]><link rel="stylesheet" href="ie7.css" type="text/css"/><![endif]-->
- css hack 方法，这个方法又具体细分为3个方法 分别为
属性前缀法：ie6能识别下划线"_"和" "，ie7能识别" "，但是不能识别下划线。IE6~IE10都认识"\9"，但firefox前述三个都不能识别。
常见的属性兼容情况：
inline-blcok:>=ie8
min-width：>=ie8
:before:after:>=ie8
div:hover>=ie8,
background-size: >=ie9
圆角：>=ie9
阴影：>=ie9
动画渐变：>=ie10
选择器前缀法
IE条件注释法结合选择器整体优化
- 利用兼容开发工具，例如Modernizr：运行的时候它会在html元素上添加一批css的class名称，这些class名称标记当前浏览器支持哪些特性和不支持哪些特性，支持的特性就直接显示该特性的名称作为一个class，不支持的特性的class是no-特性名称。我们就可以直接使用modenizr在元素里生成的class的名称，在css文件里定义相应的属性以便支持当前的浏览器。
以下名词意义以及作用
- 条件注释：条件注释是一种安全区分IE浏览器版本的语法，且被认为是取代 IE css hack，条件注释 (conditional comment) 是于HTML源码中被IE有条件解释的语句。条件注释可被用来向IE提供及隐藏代码。
- IE hack: 针对IE浏览器编写不同的CSS的让IE能够正常渲染的过程。
- js 检测能力：浏览器的能力检测目标不是检测特定的浏览器，而是检测浏览器的能力。这样，只需要检测浏览器是否支持特定的能力，就可以给出特定的解决方案。这一部分检测是解决浏览器兼容问题的主要检测。
- html5shiv.js：用于解决IE9以下版本浏览器对HTML5新增标签不识别，并导致CSS不起作用的问题。
- respond.js：在做响应式网页的时候一些浏览器器不支持媒体查询等css3新特性，使用respond.js来兼容。
- css reset：重置浏览器的默认样式，也就是重新定义标签的样式。
- normalize css：不像css reset一样重置所有样式，而是保留有用的样式。而且标准化的样式适用于更广的元素。
- Modernizr：Modernizr帮助我们检测浏览器是否实现了某个feature，如果实现了那么开发人员就可以充分利用这个feature做一些工作，反之没有实现开发人员也好提供一个fallback。所以，我们要明白的是Modernizr只是帮我们检测feature是否被支持，它并不能够给浏览器添加那些本来不支持的feature。
- postCSS：它可以被理解为一个平台，可以让一些插件在上面跑，它提供了一个解析器，可以将CSS解析成抽象语法树，通过PostCSS这个平台，我们能够开发一些插件，来处理CSS。热门插件如autoprefixer，它可以帮我们处理兼容问题，只需正常写CSS，autoprefixer可以帮我的自动生成兼容性代码
网友评论