奇舞团前端特训第四次课程笔记——CSS和兼容性

1. 浏览器兼容
   • @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;
       }
2. css2里选择器兼容性
   • IE6不支持多个类直接组合
   • IE6不支持父子、兄弟选择器
   • IE6不支持属性选择器
   • IE6-7不支持伪元素
   • IE6不支持某些伪类
   • IE6-7不支持：focus伪类
   • IE6不支持：first-child伪类
3. css3选择器兼容性
   • ：target ：empty ：nth-of-type等无法在IE6-8中使用
   • IE9+支持大多数css3属性
4. 解决
   • 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-
5. 浏览器bug
   • IE6里面半透明png显示不正确
   • IE6浮动双边距

     .a{
     float:left;
     margin-left:10px;//显示为20px
     }

   • hasLayout(zoom:1能把元素hasLayout设为true)
6. IE模式
   • 浏览器模式
     • 会切换浏览器的渲染引擎、js引擎和http请求useragent
     • 兼容模式都是ie7
   • 文本模式
     • 会切换浏览器的渲染引擎、js引擎，给开发者查看用的
7. 控制IE模式（<=10）
   • doctype有无控制是否进入怪异模式
   • meta标签控制进入哪种文档模式
8. 测试兼容性
   • 虚拟机
   • BrowserStack
9. Polyfill
   • 使用代码来帮助浏览器实现它尚未支持的特性
10. BEM
    • bloc__element--modifier(修饰)
11. css预处理器
    • less
    • Sass
    • Stylus
    • PostCss