浏览器兼容

1、什么是 CSS hack

由于不同的浏览器或同一浏览器的不同版本(IE6-IE11，Firefox，safari，chrome，Opera等)对CSS支持和展现的效果不一样，
会在不同浏览器环境中展现不一致的页面样式和功能。
为了获得统一的页面效果，就需要针对不同的浏览器环境写特定的CSS样式，这个针对不同的浏览器环境写不同的CSS code的过程称为CSS hack。
2、谈一谈浏览器兼容的思路?
1、要不要做
首先看看有没有必要实现浏览器兼容的，产品的受众、受众的浏览器比例、效果优先还是基本功能优先
2、做到什么程度
让哪些浏览器支持哪些效果
3、怎么做
根据兼容需求选择技术库和框架比如
bootstrap（>=ie8）
jquery 1.~(>=ie6),jquery 2.~(>=ie9)
vue(>=ie9)
根据不同的兼容需求选择框架，如jquery等。还有各种兼容性工具，html5shiv.js,respond.js,css reset,normalize.css,modernizr.针对IE的条件注释，css Hack，js能力检测
根据兼容需求选择兼容工具包括：比如html5shiv.js、respond.js、等。
3,列举5种以上浏览器兼容的写法
IE 条件注释










用于非 IE

属性前缀法(即类内部Hack)
“_″IE6 生效
"*" IE6 7生效
“\9″ IE6/IE7/IE8/IE9/IE10都生效
“\0″ IE8/IE9/IE10都生效
“\9\0″ 只对IE9/IE10生效
Trident内核：主要代表为IE浏览器,前缀为-ms
Gecko内核：主要代表为Firefox,前缀为-moz
Presto内核：主要代表为Opera,前缀为-o
Webkit内核：产要代表为Chrome和Safari,前缀为-webkit

.box {
  color: red;   /* 所有浏览器都生效 */
  _color: blue; /* 只有 IE 6 生效 */
  *color: pink; /* 只有 IE 6 IE 7 生效 */
  color: yellow\9; /* IE 6~8 都生效 */
}
.box {
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    -o-border-radius: 5px;
    border-radius: 5px;
}

选择器前缀法
针对一些页面表现不一致或者需要特殊对待的浏览器，在CSS选择器前加上一些只有某些特定浏览器才能识别的前缀进行hack（针对浏览器之间的表现差异而引入的，利用浏览器的bug来进行针对性处理）
例如：
*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有效


.clearfix {
  /* 在非ie 7 浏览器中，clearfix展现该属性 */
}
.ie7 .clearfix {
   /* 只有ie7浏览器中，clearfix才会展现该属性 */
}

兼容工具
html5shiv.js：用于解决IE9以下版本浏览器对HTML5新增标签不识别,并导致CSS不起作用的问题
modernizr.js：特性检测器，有就使用原生，没有就加载polyfill
respond.js：用于为 IE6-8 以及其它不支持 CSS3 Media Queries 的浏览器提供媒体查询的 min-width 和 max-width 特性，实现响应式网页设计
css reset，normalize.css：统一浏览器基本元素的风格（css reset直接重置浏览器的默认样式;normalize.css保留浏览器的原来样式并且做到每个浏览显示一致）

使用Modernizr

一个 JavaScript 库，用于检测用户浏览器的 HTML5 与 CSS3 特性。
Modernizr 会在页面加载后立即检测特性；然后创建一个包含检测结果的 JavaScript 对象，
同时在 html 元素加入方便你调整 CSS 的 class 名，
这些class名称标记当前浏览器支持哪些特性和不支持哪些特性，
支持的特性就直接显示该天特性的名称作为一个class（例:canvas,websockets），
不支持的特性显示的class是“no-特性名称”
（可以在css文件中针对不同的class设置不同的属性值）。

使用介绍

      
      
My Beautiful Sample Page

页面加载后的代码

4.工具、名词解释
条件注释：条件注释 ( conditional comment )是用于HTML源码中被IE有条件解释的语句。条件注释可被用来向IE提供及隐藏代码
条件注释可以被IE 10 之前的版本解释，IE 10 及以后不再支持条件注释

IE Hack针对IE浏览器编写不同的CSS，使得在IE浏览器中也能得到我们想要的页面效果

js能力检测能力检测的目标不是识别特定的浏览器，而是识别浏览器的能力。使用这种方式无需顾及浏览器如何如何，只需确定浏览器是否支持特定的能力，就可以给出相关的方案。

html5shiv.js:使用Javascript来使不支持HTML5的浏览器支持HTML标签。
respond.js: 让不支持css3 Media Query的浏览器包括IE6-IE8等其他浏览器支持查询。
css reset：“样式重置”——重置浏览器默认样式
Normalize.css:在默认的HTML元素样式上提供了跨浏览器的高度一致性。相比于传统的CSS reset，Normalize.css是一种现代的、为HTML5准备的优质替代方案。
Modernizr：一个 JavaScript 库，用于检测用户浏览器的 HTML5 与 CSS3 特性。Modernizr 会在页面加载后立即检测特性；然后创建一个包含检测结果的 JavaScript 对象，同时在 html 元素加入方便你调整 CSS 的 class 名。
PostCSS：一个JS插件转换样式表的工具。这些插件能够检验你的CSS、支持变量和混合，转化css3的新特性语法、行内图片等。

5.兼容性查询
caniuse
browserhacks

浏览器兼容

你可能感兴趣的:(浏览器兼容)