关于浏览器兼容的一些问题

2017-04-06 本文已影响0人 ninc

什么是 CSS hack
CSS hack就是我们为了使代码能兼容不同版本的浏览器而编写的关于浏览器兼容的语句。CSS hack具有三种具体的表现形式：选择器前缀法、CSS属性前缀法、IE条件注释法。前缀法就是使用一些特定浏览器才能识别的具有前缀的语句去编写代码处理兼容性的问题。如IE6能识别选择器和属性前带有前缀_（下划线），IE6、7能识别选择器和属性前带有前缀*。IE条件注释法就是在html文件开头加上注释样式的条件判断语句，这些语句能被IE浏览器识别，从而选出适应的代码。
谈一谈浏览器兼容的思路
首先需要分析的是到底要不要处理浏览器兼容的问题，这需要从产品的角度和成本的角度去分析。产品的角度需要分析产品的受众群，受众群使用的浏览器以及对于受众群重视的是功能还是外观；成本的角度需要分析实现某种兼容功能需要付出的人力和时间，如果成本太大可放弃兼容性。
其次需要分析的是哪些效果需要兼容，要兼容到浏览器的哪个版本，主要考虑的就是IE浏览器，如一些功能需要兼容到IE的第几个版本。
确认了需要兼容到IE几之后就是根据这个兼容需求去选择兼容的库、框架和兼容工具，最后再使用一些条件注释和CSShack做修补。
列举5种以上浏览器兼容的写法

由于IE6、7无法识别:after这样的伪类元素，故代码中使用前缀加*的方式对IE6、7使用建立BFC，从而清除浮动。

.clearfix:after{
  content: '';
  display: block;
  clear: both;
}
.clearfix{
  *zoom: 1; /* 仅对ie67有效 */
}

由于IE6、7无法识别display:inline-block这样的语句，故前缀加的代码设置了一个类似display:inline-block的效果，而前缀加的语句只有IE6、7能识别，从而解决兼容的问题

.target{
  display: inline-block;
  *display: inline;
  *zoom: 1;
}

下面为IE条件注释语句，意思为如果IE版本低于IE9，则加载下面两个JS文件，这两个JS文件可以解决html5标签和媒体查询不兼容的问题。

<!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
  <![endif]-->

下面也是IE条件判断语句，意思是如果版本为IE7，则加载ie7.css样式表。

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

下面也是IE条件判断语句，通过判断IE的版本号给html标签加上各种类名，这些类名可在html文件中使用，从而创建专门适用于某种IE版本的代码，从而解决兼容的问题。

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

以下工具/名词是做什么的

条件注释
条件注释是一些在IE中具有条件语句的功能，而在别的浏览器中会被当成注释的语句，如<!–-[if IE 7]><link rel="stylesheet" href="ie7.css" type="text/css" /><![endif]–->，此语句就是条件注释。
IE Hack
IE hack就是一些只能被IE识别的语句，如选择器或者CSS属性前加上*或者_，这种语句只能被IE的某些浏览器识别，这种写法就是IE hack。
js 能力检测
js能力检测指的是，js对于浏览器兼容问题上采用的判断方式是是否具有这个方法或属性，如果具有则兼容，没有就是不兼容。这种能力检测的方式较为简单，不需要繁杂的版本确认。
html5shiv.js
这个JS文件使用于那些不支持html5的浏览器，作用是将html5标签转化为那些老版本浏览器也能识别的标签，从而实现兼容。
respond.js
这个JS文件使用于那些不支持媒体查询的浏览器，作用是将媒体查询语句转化为那些老版本浏览器也能识别的语句，从而实现媒体查询在老版本浏览器上的兼容。
css reset
css reset指的是将浏览器中对某种元素的默认样式通通重置，从而消除那些由于浏览器默认样式不一致而出现的兼容性问题。
normalize.css
normalize.css是一个css文件，加载它可以得到不同的浏览器对于默认样式的相同规范，不同于css reset的是normalize.css没有将浏览器的默认样式通通重置，而是将默认样式分类，没有用的清零，有用的采用统一的值，从而消除那些由于浏览器默认样式不一致而出现的兼容性问题。
Modernizr
Modernizr.js是一个js文件，它采用了JS能力检测的思想，作用是对当前浏览器逐一判断某种功能能不能实现，能就在html标签加上class="xxx"，不能就在html上加上class="no-xxx"，从而使html标签具有很多类名，前端工程师编写代码时可以使用这些类写出不同的代码分支，从而解决兼容性问题。
postCSS
postCSS是一个平台，在这个平台上可以安装各种各样强大的插件，插件可以帮你把普通的CSS转换为兼容XX版本的CSS，从而实现解决兼容性的问题。
如：PostCSS插件Autoprefixer为CSS补全浏览器前缀
PostCSS插件CSS Grace让CSS兼容旧版IE

一般在哪个网站查询属性兼容性？
caniuse.com 这个网站可以查询到属性在各个浏览器版本的兼容性。

关于浏览器兼容的一些问题

猜你喜欢

热点阅读