浏览器兼容性

文章目录

  • 浏览器兼容性
    • 问题产生原因
    • 厂商前缀
    • css hack
    • 渐近增强 和 优雅降级
    • caniuse

浏览器兼容性

问题产生原因

  • 市场竞争
  • 标准版本的变化

厂商前缀

比如:box-sizing,谷歌旧版本浏览器中使用-webkit-box-sizing:border-box

  • 市场竞争,标准没有发布;
  • 标准仍在讨论中(草案),浏览器厂商希望先支持;

IE: -ms-
Chrome, safari: -webkit-
opera: -o-
firefox: -moz-

  <style>
    div {
      width: 200px;
      height: 200px;
      border: 2px dashed #333;
      box-sizing: border-box;
      -webkit-box-sizing: border-box;
      -ms-box-sizing: border-box;
      -moz-box-sizing: border-box;
      -o-box-sizing: border-box;
    }
  style>
<div>div>

浏览器在处理样式或元素时,使用如下的方式:
当遇到无法识别的代码时,直接略过。

  1. 谷歌浏览器的滚动条样式

实际上,在开发中使用自定义的滚动条,往往是使用div+css+js实现的

  1. 多个背景图中选一个作为背景

css hack

根据不同的浏览器(主要针对IE),设置不同的样式的元素

  1. 样式

IE中,css的特殊符号

   div{
     width: 100px;
     height: 100px;
     background-color: #f00;
     *background-color: #00f;
     _background-color: #333;
   }
  <div>div>
  • *属性,兼容IE5、IE6、IE7
  • _属性,兼容IE5~IE6
  • 属性值\9,兼容IE5~IE11
  • 属性值\0,兼容IE8~IE11
  • 属性值\9\0,兼容IE9~IE10
  1. 条件判断
<body>
  
body>

IE9以下的浏览器识别,IE专属代码。

  1. 条件判断

渐近增强 和 优雅降级

两种解决兼容性问题的思路,会影响代码的书写风格

  • 渐近增强:先适应大部分浏览器,然后针对新版本浏览器加入新的样式

书写代码时,先尽量避免书写有兼容性问题的代码,完成之后,再逐步加入新标准中的代码。

  • 优雅降级:先制作完整的功能,然后针对低版本浏览器进行特殊处理

书写代码时,先不用特别在意兼容性,完成整个功能之后,再针对低版本浏览器处理样式。

caniuse

查找css兼容性

caniuse.com

你可能感兴趣的:(css)