浏览器兼容
2017-03-04 本文已影响0人
mianmiani
什么是 CSS hack
由于不同厂商的浏览器，比如Internet Explorer,Safari,Mozilla Firefox,Chrome等，或者是同一厂商的浏览器的不同版本，如IE6和IE7，对CSS的解析认识不完全一样，因此会导致生成的页面效果不一样，得不到我们所需要的页面效果。CSS hack 就是这种情况下我们针对不同的浏览器去写不同的CSS的一个过程，让它能够同时兼容不同的浏览器，能在不同的浏览器中也能得到我们想要的页面效果。
CSS hack的方法有：
- CSS属性前缀法
- 选择器前缀法
- IE条件注释法
谈一谈浏览器兼容的思路
- 产品角度考虑：考虑产品的受众、受众使用的浏览器比例、页面效果优先还是基本功能优先。
- 成本角度：是否有必要为了追求网页效果而花费资源；还是保持页面基本功能、节约成本。
- 项目、产品需求角度：需要兼容哪些浏览器；或是兼容到哪些浏览器的哪部分版本；需要让浏览器实现哪些功能。
- 从产品的市场定位或功能定位角度出发：是选择渐进增强：先保证基本功能，再根据需求及资源完善页面效果；还是选择优雅降级：先构建网页的整体功能效果，再往下满足低版本浏览器的兼容性。
- 根据兼容性需求选择合适的框架：
合适的框架：
Bootstrap：>=IE8
jQuery1.~ ：>=IE6,jQuery 2.~ >=IE9
vue >=ie9 - 根据需求选择合理的兼容性开发工具：html5shiv.js、respond.js、css reset、normalize.css、Modernizr、postCSS
列举5种以上浏览器兼容的写法
- IE条件注释法
！ [if !IE] 非IE
lt [if lt IE 5.5] 小于IE 5.5
lte [if lte IE 6] 小于等于IE6
gt [if gt IE 5] 大于 IE5
gte [if gte IE 7] 大于等于IE7
| [if (IE 6)|(IE 7)] IE6或者IE7
- 选择器前置法
_body{}
*body{} /*IE6能识别下划线和*号其他浏览器都不能，IE7能识别下划线。
body/9{} /*IE6-IE10都能识别/9，而firefox对这几个标号都不能识别。
- CSS属性前缀法
.box{
color: red;
_color: blue; /*ie6能识别*/
*color: pink; /*ie67都能识别*/
color: yellow\9; /*ie/edge 6-8都能识别*/
}
.clearfix{
content:'';
display:block;
clear:both;
}
.clearbox{
*zoom:1; /*仅对IE6 7 有效，出发了haslayout*/
- Modernizr工具
运行的时候它会在html元素上添加一批CSS的class名称，这些class名称标记当前浏览器支持哪些特性和不支持哪些特性，支持的特性就直接显示该天特性的名称作为一个class（例:canvas,websockets），不支持的特性显示的class是“no-特性名称”。 - 条件注释与类选择器结合
<!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]-->
以下工具/名词是做什么的
- 条件注释
条件注释用于HTML源码中被IE有条件解释的语句。条件注释可被用来向IE提供及隐藏代码。使用了条件注释的页面在IE9中可正常工作，但在IE10中无法正常工作。 IE10不再支持条件注释。 - IE Hack
IE Hack针对IE浏览器的不同版本去写不同的CSS，让它能在这些浏览器中得到我们想要的页面效果。常用方法：CSS属性前缀法、选择器前缀法以及IE条件注释法。 - js 能力检测
js 能力检测使用js检测浏览器支持的属性，以便展示效果。目标不是识别特定的浏览器，而是识别浏览器的能力。 - html5shiv.js
html5shiv.js通过使用html5shiv.js让IE9以下版本浏览器支持所有的HTML5标签。 - respond.js
respond.jsrespond.js让不支持css3 Media Query的浏览器包括IE6-IE8支持查询。 - css reset
css resetcss reset(css重置、清除css样式)重置样式，清除浏览器默认样式。 - normalize.css
normalize.cssnormalize.css 是一个可以定制的CSS文件，它让不同的浏览器在渲染网页元素的时候形式更统一。 - Modernizr
ModernizrModernizr是一个开源的JS库，它使得那些基于访客浏览器的不同（指对新标准支持性的差异）而开发不同级别体验的设计师的工作变得更为简单。它使得设计师可以在支持HTML5和CSS3的浏览器中充分利用HTML5和CSS3的特性进行开发，同时又不会牺牲其他不支持这些新技术的浏览器的控制。 - postCSS
PostCSS可以直观的理解为：它就是一个平台；PostCSS提供了一个解析器，它能够将CSS解析成抽象语法树（AST）；通过在PostCSS这个平台上，能够开发一些插件，来处理CSS，比如热门的：autoprefixer；能够使用JavaScript来开发插件。
