奇舞團前端特訓第四次課程筆記——CSS和兼容性

標簽：

Html/CSS CSS3 前端工具

浏览器兼容
- @supports
```
@support(display:grid){
.a{
display:grid
}
}
```
- 利用层叠
  - 同一个属性后面的覆盖前面的
  - 对浏览器无效的属性会被忽略
  - 条件注释（IE独有,IE9以上就没有了）
```
<!--[if IE 7]>
...
<![endif--]>
```
- 浏览器的怪癖
  - IE6不支持两个类选择器直接组合，只认后面一个
    .a.b{
    //只认b
    }
  - IE6会忽略属性前面的_
    _height
  - IE6和IE7会忽略前面的
    height
  - IE6-8不支持：root选择器
    ：root .a{}
  - IE6-8会忽略\9字符
    .a{
    color:#fff;
    color:#f0f\9;
    }
css2里选择器兼容性
- IE6不支持多个类直接组合
- IE6不支持父子、兄弟选择器
- IE6不支持属性选择器
- IE6-7不支持伪元素
- IE6不支持某些伪类
- IE6-7不支持：focus伪类
- IE6不支持：first-child伪类
css3选择器兼容性
- ：target ：empty ：nth-of-type等无法在IE6-8中使用
- IE9+支持大多数css3属性
解决
- iE6不支持min、max-height，width
- IE6不支持position：fixed；
- IE5-7的块级元素不支持inline-block
- IE6-7不支持display：table
- IE8不支持
  - background-size（推荐使用固定宽度布局）
  - border-radius
  - opacity（filter：alpha（opacity=50））
  - rgba、hsl、hsla(使用相近颜色或者增加额外元素)
  - rem/vh/vw/cacl(降级为固定宽度)
- IE9不支持
  - transition与animation（可接受降级或用js）
  - media query
- 浏览器前缀
  - chrome，safari，opera：-webkit-
  - Microsoft：-ms-
  - Mozilla:-moz-
浏览器bug
- IE6里面半透明png显示不正确
- IE6浮动双边距
```
.a{
float:left;
margin-left:10px;//显示为20px
}
```
- hasLayout(zoom:1能把元素hasLayout设为true)
IE模式
- 浏览器模式
  - 会切换浏览器的渲染引擎、js引擎和http请求useragent
  - 兼容模式都是ie7
- 文本模式
  - 会切换浏览器的渲染引擎、js引擎，给开发者查看用的
控制IE模式（<=10）
- doctype有无控制是否进入怪异模式
- meta标签控制进入哪种文档模式
测试兼容性
- 虚拟机
- BrowserStack
Polyfill
- 使用代码来帮助浏览器实现它尚未支持的特性
BEM
- bloc__element--modifier(修饰)
css预处理器
- less
- Sass
- Stylus
- PostCss