其實我覺得漸進增強和優(yōu)雅退化,表達的是一個意思.

在寫某些 html 結(jié)構(gòu)的時候,先要從滿足最基本的功能開始.

然后再慢慢的增強.

比如下面這個例子.

一個淘寶網(wǎng)的logo,利用a標(biāo)簽設(shè)置背景圖片.

image.png

按照上述的說法,書寫的步驟應(yīng)該是:

• 先寫a標(biāo)簽,滿足沒有樣式時,也可以正常點擊.
• 然后再去處理圖片以及其他樣式功能。

step 1.先寫正常的a標(biāo)簽

<a class="logo" >淘寶網(wǎng)</a>

step 2.設(shè)置背景圖片

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

到這一步,界面顯示的呈現(xiàn)出這個樣子.

image.png

但這個不符合漸進增強，樣式已經(jīng)載下來了，我們就應(yīng)該利用樣式把文字隱藏起來。

.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;
}

呈現(xiàn)下面這個樣子:

image.png

step 3.注釋樣式,模擬樣式?jīng)]有下載下來的情況.

/* .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標(biāo)簽 ---> 帶有背景圖片的a標(biāo)簽
優(yōu)雅退化:帶有圖片的a標(biāo)簽可以點擊 ---> 普通的a標(biāo)簽也可以點擊.

還有第二種方式,主要是樣式的寫法不同.

.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;
}