入门12 浏览器兼容

2017-07-23 本文已影响0人饥人谷_哈噜噜

CSS hack

不同厂商的流览器或某浏览器的不同版本（如IE6-IE11,Firefox/Safari/Opera/Chrome等），对CSS的支持、解析不一样，导致在不同浏览器的环境中呈现出不一致的页面展现效果。为了获得统一的页面效果，需要针对不同的浏览器或不同版本写特定的CSS样式，我们把这个针对不同的浏览器/不同版本写相应的CSS code的过程，叫做CSS hack

浏览器兼容的思路

要不要做

产品的角度（产品的受众、受众的浏览器比例、效果优先还是基本功能优先）
成本的角度 (有无必要做某件事)

做到什么程度

让哪些浏览器支持哪些效果

如何做

根据兼容需求选择技术框架/库(jquery)
根据兼容需求选择兼容工具(html5shiv.js、respond.js、css reset、normalize.css、Modernizr)
postCSS
条件注释、CSS Hack、js 能力检测做一些修补

浏览器兼容的写法（5种以上）

条件注释

项目	说明	范例
!	非	`[if !IE]`，非IE
`｜`	或	`[if (IE 6)｜(IE 7)]`，IE6或者IE7
`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

属性前缀法
IE6能识别 * _
IE7能识别 *
“-″减号是IE6专有的hack
“\9”IE6~IE10都生效
“\0” IE8/IE9/IE10都生效，是IE8/9/10的hack
“\9\0” 只对IE9/IE10生效，是IE9/10的hack
示例：

.box {
   color: red;
   _color: blue;  /*ie6*/
   *color: green; /*ie6 7*/
   color: yellow/9; /*ie6-10*/
}

选择器前缀法
选择器前缀法是针对一些页面表现不一致或者需要特殊对待的浏览器，在CSS选择器前加上一些只有某些特定浏览器才能识别的前缀进行hack。

*html *前缀只对IE6生效 
*+html *+前缀只对IE7生效 
@media screen\9{...}只对IE6/7生效 
@media \0screen {body { background: red; }}只对IE8有效 
@media \0screen\,screen\9{body { background: blue; }}只对IE6/7/8有效 
@media screen\0 {body { background: green; }} 只对IE8/9/10有效 
@media screen and (min-width:0\0) {body { background: gray; }} 只对IE9/10有效 
@media screen and (-ms-high-contrast: active),
 (-ms-high-contrast: none) {body { background: orange; }} 只对IE10有效

条件注释结合类选择器整体优化

<!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]-->

优点：不用在CSS代码的属性前加入令人费解的前缀（*或_）

Modernizr工具
首先下载自定义的脚本,像引用普通js文件一样引用它
<script src="Scripts/Modernizr.js" type="text/javascript"></script>
添加完Modernizr引用以后，它就立即生效了。运行的时候它会在html元素上添加一批CSS的class名称，这些class名称标记当前浏览器支持哪些特性和不支持哪些特性，支持的特性就直接显示该天特性的名称作为一个class（例如:canvas,websockets），不支持的特性显示的class是“no-特性名称”（例如：no-flexbox）。下面这段代码是运行在Chrome下的效果：

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

下面这段代码是运行在IE9下的效果：

<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">

也可结合HTML5/CSS3特性一起使用
可以直接使用Modernizr在<html>元素里生成的class名称，在你的css文件里定义相应的属性以便支持当前浏览器。例如，下面的代码可以属性，在支持shadow阴影的浏览器显示shadow，不支持的浏览器显示标准的边框：

.boxshadow #MyContainer {
    border: none;
    -webkit-box-shadow: #666 1px 1px 1px;
    -moz-box-shadow: #666 1px 1px 1px;
}
.no-boxshadow #MyContainer {
    border: 2px solid black;
}

因为如果浏览器支持box-shadows的话，Modernizr就会将boxshadow class添加到<html>元素，然后你可以将它管理到一个相应的div的id上。如果不支持，Modernizr就会将no-boxshadow class添加到<html>元素，这样显示的就是一个标准的边框。这样我们就可以很方便地在支持CSS3特性的浏览器上使用CSS3新功能，不支持的浏览器上继续使用以前的方式。

各种工具/名词

条件注释
是于HTML源码中被 IE 有条件解释的语句。条件注释可被用来向 IE提供及隐藏代码。条件注释最初于微软的 Internet Explorer 5浏览器中出现，并且直至 Internet Explorer 9 均支持。IE10+不再支持条件注释。
IE Hack
针对不同版本的IE浏览器写的css，从而使各个版本IE能够顺利渲染页面。
js 能力检测
浏览器的能力检测目标不是检测特定的浏览器，而是检测浏览器的能力。这样，只需要检测浏览器是否支持特定的能力，就可以给出特定的解决方案。这一部分检测是解决浏览器兼容问题的主要检测。
html5shiv.js
通过模拟标签解决不支持HTML5新标签，新特性的浏览器的兼容问题。IE9以下的IE版本不支持HTML5
respond.js
用于为 IE6-8 以及其它不支持 CSS3 媒体查询功能的浏览器提供媒体查询的 min-width 和 max-width 特性，实现响应式网页设计
css reset
将所有的浏览器的自带样式重置掉，这样更易于保持各浏览器渲染的一致性参考文章
normalize.css
Normalize.css 是一个可以定制的CSS文件，它让不同的浏览器在渲染网页元素的时候形式更统一，在默认的HTML元素样式上提供了跨浏览器的高度一致性
- Preserves useful defaults, unlike many CSS resets.
  保护有用的浏览器默认样式而不是完全去掉它们
- Normalizes styles for a wide range of elements
  一般化的样式：为大部分HTML元素提供
- Corrects bugs and common browser inconsistencies
  修复浏览器自身的bug并保证各浏览器的一致性
- Improves usability with subtle improvements
  优化CSS可用性：用一些小技巧
- Explains what code does using detailed comments
  解释代码：用注释和详细的文档来
Modernizr
odernizr 是一个 JavaScript 库，用于检测用户浏览器的 HTML5 与 CSS3 特性。Modernizr 使你可以方便地为各种情况编写 JavaScript 和 CSS，无论浏览器是否支持这些特性。这是处理渐进增强的完美方案。
工作原理：
Modernizr 会在页面加载后立即检测特性；然后创建一个包含检测结果的 JavaScript 对象，同时在 html 元素加入方便你调整 CSS 的 class 名。
postCSS
是一个JS插件转换样式表的工具。这些插件能够检验你的CSS、支持变量和混合，转化css3的新特性语法、行内图片等。

查询属性兼容性的网站？

https://caniuse.com/

常用网站