奇舞-兼容性-笔记

浏览器浏览器兼容

css中的兼容性问题

• 浏览器不支持该特性
• 某些特定条件下触发浏览器bug

浏览器特性支持

了解浏览器支持情况

https://caniuse.com/
https://developer.mozilla.org/zh-CN/docs/Web/CSS/Reference
https://tympanus.net/codrops/css_reference/
https://www.quirksmode.org/css/

你需要兼容哪些浏览器？

• 根据用户群体决定

  • 面向普通用户：IE8 chrome Firefox
  • 面向企业产品 IE9 chrome firegox

• 了解浏览器市场份额

  • 日志分析
  • 百度统计 NetMarketShare

浏览器不支持时怎么办？

• 如果低版本浏览器没有这个特性可以接受吗？

  • border-radius 不支持时，没有圆角
  • box-shadow 不支持可，没有阴影

• 可以使用效果稍差一些的替代方案吗？

  • min-height: 100vh 用min-height: 800px

• 可以使用一些替代方案吗？

  • opacity: 0.5 在IE下用filter : alpha(opacity=50)

• 可以使用JavaScript 让浏览器支持吗？

  • 使用htmlshim.js 让IE6 ～ 8 支持新标签
  • 使用DD_belatedPNg.js 让IE6 支持半透明png 图片

• 更换实现方式？

不同浏览器使用不同的样式

• @supports
• 层叠
• 条件注释
• 浏览器怪癖

.container{
 display:flex
}
@supports(display: grid) {
  .container {
   display: grid;
   grid-template: repeat(4, 1fr) / 50px 100px;
  }
}

浏览器hack原理- 层叠

• 同一个属性，在后面书写的值覆盖前面书写的值

p {
 lihe-height:2;
 line-height:3;
}

• (对浏览器)无效的属性值会被忽略

 p {
   display: table;
   display:flex;
 }

• 浏览器hack原理- 条件注释

只在IE下生效
    

    只在IE6下生效
    

    只在IE6以上版本生效
    

    只在IE8上不生效
    

    非IE浏览器生效
    

浏览器的怪癖

internet Explorer 6

/* IE6 不支持两个类选择器直接组合 */
.unused-clsss.selector{
  /* IE6 only CSS */
}
.container {
  height: 100px;
  /* 只有IE6 会忽略 */
  _height: 200px;
}

internet Explorer 7

.container {
 height : 100px;
 /* 只有IE6 和7 会忽略 */
 *height: 200px;
}

internet Explorer 8

/* IE6-8 不支持 :root 选择器 */
:root .selector {
 /* IE6-8 Style */
 }
 .selector {
   color: #fff;
   /* IE6-8 会忽略\9 */
   color: #fff\9
 }

.tip {
 background:blue;
 background:red\9;
 *background:black;
 _background:orange;
}

CSS2 选择器兼容性

主要兼容性问题在IE6-7 上

IE6 不支持多个类直接组合

• p.class-a.class-b 被当成为p.class-b
• 解决方法： 处理好选择器优先级

IE 不支持父子，兄弟选择器

• E > F , E + F 和 E ~ F 选择器无效
• 解决方法 避免使用， 换后代选择器或其它

IE6 不支持属性选择器

• 任何一种都不支持
• 解决方法 用class

IE6-7 不支持伪元素

• 不支持 :before 和 :after
• 解决办法， 改变实现方式 或在HTML中添加标签

IE6 不支持某些伪类

• 非链接不用使用:hover :active
• 解决办法 使用a 嵌套 hover 的元素

IE6-7 不支持 :foucs 伪类

• 解决办法 使用javaScript

IE6 不支持 :first-child 伪类

• 解决办法 给第一个子元素添加 class = ‘first’

CSS3 选择器兼容性

• CSS3 中的大部分选择器， 兼容是IE9+
• 例如 :target :empty :nth-child :nth-of-type :checked :disabled 无法用IE6-8
• 移动端支持绝大多数CSS3 选择器

CSS2 属性

问题主要集中在IE6上 ，一部分IE7 也不支持

IE6 不支持 min/max-width/height

• min-height 解决办法

div {
 min-height: 500px;
 _height : 500px;
}

• min-width 解决办法

<div>
 <div class='container'>
   <div class='strut'>div>
 div>
div>
<style>
   .container {
   min-width: 500px;
  }
  /* IE6 */
  .container .strut {
   height:1px;
   width: 500px;
  }
 style>

• max-width/height 解决办法
  
  • 使用javaScript

IE6 不支持position :fixed

html, body {
 height: 100%;
}
.go-top {
  position: fixed;
  _position:absolute;
  botton: 0;
  right: 0;
}

IE6-7不支持块级元素 inline-block

• 行级元素支持，而块级元素不支持
• 解决办法

.selector {
  display: inline-block;
  *display:line:
  *zoom :1 // 触发BFC
}

IE6-7 不支持 display：table

• 请使用float 或 inline-block
• 不要使用table

CSS3 属性

• IE6-7 不支持
• IE8 部分支持
• IE9 基本都支持
  IE8 支持
• box-sizing
• outline

IE8 不支持

• background-size
• 推荐在IE8 及一下使用固定宽度布局
• broder-radius
• box-shadow

• opacity

  • filter:alpha(opacity=50)

• rgba hsl hsla

  • 一般场景下， 使用想近的不透明颜色代替

  • alpha 可以通过增加额外元素 并设置透明度实现

  • rem vh vw calc

  • 降级为固定宽度

IE9 不支持

• transition 与 animation
  
  • 可以接受的降级
  • 实现不能接受就用javaScript

media query

• 基本的媒体（all/print/screen/speech） 都支持
• 媒体特性（width/height/orientation） IE9 及以上
  
  • 还是建议IE8 及一下使用固定宽度布局

浏览器前缀

• 浏览器厂商为实验新特性，在属性名前加前缀
• Chrome/Safari？Opera -webkit-
• lMicrosoft :-ms-
• Mozilla: -moz-

.example {
 -webkit-transform: translate(100px, 0);
     -ms-transform: translate(100px, 0);
         transform: translate(100px, 0) 
 }

Transform in IE

.selector {
 -webkit-transform : rotate(40deg) scale(2,0)
     -ms-transform : rotate(40deg) scale(2,0)
         transform : rotate(40deg) scale(2,0)
      filter:progid: DXimageTransform.Microsoft.Matrix(
  sizingMethod = 'auto expand',
  M11 = 1.5322222333,M12 = -1.2332333444,
  M21 = 1.2322222333,M23 = 1.5322222333
  )   
}

Transition

.example {
 -webkit-transfomr: translate(100px, 0);
     -ms-transform: translate(100px, 0);
         transform: translate(100px, 0);
 -webkit-transition: -webkit-transform .5s ease;
         transition: -webkit-transform .5s ease;
         transition: transform .5s ease;        
}

http://autoprefixer.github.io/ 自动添加前缀

Animation

语义化的html5标签

<style>
 article, mian, nav, aside, section, header, footer, figure, figcaption {
  display: block;
}
style>

浏览器Bug

IE6 下半透明 png 显示不正常

• DD_belatedPNG.js
• filter

.selector{
background : url(/path/to/img.png) no-repeat;
_background: none;
/* 图片URL 必须是完整路径 */
_filter:progid: DXImageTransform.Microsoft.AlphaImageLoader(
src='/path/to/img.png',
sizing'crop'
)
}

IE6 浮动双边距

• 浮动元素的与浮动同方向的边距加倍

.selector{
 float:left;
 /* IE6 下显示20px */
 margin-left:10px;

}

• 解决办法

.selector{
    float：left;
    margin-left:10px;
    _display: inline
}

hasLayout

• On Having Layout
• zoom: 1

IE 模式

• 浏览器模式Browser Mode

  • 切换渲染引擎 JavaScript 引擎和HTTP 请求的UserAgent

  • 兼容模式相当于使用IE7 的引擎

  • 文本模式

• 切换文档模式，即渲染引擎和JavaScript 引擎

  控制IE模式（<=10）

• DocType 有无控制是否进入怪异模式

• meta 标签控制进入那种文档模式

/* 使用IE7 渲染模式 */
http-equiv='X-UA-Compatible' content='IE=7'>

/* 使用最新引擎 */

http-equiv='X-ua-compatible' content='IE=edge'>

测试兼容性

• 虚拟机
• https://www.browserstack.com/

Polyfill

• 使用代码帮助浏览器实现它尚未支持的特性
• 使用（未来）标准写法
• CSS Polyffills
  http://selectivizr.com/
  http://css3pie.com/