关于渐进增强和优雅退化的一个小demo

其实我觉得渐进增强和优雅退化,表达的是一个意思.

在写某些 html 结构的时候,先要从满足最基本的功能开始.

然后再慢慢的增强.

比如下面这个例子.

一个淘宝网的logo,利用a标签设置背景图片.

image.png

按照上述的说法,书写的步骤应该是:

• 先写a标签,满足没有样式时,也可以正常点击.
• 然后再去处理图片以及其他样式功能。

step 1.先写正常的a标签

<a class="logo" href="https://www.taobao.com">淘宝网</a>

step 2.设置背景图片

//.css
.logo {
     background-image: url(https://img.alicdn.com/tfs/TB1_uT8a5ERMeJjSspiXXbZLFXa-143-59.png);
  width: 143px;
  height: 59px;
}

到这一步,界面显示的呈现出这个样子.

image.png

但这个不符合渐进增强，样式已经载下来了，我们就应该利用样式把文字隐藏起来。

.logo {
  background-image: url(https://img.alicdn.com/tfs/TB1_uT8a5ERMeJjSspiXXbZLFXa-143-59.png);
  width: 143px;
  height: 59px;
  display: inline-block;
  text-indent: 143px;
  white-space: nowrap;
  overflow: hidden;
}

呈现下面这个样子:

image.png

step 3.注释样式,模拟样式没有下载下来的情况.

/* .logo {
  background-image: url(https://img.alicdn.com/tfs/TB1_uT8a5ERMeJjSspiXXbZLFXa-143-59.png);
  width: 143px;
  height: 59px;
  display: inline-block;
  text-indent: 143px;
  white-space: nowrap;
  overflow: hidden;
} */

image.png

这里的渐进增强:普通a标签 ---> 带有背景图片的a标签
优雅退化:带有图片的a标签可以点击 ---> 普通的a标签也可以点击.

还有第二种方式,主要是样式的写法不同.

.logo {
  display: inline-block;
  background-image: url(https://img.alicdn.com/tfs/TB1_uT8a5ERMeJjSspiXXbZLFXa-143-59.png);
  width: 143px;
  height: 0px;
  padding-top: 59px;
  overflow: hidden;
}