網頁瀏覽器一直在網站上。 事實上，瀏覽器是瀏覽您的網站的體驗或人物的重要組成部分 - 但並非所有瀏覽器都是平等創建的。 客戶在瀏覽器中查看您的網頁是完全可能的（而且實際上很可能），這些瀏覽器非常陳舊，並且缺少更新式瀏覽器中的功能。 當您努力開發利用網站設計和開發最新進展的網站時，這可能會造成重大問題。 如果有人使用其中一種複古瀏覽器訪問您的網站，並且您的最新高級技術不適合他們，那麼您可能會導致整體糟糕的體驗。 漸進式增強是針對不同瀏覽器處理網頁設計的策略，即那些缺乏現代支持的舊瀏覽器。
漸進式增強是設計網頁的一種方式，因此用戶代理支持的功能越多，網頁的功能就越多。 這與被稱為優雅退化的設計策略恰恰相反。 該策略首先為最現代的瀏覽器構建頁面，然後確保它們在功能較差的瀏覽器中也能夠很好地工作 - 體驗“優雅地降級”。 漸進式增強始於首先不太能力的瀏覽器，並從那裡構建體驗。
如何使用漸進增強
當您使用漸進式增強功能創建網頁設計時，首先要做的是創建一個適用於Web瀏覽器最低公共標準的設計。 從核心上看，漸進式增強功能表示，您的內容應該可供所有網絡瀏覽器使用，而不僅僅是一個子集。這就是為什麼您從支持這些陳舊，過時和功能較差的瀏覽器開始。如果您創建的網站運行良好對他們來說，你知道你已經創建了一個基線，它應該為所有訪問者提供至少可用的體驗。
當首先使用功能最弱的瀏覽器時，您需要確保所有HTML都應該有效並且語義正確。 這將有助於確保最廣泛的用戶代理可以查看頁面並準確顯示。
請記住，使用外部樣式表添加視覺設計樣式和整體頁面佈局。 這確實是漸進增強的地方。 您可以使用樣式表創建適用於所有訪問者的網站設計。 隨著用戶代理獲得功能，您可以添加其他樣式來增強頁面。 每個人都可以獲得基線樣式，但對於任何支持更先進和更現代風格的新聞瀏覽器，他們都會獲得一些額外的功能。 您“逐步增強”可支持這些樣式的瀏覽器頁面。
有幾種方法可以應用漸進式增強。 首先，如果瀏覽器不理解一行CSS，就應該考慮瀏覽器的作用 - 它會忽略它！ 這實際上對你有利。 如果您創建了所有瀏覽器可以理解的基線樣式集，則可以為新瀏覽器添加其他樣式。 如果他們支持這些風格，他們會應用它們。 否則，他們會忽略它們，只使用這些基線樣式。 在這個CSS中可以看到漸進增強的一個簡單例子：
.main-content {
背景：＃999;
背景：rgba（153,153,153，.75）;
}
這種風格首先將背景設置為灰色。 第二條規則使用RGBA顏色值來設置透明度級別。 如果瀏覽器支持RGBA，則它將覆蓋第一個樣式。 如果沒有，只有第一個會被應用。 您已經設置了基線顏色，然後為更現代的瀏覽器添加了額外的樣式。
使用功能查詢
您可以應用漸進式增強的另一種方式是使用所謂的“功能查詢”。 這些與媒體查詢類似，這是響應式網站設計的一個重要部分。 當媒體查詢特定屏幕尺寸的文本時，功能查詢將檢查是否支持某個功能。 您將使用的語法是：
@supports（display：flex）{}您在此規則中添加的任何樣式僅在該瀏覽器支持“flex”（這是Flexbox的樣式）時才可用。 您可以為每個人設置一套規則，然後僅使用功能查詢來為選定的瀏覽器添加額外的規則。
Jennifer Krynin的原創文章。 由傑里米吉拉德於12/13/16編輯。