js中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在启用脚本的浏览器中,用户也看不到,但是禁用的时候,会出现;这也牵扯到一个优雅降级的编程思想,后面会有介绍;

001

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

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

优雅降低,就是按照支持度最高的浏览器标准来写代码,一般是以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像素圆弧。

002

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

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

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

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

~~~

未经允许不得转载:朱邦邦的博客 » js中noscript标签引深出的两种编程思想(优雅降低,渐进增强)

赞 (0)

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址