从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的时候,推荐优雅降级;

AXIHE / 精选资源

浏览全部教程

面试题

学习网站

前端培训
自己甄别

前端书籍

关于朱安邦

我叫 朱安邦,阿西河的站长,在杭州。

以前是一名平面设计师,后来开始接接触前端开发,主要研究前端技术中的JS方向。

业余时间我喜欢分享和交流自己的技术,欢迎大家关注我的 Bilibili

关注我: Github / 知乎

目前重心已经放在研究区块链上面了

我叫朱安邦,阿西河的站长

目前在杭州从事区块链周边的开发工作,机械专业,以前从事平面设计工作。

2014年底脱产在老家自学6个月的前端技术,自学期间几乎从未出过家门,最终找到了满意的前端工作。更多>