Web前端漸進(jìn)增強(qiáng)與優(yōu)雅降級(jí)是什么？

今天小編要跟大家分享的文章是關(guān)于參加Web前端的常見(jiàn)題漸進(jìn)增強(qiáng)與優(yōu)雅降級(jí)。準(zhǔn)備參加Web前端工作的小伙伴們來(lái)和小編一起看一看吧，希望本篇文章能夠?qū)Υ蠹矣兴鶐椭?/p>

漸進(jìn)增強(qiáng)與優(yōu)雅降級(jí)

漸進(jìn)增強(qiáng)并不是一種技術(shù)，而是一種設(shè)計(jì)思想。各個(gè)瀏覽器的渲染能力各不相同，要做一個(gè)每個(gè)人都能看到的網(wǎng)頁(yè)、感受到的體驗(yàn)都一致的網(wǎng)站幾乎不可能。但還是得網(wǎng)站的可訪問(wèn)性，增加用戶在任何環(huán)境下都能正常訪問(wèn)網(wǎng)頁(yè)得核心內(nèi)容或能使用基本功能(避免網(wǎng)頁(yè)打不開(kāi)、排版錯(cuò)誤等)，并為他們提供當(dāng)前條件下較好的體驗(yàn)，這就是漸進(jìn)增強(qiáng)得核心思想。

優(yōu)雅降級(jí)也是一種設(shè)計(jì)思想，為了增加在高版本瀏覽器中提供較好的體驗(yàn)，碰到低版本瀏覽器再降級(jí)進(jìn)行兼容處理，使其能正常瀏覽。

這兩種思想的區(qū)別在于：

1. 漸進(jìn)增強(qiáng)是向上兼容，優(yōu)雅降級(jí)是向下兼容;

2. 漸進(jìn)增強(qiáng)是從簡(jiǎn)單到復(fù)雜，優(yōu)雅降級(jí)是從復(fù)雜到簡(jiǎn)單;

3. 漸進(jìn)增強(qiáng)關(guān)注的是內(nèi)容(增加核心內(nèi)容)，優(yōu)雅降級(jí)關(guān)注的是瀏覽體驗(yàn)(為了兼容低版本瀏覽器)

2. DOCTYPE

作用

DTD(Document Type Definition，文檔類型定義)是一系列的語(yǔ)法規(guī)則，用來(lái)定義 XML 或 (X)HTML 的文檔類型。瀏覽器會(huì)使用它來(lái)判斷文檔類型，決定何種協(xié)議來(lái)解析，以及切換瀏覽模式。

DOCTYPE 是用來(lái)聲明文檔類型和 DTD 規(guī)范的，一個(gè)主要的用途便是文件的合法性驗(yàn)證。如果文檔代碼不合法，那么瀏覽器解析時(shí)便會(huì)出現(xiàn)一些差錯(cuò)。

HTML5的文檔類型聲明：

HTML 4.01 Strict(HTML 4.01 嚴(yán)格模式)的 DTD 包含所有 HTML 元素和屬性，但不包括展示性的和棄用的元素(如font)，它的文檔類型聲明：

標(biāo)準(zhǔn)模式與怪異模式

怪異模式(Quirks Mode)用于模擬舊瀏覽器的行為。早期的網(wǎng)站并不會(huì)遵循完整的規(guī)范，隨著瀏覽器支持越來(lái)越多的規(guī)范，在那些舊的瀏覽器中開(kāi)發(fā)的頁(yè)面在顯示時(shí)會(huì)被破壞。為了向后兼容，瀏覽器發(fā)明了怪異模式，一行錯(cuò)誤或無(wú)效的 DOCTYPE 都會(huì)觸發(fā)怪異模式。

瀏覽器使用文件開(kāi)頭的 DOCTYPE 來(lái)決定用怪異模式處理或標(biāo)準(zhǔn)模式處理。DOCTYPE 可以確保不同瀏覽器以相同的方式解析文檔，以及執(zhí)行相同的渲染模式。

怪異模式與標(biāo)準(zhǔn)模式的主要區(qū)別：

1. 怪異模式的寬度和高度會(huì)包含 padding 和 border。標(biāo)準(zhǔn)模式不包含，標(biāo)準(zhǔn)模式下可以通過(guò)設(shè)置 box-sizing: border-box 將標(biāo)準(zhǔn)盒模型轉(zhuǎn)化成怪異模式下的盒模型。

2. 怪異模式下，當(dāng)內(nèi)容超出容器高度時(shí)，會(huì)將容器拉伸，而不是溢出。

3. 怪異模式下，在表格中的字體樣式(如 font-size )不會(huì)繼承。

4. 怪異模式下顏色值必須使用十六進(jìn)制標(biāo)記法。