手记

奇舞团前端特训第四次课程笔记——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
1人推荐
随时随地看视频
慕课网APP