HTML兼容性

2017-06-23 本文已影响0人 cross_王

什么是 CSS hack

CSS Hack大致有3种表现形式，CSS属性前缀法、选择器前缀法以及IE条件注释法（即HTML头部引用if IE）Hack，实际项目中CSS Hack大部分是针对IE浏览器不同版本之间的表现差异而引入的。1.属性前缀法(即类内部Hack):IE6的"_"和"",IE7的"",IE6~IE10的\9";2.选择器前缀法(即选择器Hack);3.IE条件注释法(即HTML条件注释Hack)：针对所有IE(注：IE10+已经不再支持条件注释).

要不要做:从产品的角度考虑,产品的受众,受众浏览器的比例,效果优先还是基本功能优先;从成本的角度,有没有必要兼容到很低版本的浏览器
做到什么程度:根据需求决定兼容到哪些版本的浏览器支持哪些效果
如何做:根据兼容需求选择技术框架(要兼容到IE6选择1._{版本的jquery,兼容到ie9选择2.}版本的jquery);根据兼容需求选择兼容工具(html5shiv.js,respond.js,css reset,normalize.css,Modernizr);postCSS;条件注释,css hack,js
能力检测做一些修补
在开发过程中,要保证基本功能就使用渐进增强:先针对低版本浏览器构建页面,保证最基本的功能,再针对高级浏览器进行效果,交互等改进和追加功能达到更好的用户体验;想要要过优先就使用优雅降级:一开始就构建完整的功能,然后再针对低版本浏览器进行兼容

.clearfix:after{content: "";display: block;clear: both;} .clearfix { *zoom:1;}*zoom:1是属性前缀

`` if IE 6是ie的条件注释
div{width:500px;height:500px;color:blue;}div\9{color:yellow;} \9是选择器前缀
-moz-border-radius: 5px; -webkit-border-radius: 5px; -o-border-radius: 5px;这是浏览器内核前缀
选择合适的类库
使用工具css reset ,Modernizr 等

条件注释 : 于HTML源码中被IE有条件解释的语句,可被用来向IE提供及隐藏代码。
IE Hack : 指的是IE浏览器漏洞，利用IE Hack，我们可以兼容IE低版本
js 能力检测 : 检测当前浏览器支持和不支持的特性。如Modernizr.js,它会为浏览器的html标签生成一批的css的class名称，标记当前浏览器支持和不支持的特性。我们利用html标签上的类名，就可以为不同版本的不同浏览器添加兼容样式
html5shiv.js : 使低版本浏览器模拟H5的标签
respond.js : 使低版本浏览器模拟媒体查询
css reset : css初始化样式,核心作用就是清除HTML自带的样式
normalize.css : 也是css初始化,保护有用的浏览器默认样式而不是全部清除,修复一些浏览器bug,优化css可用性,解释代码
Modernizr : 检测浏览器是否支持一些功能
postCSS: 是通过自定义插件和工具这样的生态系统来改造CSS。把扩展的语法和特性转换成现代的浏览器友好的CSS