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

時間 2019-11-16

標籤漸進加強 css 佈局浮動 flexbox grid 欄目 CSS 简体版

原文原文鏈接

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

原文做者：Manuel Matuzović

譯文出自：掘金翻譯計劃

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

譯者：LeviDing

校對者：薛定諤的貓，LouisaNikita

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

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

「我何時能夠開始使用 CSS grid 佈局？」
「還須要好幾年我才能在實際項目中使用 CSS Grid 佈局，這太扯淡了。」
「爲了使用 CSS Grid 佈局，網站須要 Modernizr 嗎？」
「若是我如今想使用 CSS Grid，那我須要爲個人網站作兩三個版本。」
「漸進加強在理論上聽起來不錯，但我認爲在實際項目中不可能實現。」
「漸進加強的成本是多少？」

這些都是很好的問題，並非全部的都很容易回答，但我很樂於分享個人一些方法。CSS Grid 佈局模塊是響應式設計中最使人激動的發展之一。若是它對咱們和咱們的項目有意義，咱們應儘快去用好它。html

Demo: 漸進加強佈局

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

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

示例網站的主頁，具備可調節的滑塊，可在不一樣的佈局技術之間進行切換。
當你打開這個 demo, 你會發現本身在一個基本佈局的網站的主頁上。您能夠調整左上角的滑塊以加強您的體驗。佈局從很是基本到基於浮動的佈局，再轉換爲基於 flexbox 的佈局，最後是基於 CSS Grid 的佈局。

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

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

在接下來的部分中，我將向你展現如何構建 demo 的部份內容，以及爲何有些效果只在 box 外有效。css3

邊注：,爲了讓這個 demo 支持 IE 8，我不得很少添加幾行 JavaScript 和 CSS（一個 HTML 5 墊片）。我沒辦法，由於 IE 8+ 聽起來比 IE 9+ 更使人印象深入。git

CSS Grid 佈局和漸進加強

咱們一塊兒來深刻了解我如何在頁面中心創建「四級加強」組件。github

HTML

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

<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」中所作的一些項目的幾個故事。我強烈建議你閱讀並學習他的經驗。