浏览器兼容

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

1.css hack

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

css hack的三种写法

.box{
  color:red;
  _color: red; /*ie6*/
  *color:red;  /*ie6,7*/
  color:red\9;  /*ie/edge 6-8*/
}
<!--[if IE 7]>
<link rel="stylesheet" href="ie7.css" type="text/css" > 
<![endif]-->

2.浏览器的兼容思路

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

3. 常见浏览器兼容写法

  1. 条件注释
<!--[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  等于  就是大于等于   小于等于
  1. 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 */
}
  1. 选择器前缀
@media screen and (-webkit-min-device-pixel-ratio:0){ /*为chrome单独设置样式的类实现案例*/
.closeImg{
right:300px;height:100px;  
width:200px;  
background-color:Olive;  
} 
}         
  1. 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">
  1. 条件注释结合选择器
<!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. 常见兼容相关术语名词

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

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

caniuse网站 https://caniuse.com/

上一篇 下一篇

猜你喜欢

热点阅读