發(fā)布時(shí)間:2021-09-03 16:26:06來(lái)源:轉(zhuǎn)載
今天小編要跟大家分享的文章是關(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)記法。