[譯] 漸進增強的 CSS 佈局：從浮動到 Flexbox 到 Grid

LeviDing發表於2017-08-07

原文地址：Progressively Enhancing CSS Layout: From Floats To Flexbox To Grid

原文作者：Manuel Matuzović

譯文出自：掘金翻譯計劃

本文永久連結：github.com/xitu/gold-m…

譯者：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>
  <h2>Four levels of enhancement</h2>
  <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>
  </article>
</section>複製程式碼

浮動增強功能

所有的專案都在“四級增強”元件中，向左浮動。

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

article {
  float: left;
  width: 24.25%;
}

article:not(:last-child) {
  margin-right: 1%;
}

section:after {
  clear: both;
  content: "";
  display: table;
}複製程式碼

Flexbox 增強功能

“四個層次的漸進增強”中的所有專案都因 flexbox 的加入而得到了提升。

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

article {
  display: flex;
  flex-direction: column;
}

h3 {
  order: 1;
}複製程式碼

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

Grid 增強功能

“四個層次的漸進增強”中的所有專案都因 CSS Grid 的加入而得到了提升。

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

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

section {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 20px;
}複製程式碼

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

@supports(display: grid) {
  article {width: auto;
  }
}複製程式碼

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

h2 {
  grid-row: 1;
  grid-column: 2;
}複製程式碼

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

article:nth-of-type(2) {
  grid-column: 2;
  grid-row: 2 / span 2;
}複製程式碼

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

article {
  grid-row: span 2;
}複製程式碼

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

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

article {
  float: left;
  width: 24.25%;
}

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

section:after {
  clear: both;
  content: "";
  display: table;
}複製程式碼

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

你不需要覆蓋一切

在前面的例子中，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 Andrew 16

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