浏览器兼容

2017-06-07 本文已影响0人 leocz

1.css hack

由于不同厂商的浏览器，比如Internet Explorer,Safari,Mozilla Firefox,Chrome等，或者是同一厂商的浏览器的不同版本，如IE6和IE7，对CSS的解析认识不完全一样，因此会导致生成的页面效果不一样，得不到我们所需要的页面效果。这个时候我们就需要针对不同的浏览器去写不同的CSS，让它能在不同的浏览器中也能得到我们想要的页面效果。

css hack的三种写法

属性前缀法(即类内部Hack)：例如 IE6能识别下划线和星号，IE7能识别星号，但不能识别下划线，IE6~IE10都认识"\9"，但firefox前述三个都不能认识

.box{
  color:red;
  _color: red; /*ie6*/
  *color:red;  /*ie6,7*/
  color:red\9;  /*ie/edge 6-8*/
}

选择器前缀法(即选择器Hack)
E条件注释法(即HTML条件注释Hack)：针对所有IE(注：IE10+已经不再支持条件注释)：，针对IE6及以下版本：。这类Hack不仅对CSS生效，对写在判断语句里面的所有代码都会生效

<!--[if IE 7]>
<link rel="stylesheet" href="ie7.css" type="text/css" > 
<![endif]-->

2.浏览器的兼容思路

首先考虑这个问题要不要处理
1. 产品的角度。要考虑产品的受众是哪些人和市场，这些受众多使用的浏览器是哪种，比例如何，是效果优先还是功能优先。

成本的角度。要从成本的角度考虑是都必要做兼容。

其次考虑要做到什么程度的兼容

就是考虑让那些浏览器做到支持哪些效果。
最后考虑该怎么去做
1. 根据兼容需求选择技术框架/库（jquery等）
2. 根据兼容需求选择兼容工具(html5shiv.js、respond.js、css reset、normalize.css、Modernizr)
3. postCSS:目标是通过自定义插件和工具这样的生态系统来改造CSS。与Sass和Less这些预编译器相同的原则，PostCSS把扩展的语法和特性转换成现代的浏览器友好的CSS
4. 条件注释、CSS Hack、js 能力检测做一些修补

3. 常见浏览器兼容写法

条件注释

<!--[if IE 7]>
<link rel="stylesheet" href="ie7.css" type="text/css" > 
<![endif]-->
记住单词名字就懂什么意思了
<!--[if lt IE 7]> lt：less than  小于
<!--[if gt IE 7]> gt：greater than  大于
<!--[if gte IE 7]>   <!--[if lte IE 7]>   e：equal  等于  就是大于等于   小于等于

css前缀

.box{
  color:red;
  _color: red; /*ie6*/
  *color:red;  /*ie6,7*/
  color:red\9;  /*ie/edge 6-8*/
}
div{
transform:rotate(7deg);
-ms-transform:rotate(7deg);     /* IE 9 */
-moz-transform:rotate(7deg);    /* Firefox */
-webkit-transform:rotate(7deg); /* Safari 和 Chrome */
-o-transform:rotate(7deg);  /* Opera */
}

选择器前缀

@media screen and (-webkit-min-device-pixel-ratio:0){ /*为chrome单独设置样式的类实现案例*/
.closeImg{
right:300px;height:100px;  
width:200px;  
background-color:Olive;  
} 
}

Modernizr工具

<html class=" js no-flexbox canvas canvastext no-webgl no-touch geolocation 
         postmessage no-websqldatabase no-indexeddb hashchange no-history 
   draganddrop no-websockets rgba hsla multiplebgs backgroundsize 
   no-borderimage borderradius boxshadow no-textshadow opacity 
   no-cssanimations no-csscolumns no-cssgradients no-cssreflections
   csstransforms no-csstransforms3d no-csstransitions fontface 
   generatedcontent video audio localstorage sessionstorage 
   no-webworkers no-applicationcache svg inlinesvg smil svgclippaths">

条件注释结合选择器

<!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提供及隐藏代码。
ie hack。针对IE浏览器编写不同的CSS的让IE能够正常渲染的过程。
js 能力检测。能力检测的目标不是识别特定的浏览器，而是识别浏览器的能力。采用这种方式不必顾及特定的浏览器如何如何，只要确定浏览器支持特定的能力，就可以给出解决方案。
html5shiv.js。用于解决IE9以下版本浏览器对HTML5新增标签不识别，并导致CSS不起作用的问题。
respond.js。让IE6-8支持CSS3 Media Query。
css reset。是将所有的浏览器的自带样式重置掉，这样更易于保持各浏览器渲染的一致性。
normalize.css。保护有用的浏览器默认样式而不是完全去掉它们。为大部分HTML元素提供标准化样式。修复浏览器自身的bug并保证各浏览器的一致性。用一些小技巧优化CSS可用性。用注释和详细的文档来来解释代码。
Modernizr。帮助探测浏览器是否支持某种新特性，甚至可以加载额外的script脚本。使你可以方便地为各种情况编写 JavaScript 和 CSS，无论浏览器是否支持这些特性。这是处理渐进增强的完美方案。Modernizr 会在页面加载后立即检测特性；然后创建一个包含检测结果的 JavaScript 对象，同时在 html 元素加入方便你调整 CSS 的 class 名。
postCSS。它可以被理解为一个平台，可以让一些插件在上面跑，它提供了一个解析器，可以将CSS解析成抽象语法树，通过PostCSS这个平台，我们能够开发一些插件，来处理CSS。热门插件如autoprefixer，它可以帮我们处理兼容问题，只需正常写CSS，autoprefixer可以帮我的自动生成兼容性代码.

5.查询属性兼容性的网站

caniuse网站 https://caniuse.com/