阿西河

所有教程

公众号
🌙
阿西河前端的公众号

我的收藏

    最近访问  (文章)

      教程列表

      抓包专区
      测试专区

      从JS的noscript标签引深出的两种编程思想(优雅降低,渐进增强)

      noscript 标签的使用

      在一些页面不支持javascript或者javascript被禁用的时候;

      script标签内的内容是失效的,这个时候会显示noscript

      <!doctype html>
      <html>
      <head>
          <meta charset="UTF-8">
          <title>Document</title>
      </head>
      <body>
      <script src="./jquery.js"></script>
      <noscript>
          <p>你这么牛逼,咋不上天呢,连Javascript都禁用,赶紧回家种田去吧</p>
      </noscript>
      </body>
      </html>
      

      上面的noscript在启用脚本的浏览器中,用户也看不到,但是禁用的时候,会出现;这也牵扯到一个优雅降级的编程思想,后面会有介绍;

      优雅降级和渐进增强

      为了适用不同的版本,前端开发的时候,一般会有两个思路:

      • 优雅降级,
      • 渐进增强;

      优雅降低

      就是按照支持度最高的浏览器标准来写代码,一般是以chrome为准,对于技术支持较旧的浏览器,只要不影响使用都可以不处理(比如圆角效果border-radius在低版本IE中是没有圆角效果的,但却并不影响正常阅读,那就不管了),如果有功能方面在低版本无法正常,就做低版本的兼容,比如兼容到IE8/IE6;我自己走的路线是优雅降级;

      渐进增强

      是以技术支持最低的浏览器为准,假设以IE6为准(如果兼容到IE8,就以IE8为准),写的代码在IE6/8中没问题后,在补充一些高级浏览器支持的效果;

      广义来说,其实要定义一个基准线,在此之上的增强叫做渐进增强,在此之下的兼容叫优雅降级。这个基准线对于我,是允许使用javascript、cookie和css的IE8浏览器。

      不过狭义而言,渐进增强一般说的是使用CSS3技术,在不影响老浏览器的正常显示与使用情形下来增强体验,而优雅降级则是体现html标签的语义,以便在js/css的加载失败/被禁用时,也不影响用户的相应功能。

      CSS3中的方案

      .transition {   /* 渐进增强写法 */
        -webkit-transition: all .5s;
           -moz-transition: all .5s;
             -o-transition: all .5s;
                transition: all .5s;  
      } 
      .transition {   /* 优雅降级写法 */ 
                transition: all .5s;
             -o-transition: all .5s;
           -moz-transition: all .5s;
        -webkit-transition: all .5s;
      }
      

      推荐第一种写法 渐进增强

      写transition可能看不出两种写法的区别;

      看下多个属性的时候的 border-radius

      .test-one {
          width: 500px;
          height: 300px;
          background-color: #37C7D4;
          border-radius: 30px 10px;
          -webkit-border-radius: 30px 10px;
      }
      .test-two {
          width: 500px;
          height: 300px;
          background-color: #d46c4d;
          -webkit-border-radius: 30px 10px;
          border-radius: 30px 10px;
      }
      

      上面是在chrome测试的两种不同写法;

      我想要的是让box左上和右下角为30像素圆弧,左下角和右上是10像素圆弧。

      CSS3 前缀 o webkit moz ms 分别对应不同的内核;

      • -webkit-对应 Safari and Chrome
      • -o- for Opera(记忆中,在一篇国外的文档上看到,欧朋是没有明确用 -o 这个前缀的,把他写上是为了向后兼容,适应未来;现在一时翻不到那篇文章了,感兴趣的可以多了解下)
        • 现在opeea也是webkit内核啊,可以不用写了
      • -ms- for Internet Explorer
        • 现在新版微软的浏览器也是webkit内核啊,以后可能就不用写了
      • -moz-对应 Firefox
        • 现在Firefox新版也是webkit内核啊,可以不用写了

      CSS不是笔记的重点,所以就不多写了;

      推荐写法

      • 在写CSS3的时候,推荐渐进增强
      • 在写JS的时候,推荐优雅降级;
      目录
      目录