入门任务12-- 浏览器兼容

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

条件注释是于HTML源码中被IE有条件解释的语句。条件注释可用来被向IE提供或隐藏代码。

  1. 谈一谈浏览器兼容的思路
    要不要做

    • 产品的角度(产品的受众、受众的浏览器比例、效果优先还是基本功能优先,成本的角度 (有无必要做某件事)
      做到什么程度
    • 让哪些浏览器支持哪些效果
      如何做
      根据兼容需求选择技术框架/库(jquery)
      根据兼容需求选择兼容工具(html5shiv.js、respond.js、css reset、normalize.css、Modernizr)
      postCSS
    • 条件注释、CSS Hack、js 能力检测做一些修补
  2. 列举5种以上浏览器兼容的写法

  • 加载ie7的css

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

  • 使用ie6或ie7才识别的前缀

.box{
color: red;
_color: blue; /ie6/
color: pink; /ie67/
color: yellow\9; /
ie/edge 6-8*/
}

  • clearfix对ie7的兼容.:after和:before只在ie8及以上有效

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

  • 针对ie67来兼容inline-block。ie67识别 "*"前缀

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

  • 使用IE注释的方法来处理IE10以下的IE兼容。加载一些兼容的库。
  • 使用IE注释的方法来处理IE10以下的IE兼容。加载一些兼容的库。
  1. 以下工具/名词是做什么的
  • 条件注释
    条件注释 (conditional comment) 是于HTML源码中被IE有条件解释的语句。条件注释可被用来向IE提供及隐藏代码。
    使用了条件注释的页面在 Windows Internet Explorer 9 中可正常工作,但在 Internet Explorer 10 中无法正常工作。IE10不再支持条件注释

  • IE Hack
    利用条件注释来达到只有ie才能识别的代码,来达到实现兼容的目的。

  • js 能力检测
    js的兼容性的检测,查看是否有这个api,来判断是否能用。

  • html5shiv.js
    为ie6-9、Safari 4.x (and iPhone 3.x), 和 Firefox 3.x.支持html5的标签

  • respond.js
    为IE6-8和一些不支持CSS3媒体查询的浏览器提供支持,达到响应的目的。

  • css reset
    对标签的默认样式进行重置

  • normalize.css
    在默认的HTML元素样式上提供了跨浏览器的高度一致性,是一种现代的、为HTML5准备的优质替代方案

  • Modernizr
    浏览器兼容。帮助探测浏览器是否支持HTML5/CSS3特性,从而判断是否使用。甚至可以加载额外的script脚本。
    前端的瑞士军刀Modernizr.js

  • postCSS
    使用js插件来转换样式的工具。可以自动为样式加上兼容的属性。

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

www.caniuse.com

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容