漸進增強的 CSS 布局：從浮動到 Flexbox 到 Grid

01-28

原文地址：Progressively Enhancing CSS Layout: From Floats To Flexbox To Grid
原文作者：Manuel Matuzovi?
譯者：LeviDing
校對者：薛定諤的貓，LouisaNikita

今年早些時候，大多數主流瀏覽器都支持了 CSS Grid 布局。自然地，規範也成為了大小會議的熱門話題之一。在參與了一些關於 Grid 布局和漸進增強的討論後，我認為使用它還是有很大的不確定性。我聽到一些很有趣的問題和發言，我想在這篇文章中討論討論。

最近幾周聽到的聲明和問題：

我什麼時候可以開始使用 CSS grid 布局？
還需要好幾年我才能在實際項目中使用 CSS Grid 布局，這太扯淡了。
為了使用 CSS Grid 布局，網站需要 Modernizr 嗎？
如果我現在想使用 CSS Grid，那我需要為我的網站做兩三個版本。
漸進增強在理論上聽起來不錯，但我認為在實際項目中不可能實現。
漸進增強的成本是多少？

這些都是很好的問題，並不是所有的都很容易回答，但我很樂於分享我的一些方法。CSS Grid 布局模塊是響應式設計中最令人激動的發展之一。如果它對我們和我們的項目有意義，我們應儘快去用好它。

Demo：漸進增強布局

在詳細闡述我對上述問題的想法之前，我想介紹一下我做的一個小的 demo。

注意： 最好在配備有大屏幕的設備上打開上面這個 demo。你用手機打開的話，啥也看不見。

示例網站的主頁，具有可調節的滑塊，可在不同的布局技術之間進行切換。

當你打開這個 demo, 你會發現自己在一個基本布局的網站的主頁上。您可以調整左上角的滑塊以增強您的體驗。布局從非常基本到基於浮動的布局，再轉換為基於 flexbox 的布局，最後是基於 CSS Grid 的布局。

它不是最美麗或最複雜的設計，但它足以顯示基於瀏覽器功能的網站可以採用哪些形態。

此演示頁面使用 CSS Grid 布局構建，不使用任何前綴屬性或 polyfills。它對於 Internet Explorer（IE）8，極限模式下的 Opera Mini，UC 瀏覽器和當前最流行的現代瀏覽器的用戶來說，都是可以訪問的。如果你不期待在所有瀏覽器中都看到完全相同的效果，那麼你現在完全可以使用 CSS Grid 布局。但是期望使用 CSS Grid 在所有瀏覽器中都看到完全相同的效果是現在無法實現的。我很清楚，這種情況並不完全取決於我們的開發人員，但是我相信如果客戶明白其中的好處（面向未來的設計，更好的可訪問性和更高的性能），我們的客戶會很願意接受這些差異。除此之外，我相信我們的客戶和用戶 —— 感謝響應式設計 —— 已經了解到，網站在每個設備和瀏覽器中看起來都不一樣。

在接下來的部分中，我將向你展示如何構建 demo 的部分內容，以及為什麼有些效果只在 box 外有效。

邊注：為了讓這個 demo 支持 IE 8，我不得不多添加幾行 JavaScript 和 CSS（一個 HTML 5 墊片）。我沒辦法，因為 IE 8+ 聽起來比 IE 9+ 更令人印象深刻。

CSS Grid 布局和漸進增強

我們一起來深入了解我如何在頁面中心建立「四級增強」組件。

HTML

我將所有項目按邏輯順序放入到 section 中。該部分的第一個 section 中是標題，其次是四個小節。假設它們代表單獨的博客帖子，我把它們中的每一個都包含在一個 article 標籤中。每篇文章由一個標題（h3）和一個圖像鏈接組成。我在這裡使用 picture 元素，因為我想在視口足夠寬的情況下，為不同的用戶提供不同的圖像。在這，我們已經有了良好的漸進增強的第一個例子。如果瀏覽器不理解 picture 和 source，它仍然會顯示 img，這也是 picture 元素的一個子元素。

<section>n <h2>Four levels of enhancement</h2>n <article><h3>No Positioning</h3><a href="#"> <picture> <source srcset="320_480.jpg" media="(min-width: 600px)"> <img src="480_320.jpg" alt="image description"> </picture></a>n </article>n</section>n

浮動增強功能

所有的項目都在「四級增強」組件中，向左浮動。

在較大的屏幕上，如果所有項目彼此排列，則此組件的效果最好。為了支持不了解 flexbox 或 grid 的瀏覽器，我將其設為浮動，給它們設置了一定的 size 和 margin，並在最後一個浮動項目之後清除浮動。

article {nfloat: left;nwidth: 24.25%;n}nnarticle:not(:last-child) {nmargin-right: 1%;n}nnsection:after {nclear: both;ncontent: "";ndisplay: table;n}n

Flexbox 增強功能

「四個層次的漸進增強」中的所有項目都因 flexbox 的加入而得到了提升。

在這個例子中，我實際上不需要使用 flexbox 來增強組件的總體布局，因為浮動已經完成了我的需求。在設計中，標題在圖像的下邊，這可以通過 flexbox 實現。

article {n display: flex;n flex-direction: column;n}nnh3 {n order: 1;n}n

使用 flexbox 重新為各個項目進行排序時，我們必須非常謹慎我們應該僅將其用於視覺上的變化，並確保重新排序不會改變鍵盤或屏幕閱讀器用戶的體驗。

Grid 增強功能

「四個層次的漸進增強」中的所有項目都因 CSS Grid 的加入而得到了提升。

一切看起來都不錯，但標題仍然需要進行一些定位上的調整。有很多方法可以將標題放在第二個項目的正上方。我發現最簡單、最靈活的方式是使用 CSS Grid 布局。

首先，我畫了一個四列的網格，在父級容器上有一個 20 像素的凹槽。

section {n display: grid;n grid-template-columns: repeat(4, 1fr);n grid-gap: 20px;n}n

因為所有文章的寬度都是 24.25％，所以我為支持 CSS Grid 的瀏覽器重新設置了這個屬性。

@supports(display: grid) {n article {width: auto;n }n}n

然後，我把標題放在第一行和第二列。

h2 {n grid-row: 1;n grid-column: 2;n}n

為了去掉 Grid 的自動 auto-placement，我還將第二個 article 顯式地放在第二行和第二列（標題下）。

article:nth-of-type(2) {n grid-column: 2;n grid-row: 2 / span 2;n}n

最後，因為我想刪除標題和第二個項目之間的間距，所有其他項目必須跨兩行。

article {n grid-row: span 2;n}n

就是這樣。你可以在 Codepen 上看最終的布局5。

如果我需要讓這些代碼支持 IE 9+，那麼我們將總共需要八行代碼（其中三行實際上是 clearfix，並且是可重用的）。當你使用前綴的時候也要對比一下。

article {n float: left;n width: 24.25%;n}nn@supports(display: grid) {n article {width: auto;n }n}nnsection:after {n clear: both;n content: "";n display: table;n}n

這只是一個簡單的例子，而不是一個完整的項目，我知道一個網站有更複雜的組件。但是，想像一下，在所有的瀏覽器中構建一個布局效果幾乎一樣的項目需要多長時間。

你不需要覆蓋一切

在前面的例子中，width 是唯一一個必須重置的屬性。關於 grid（和 flexbox，順便說一下）的一個重要的事兒是，如果某些屬性被應用於 flex 或 grid 的項目內部，它們將失去原來的作用。例如 float，如果它應用於的元素在 grid 容器內，則不起作用。對於其他一些屬性也是如此：

display: inline-block
display: table-cell
vertical-align
column-* 屬性

更多內容請點擊查看 Rachel Andrew 寫的「Grid 回退和覆蓋。」

幾乎每個主流瀏覽器都支持 CSS 功能查詢。（查看大圖）。

如果你必須使用屬性覆蓋，那就是用 CSS 功能查詢。在大多數情況下，你只需要覆蓋 width 或 margin 等屬性。功能查詢的支持情況非常好，並且最好的是每個瀏覽器都支持網格。在這你不需要 Modernizr。

此外，你不需要將所有的 grid 屬性都放在功能查詢中，因為舊的瀏覽器會簡單的忽略他們不了解的屬性和值。

在我寫這個 demo 的時候，對我來說唯一感到有點棘手的是當有一個 flex 或 grid 容器使用了 clearfix 的。包含內容的偽元素也可以變為 flex 或 grid 項。它可能會，也可能不會影響你；只要知道它就好了。作為替代方案，你可以使用 overflow：hidden 來清除父級，如果這適用於你的話。

衡量漸進增強的成本

瀏覽器已經為我們做了很多漸進增強的工作。我已經提到 picture 元素，它返回到 img 元素。另一個例子是 email 欄位，如果瀏覽器不明白，它將返回一個簡單的 text 欄位。另一個例子是我在 demo 中使用的調節滑塊。在大多數瀏覽器中，它會被渲染為可調節的滑塊。例如，IE 9 中不支持輸入類型 range，但它仍然可以使用，因為它返回一個簡單的 input 欄位。用戶必須手動輸入正確的值，這不太方便，但它可以正常工作。

比較在 Chrome 和 IE 9 中如何呈現 range 輸入類型。

有些東西是瀏覽其所關注的，其他的則需要由我們負責

在準備 demo 的時候，我意識到，真正了解 CSS 是非常有幫助，而不僅僅是寫一些屬性，希望能夠在瀏覽器中獲得最佳的效果。越了解浮動，flexbox 和 grid 的工作原理，以及您對瀏覽器的了解越多，越容易實現漸進增強。

成為一個了解 CSS 的人，而不僅僅是使用 CSS 的人，將為你在工作中帶來巨大的優勢。
Rachel Andrew16

此外，如果漸進增強功能已經深入整合到您製作網站的過程中，那麼很難說會有多少額外的付出，因為這就是你做網站的方法。亞倫·古斯塔夫森（Aaron Gustafson）分享了他在文章「漸進增強的實際成本」和「Relative Paths podcast」中所做的一些項目的幾個故事。我強烈建議你閱讀並學習他的經驗。

Resilient Web Development