CSS 动画优雅降级的总结

原创 笑靥 随笔 分享类 154阅读 2018-08-15 20:54:45 举报

css动画相关属性的兼容总结:

1.animation/keyframes浏览器支持情况:

2.transform 2D 浏览器支持情况:

3.transform3D/perspective浏览器支持情况

4.transition浏览器支持情况:

可以看到动画在IE8(这里主要讨论IE)及以下完全不支持,IE9由于只支持transform(非transform3d)所以也和css动画 say goodbye 了。但是项目一定要兼容IE9,这是可以采取优雅降级的方式

举个例子

一个元素在页面加载时渐进入页面,而IE9不支持animation和transform3d以及transition,所以一个的方案就是让IE9没有动画(主要就是让IE9下元素呆在动画结束的最后位置),这里元素初始状态需要在画面外并且是隐身

主要是translate3d,因为IE9不支持自然会忽略掉,所以transform,animation也在IE下不起效了,opacity等简单属性做个hack即可。

接下来第二种方案,使用js动画代替,首先要判断浏览器支不支持要用到的CSS属性,判断函数如下:

如果不支持的话就对$('.a')做下动画处理,当然,如果动画元素很多且很杂,我们可以事先对那些要进行动画的元素统一加上class="animation"之类的后面好处理,animation-delay之类的也可以用delay()代替。

聊一下css hack

刚刚提到的IE9的css hack \9\0,那么ie其他版本的css hack表示形式是怎样的呢?

  1. 条件注释法
    这种方式是IE浏览器专有的Hack方式,微软官方推荐使用的hack方式。举例如下

    只在IE下生效
    <!--[if IE]>
    这段文字只在IE浏览器显示
    <![endif]-->

    只在IE6下生效
    <!--[if IE 6]>
    这段文字只在IE6浏览器显示
    <![endif]-->

    只在IE6以上版本生效
    <!--[if gte IE 6]>
    这段文字只在IE6以上(包括)版本IE浏览器显示
    <![endif]-->

    只在IE8上不生效
    <!--[if ! IE 8]>
    这段文字在非IE8浏览器显示
    <![endif]-->

    非IE浏览器生效
    <!--[if !IE]>
    这段文字只在非IE浏览器显示
    <![endif]-->

  2. 类内属性前缀法
    属性前缀法是在CSS样式属性名前加上一些只有特定浏览器才能识别的hack前缀,以达到预期的页面展现效果。
    IE浏览器各版本 CSS hack 对照表


    说明:在标准模式中
    “-″减号是IE6专有的hack
    “\9″ IE6/IE7/IE8/IE9/IE10都生效
    “\0″ IE8/IE9/IE10都生效,是IE8/9/10的hack
    “\9\0″ 只对IE9/IE10生效,是IE9/10的hack

  3. 选择器前缀法
    选择器前缀法是针对一些页面表现不一致或者需要特殊对待的浏览器,在CSS选择器前加上一些只有某些特定浏览器才能识别的前缀进行hack。

    目前最常见的是

    html 前缀只对IE6生效
    +html +前缀只对IE7生效
    @media screen\9{...}只对IE6/7生效
    @media \0screen {body { background: red; }}只对IE8有效
    @media \0screen\,screen\9{body { background: blue; }}只对IE6/7/8有效
    @media screen\0 {body { background: green; }} 只对IE8/9/10有效
    @media screen and (min-width:0\0) {body { background: gray; }} 只对IE9/10有效
    @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {body { background: orange; }} 只对IE10有效等等

参考:https://waynecz.github.io/2016/02/01/CSS%E5%8A%A8%E7%94%BB%E4%BC%98%E9%9B%85%E9%99%8D%E7%BA%A7%E7%9A%84%E7%AE%80%E5%8D%95%E6%80%BB%E7%BB%93/
https://blog.csdn.net/freshlover/article/details/12132801

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复