zoukankan      html  css  js  c++  java
  • css优雅降级和渐进增强

    今天看前端公众号发布的文章,学到了几个新词

    1、modernizr

    2、@support

    3、优雅降级

    其中第三个“优雅降级”,如此文艺的名字居然还是第一次听到。度娘了一下,发现[优雅降级],[渐进增强]两个是相对的概念,总之上面三个词汇都与对css样式的支持息息相关。

    所谓[优雅降级]与[渐进增强]并不难以理解,是不同的设计模式

    [优雅降级]:通俗来讲,是我们首先满足的是“新“,比如当前的CSS3一些新的特性<canvas><video>……当前所流行的浏览器版本并不完全支持。也许由于我们的用户群体使用的浏览器版本绝大部分可以支持。那么

         我们的设计可以先来满足这一部分的需求,但同时我们也要考虑到那些低版本的,不能兼容的改特性的浏览器,我们需要添加一些类似于'hack'的技术,使得低版本也可以看到我们要表达的效果。

    [渐进增强]:相对于[降级]设计模式是,也许我们的受众群体绝大部分使用的是低版本的浏览器,因此我们实现我们的效果的时候,优先满足低版本的要求,但是对于那些高版本的,我们也会根据其新增效果来添加

         新效果的实现方式。如我们需要显示用户的头像,低版本的里浏览器我们可以直接用方形显示,而且高版本的浏览器我们就可以使用radius实现其圆形的展示。

    总之,两种设计模式的不同是由于侧重点不一样。

    像优雅降级举得常见的例子中:

    transition{ 
       -webkit-transition: all .5s; 
          -moz-transition: all .5s;
             -o-transition: all .5s;
                transition: all .5s;
    }        

    这些浏览器兼容顺序也是要根据每个浏览器对属性的支持,也要在实践中才能知道正确与否。

  • 相关阅读:
    2014下半年软考总结
    Java学习之Filter
    java学习之PreparedStatement
    java学习之dom4j 对 xml的读取
    Windows查看端口占用及杀掉进程
    CentOS压力测试工具Tsung安装和图形报表生成Tsung安装配置
    Tsung压力测试:Openfire
    CentOS Mysql安装配置
    nodejs、webpack
    IOS操作系统上执行monkey测试
  • 原文地址:https://www.cnblogs.com/perallina/p/5824686.html
Copyright © 2011-2022 走看看