1.02.14 CSS浏览器兼容性与响应式web设计

1.02.14 CSS浏览器兼容性与响应式Web设计

1.浏览器私有属性

1. 意义
   • 介绍：我们经常会在某个CSS的属性前添加一些前缀，比如-webkit- ，-moz- ，-ms-，这些就是浏览器的私有属性。
   • 为什么会出现私有属性呢？
     通常，W3C组织成员提出一个新属性，制定标准，要走很复杂的程序，审查等。而浏览器商市场推广时间紧，如果一个属性已经够成熟了，就会在浏览器中加入支持。
     但是为避免日后W3C公布标准时有所变更，会加入一个私有前缀，比如-webkit-border-radius，通过这种方式来提前支持新属性。等到日后W3C公布了标准，border-radius的标准写法确立之后，再让新版的浏览器支持border-radius这种写法。常用的前缀有：
     1. -moz代表firefox浏览器私有属性
     2. -ms代表IE浏览器私有属性
     3. -webkit代表chrome、safari私有属性
     4. -o代表opera私有属性
     例如：
     /* 对于私有属性的顺序要注意，把标准写法放到最后，兼容性写法放到前面 */
     .demo {
     -webkit-transform:rotate(-3deg); /为Chrome/Safari/
     -moz-transform:rotate(-3deg); /为Firefox/
     -ms-transform:rotate(-3deg); /为IE/
     -o-transform:rotate(-3deg); /为Opera/
     transform:rotate(-3deg);
     }
   • 自动化后处理工具：上面的代码我们可以看出，为了一个属性设置兼容性需要书写大量的代码。这样是及其耗时费力的。前端开发人员为了解决这个麻烦可以使用一些后处理工具自动解析CSS样式并自动添加浏览器前缀到CSS内容里。

2.CSS hask

1. 意义：
   有时我们需要针对不同的浏览器或不同版本写特定的CSS样式，这种针对不同的浏览器/不同版本写相应的CSS 代码的过程，叫做CSS hack!CSS hack一般都是利用各浏览器的支持CSS的能力和BUG来进行的。
   CSS hack的写法