其实我觉得渐进增强和优雅退化,表达的是一个意思.
在写某些 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;
}
