HTML兼容性

什么是 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
    能力检测做一些修补
  • 在开发过程中,要保证基本功能就使用渐进增强:先针对低版本浏览器构建页面,保证最基本的功能,再针对高级浏览器进行效果,交互等改进和追加功能达到更好的用户体验;想要要过优先就使用优雅降级:一开始就构建完整的功能,然后再针对低版本浏览器进行兼容

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

.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

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

  • canicus

你可能感兴趣的:(HTML兼容性)