关于浏览器的兼容问题

96
熊蛋子17
2017.11.23 00:26 字数 1878

关于浏览器的兼容问题

1. 什么是 CSS hack

根据百度的简述:CSS hack由于不同厂商的浏览器,比如Internet Explorer,Safari,Mozilla Firefox,Chrome等,或者是同一厂商的浏览器的不同版本,如IE6和IE7,对CSS的解析认识不完全一样,因此会导致生成的页面效果不一样,得不到我们所需要的页面效果。 这个时候我们就需要针对不同的浏览器去写不同的CSS,让它能够同时兼容不同的浏览器,能在不同的浏览器中也能得到我们想要的页面效果。
我们可以简单的认为是,CSS hack的目的就是使你的CSS代码兼容不同的浏览器。
CSS hack

CSS Hack大致有3种表现形式:

  • CSS属性前缀法
  • 选择器前缀法
  • IE条件注释法(即HTML头部引用if IE)Hack
    实际项目中CSS Hack大部分是针对IE浏览器不同版本之间的表现差异而引入的。

属性前缀法(即类内部Hack):

  1. 例如 IE6能识别下划线"—"和星号" * ",IE7能识别星号" * ",但不能识别下划线"—",IE6~IE10都认识"\9",但firefox前述三个都不能认识
  2. 选择器前缀法(即选择器Hack)
  3. IE条件注释法(即HTML条件注释Hack):
    针对所有IE(注:IE10+已经不再支持条件注释): ,针对IE6及以下版本:。这类Hack不仅对CSS生效,对写在判断语句里面的所有代码都会生效

2. 谈一谈浏览器兼容的思路

在大体上主要分为以下几个步骤

  • 要不要做
  1. 产品的角度
  2. 成本的角度
  • 要做到什么程度

需要哪些的浏览器支持

  • 如何做
  1. 根据兼容性选择库&框架
  2. 根据兼容性选择兼容性工具
  3. postCSS
  4. 条件注释、CSS Hack、js 能力检测做一些修补
  • 方法思路
  1. 渐进增强(progressive enhancement): 针对低版本浏览器进行构建页面,保证最基本的功能,然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验
  2. 优雅降级(graceful degradation): 一开始就构建完整的功能,然后再针对低版本浏览器进行兼容。

注:stackoverflow-渐进增强和优雅降级的区别

3. 列举5种以上浏览器兼容的写法

  1. 属性前缀法(即类内部Hack):
 color: red; 
_color: blue; /*ie6*/
 *color: pink; /*ie67*/ 
color: yellow\9; /*ie/edge 6-8*/
}
  1. IE条件注释法(即HTML条件注释Hack)
<link rel="stylesheet" href="ie7.css" type="text/css" />
<![endif]–->
  1. 选择器前缀法(即选择器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有效等等
  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]-->
  1. 利用Modernizr工具

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

  • 条件注释
    条件注释 是于HTML源码中被 IE 有条件解释的语句。条件注释可被用来向 IE提供及隐藏代码。 条件注释最初于微软的 Internet Explorer 5浏览器中出现,并且直至 Internet Explorer 9 均支持。微软已宣布于IE10停止支持。具体代码如上已给出。

  • IE Hack
    针对IE浏览器编写不同的CSS的让IE能够正常渲染的过程

  • js 能力检测
    能力检测又称特性检测。能力检测的目的不是识别具体的浏览器,而是识别浏览器的能力。
    能力检测的目的应该是根据你需要的特性来选择问题的解决方案,而不是检测用户在用什么浏览器。而且在检测时要保证你要用到的能力确实存在,自己不要做过多的推测,代码也不要做过多的判断。
    两个重要的概念:
    第一个概念是先检测达成目的的最常用的特性。先检测最常用的特性,可以保证代码最优化,因为在多数情况下都可以避免测试多个条件。
    第二个概念是必须测试实际要用到的特性。一个特性存在,不一定意味着另一个特性也存在。

  • html5shiv.js
    IE 9之前的版本几乎不支持HTML5元素和其它HTML5特性。
    HTML5 Shiv支持在旧版Internet Explorer(IE9之前)中使用HTML5细分元素,并为Internet Explorer 6-9,Safari 4.x(和iPhone 3.x)和Firefox 3.x提供基本的HTML5样式。

  • respond.js
    响应式布局,理想状态是,对PC/移动各种终端进行响应。媒体查询的支持程度是IE9+以及其他现代的浏览器,但是IE8在市场当中仍然占据了比较大量的市场份额,使我们不得不进行IE低端浏览器的考虑。那么如何在IE6~8浏览器中兼容响应式布局呢?这里我们需要借助这样一个文件:respond.js
    Respond.js 是一个快速、轻量的 polyfill,用于为 IE6-8 以及其它不支持 CSS3 Media Queries 的浏览器提供媒体查询的 min-width 和 max-width 特性,实现响应式网页设计。

  • css reset
    css reset是通过重新定义标签样式,把浏览器的默认样式覆盖掉,以便保持个浏览器渲染的一致性。

  • normalize.css
    normalize.css是reset.css的替代方案,保留有用的浏览器默认样式,同时进行一些bug的修复。

  • Modernizr
    Modernizr是一套JavaScript 库,用来侦测浏览器是否支持 CSS3 或 HTML5 功能支持情况等。如果浏览器不支持,Modernizr会使用其他的解决方法来进行模拟。
    Modernizr 会在页面加载后立即检测特性;然后创建一个包含检测结果的 JavaScript 对象,同时在 html 元素加入方便你调整 CSS 的 class 名。

  • postCSS
    PostCSS是一个使用JS插件转换样式的工具。这些插件可以删除您的CSS,支持变量和混合,透明未来的CSS语法,内联图像等。
    PostCSS不是预处理器本身; 它不会转换CSS。事实上,它本身根本不做任何事。它所做的是提供一个CSS解析器和一个框架,用于创建可以分析,lint,处理资产,优化,创建回退,否则转换解析的CSS的插件。PostCSS将CSS解析为抽象语法树(AST),通过一系列插件将其传递,然后PostCSS核心为插件更改的树生成一个新的CSS字符串。。如果你熟悉JavaScript工具,那么你可以认为PostCSS 为CSS的Babel。
    PostCSS目前有200多个插件,其中很多在PostCSS GitHub页面上列出,而其他的可以在有用的PostCSS目录postcss.parts中找到。PostCSS可以集成在大多数构建工具中,包括Gulp,Grunt,webpack或npm。
    PostCSS被行业领导者使用,包括维基百科,Twitter,阿里巴巴和JetBrains。该 Autoprefixer PostCSS插件是最流行的CSS处理器之一。

6. 一般在哪个网站查询属性兼容性?

CanIUse查CSS属性兼容
BROWSER hacks查 Hack 的写法

日记本
Web note ad 1