[譯] 新的 CSS 特性正在改變網頁設計

goooooooogle發表於2018-05-29

原文地址：New CSS Features That Are Changing Web Design

原文作者：Zell

譯文出自：掘金翻譯計劃

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

譯者：sophia

校對者：kezhenxu94 hannahGu

如今，網頁設計的風貌已經完全改變。我們擁有又新潮又強大的工具 —— CSS 網格/柵格（CSS Grid），CSS 自定義屬性（CSS custom properties），CSS 圖形（CSS shapes）和 CSS 寫作模式（CSS writing-mode），這裡僅舉此幾例 —— 這些都可以被用來鍛鍊我們的創造力。本文作者 Zell Liew 將解釋如何用它們來鍛鍊我們的創造力。

曾經有一段時間網頁設計變得單調乏味。設計師們和開發者們一次又一次地構建相同型別的網站，以至於我們被本行業的人嘲笑只會建立兩種型別的網站：

這難道是我們的“創造性”思維可以實現的最大限度嗎？這種想法讓我感到一陣無法控制的悲傷。

我不想承認這一點，但這也許是我們當時能完成的最好作品。也許是因為我們沒有合適的工具去進行創意設計導致的。網路的需求正在迅速發展，但我們被浮動（floats）和表格（tables）這些古老的技術所侷限。

如今，網頁設計的風貌已經完全改變。我們擁有又新潮又強大的工具 —— CSS 網格（CSS Grid），CSS 自定義屬性（CSS custom properties），CSS 圖形（CSS shapes）和 CSS 寫作模式（CSS writing-mode），我們可以用僅舉的這幾項工具來鍛鍊我們的創造力。

CSS 網格（CSS Grid）如何改變一切

你早就已經知道網格對於網頁設計至關重要。但是你是否停下來問問自己，你主要使用網格去如何設計網頁？

我們大多數的人都沒有思考這個問題。我們通常習慣使用已經成為我們行業標準的 12 列網格。

但為什麼我們使用相同的網格？
為什麼網格由 12 列組成？
為什麼我們的網格大小相等？

我們使用相同網格的理由可能是：我們並不想計算。

過去，在基於浮動的的網格中去建立一個三列網格。你需要計算每列的寬度，每個間隔的大小以及如何去放置這些網格項。然後，你需要在 HTML 中建立類（classes）以適當地設定它們的樣式。這樣做非常複雜。

為了讓事情更簡單，我們可以採用網格框架。一開始，960gs 和 1440px 等框架允許我們選擇 8、9、12 甚至 16 列的網格。後來，Bootstrap 在這場框架大戰之中勝出。由於 Bootstrap 值僅允許網格 12 列，並且想要改變這個規則是非常痛苦的過程，因此我們最終以 12 列作為網格標準。

但我們不應該責怪 Bootstrap。那是當時最好的辦法。誰不想要一個能夠以最小的努力工作就可以獲得的優良解決方案？隨著網格的問題解決，我們將注意力轉移到設計的其他方面，例如排版、顏色和可訪問性。

現在，隨著 CSS Grid 的出現，網格變得更加簡單。我們不再需要擔心網格中遇到的複雜計算。這些工作變得非常簡單，以至於我認為使用 CSS 建立網格比使用 Sketch 等設計工具更加容易！

為什麼呢？

假設你想製作一個 4 列的網格，每列的大小為 100 畫素。使用 CSS 網格，你可以在 grid-template-columns 宣告中寫四次 100px，之後一個 4 列網格就會被建立。

.grid {
  display: grid;
  grid-template-columns: 100px 100px 100px 100px;
  grid-column-gap: 20px;
}
複製程式碼

Screenshot of Firefox's grid inspector that shows four columns.

你可以通過在 grid-template-columns 中指定四次列寬來建立四個網格列。

如果你想要一個 12 列的網格，你只需要重複 100px 12 次。

.grid {
  display: grid;
  grid-template-columns: 100px 100px 100px 100px 100px 100px 100px 100px 100px 100px 100px 100px;
  grid-column-gap: 20px;
}
複製程式碼

Screenshot of Firefox's grid inspector that shows twelve columns.

使用 CSS Grid 建立 12 列網格。

如你所見，這段程式碼並不優雅，但我們（暫時還）並不關心優化程式碼質量，我們優先考慮設計方面的。對於任何人來說，CSS Grid 都很容易，即使是沒有編碼知識的設計師，也可以在網路上建立網格。

如果你想要建立具有不同寬度的網格列，只需在 grid-template-columns 宣告中指定所需的寬度，就搞定了。

.grid {
  display: grid;
  grid-template-columns: 100px 162px 262px;
  grid-column-gap: 20px;
}
複製程式碼

Screenshot of Firefox's grid inspector that shows three colums of different width.

建立不同寬度的列也是小菜一碟。

使網格具有響應性

在關於 CSS 網格的討論中，沒有不討論其響應性的。有幾種方法可以使 CSS Grid 具有響應性。一種方式（可能是最流行的方式）是使用 fr 單位。另一種方法是更改媒體查詢的列數。

fr 是代表一個片段的靈活長度單位。當你使用 fr 單位時，瀏覽器會分割開放空間並根據 fr 倍數將區域分配給列。這意味著要建立四個相同大小的列，你需要寫四次 1fr。

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-column-gap: 20px;
}
複製程式碼

GIF shows four columns created with the fr unit. These columns resize according to the available white space

用 fr 單位建立的網格遵守網格的最大寬度。（大圖預覽）

讓我們做一些計算來理解為什麼以上程式碼建立四個相等大小的列。

首先，我們假設網格的總可用空間為 1260px。

在為每列分配寬度之前，CSS Grid 需要知道有多少可用空間（或剩餘空間）。在這裡，它從 1260px 減去 grip-gap 宣告。由於每個間隙 20px，我們剩下 1200px 的可用空間。（1260 - （20 * 3）= 1200）。

接下來，將 fr 倍數考慮進來。在這個例子裡面，我們有四個 1fr 倍數，所以瀏覽器將 1200px 除以四。每列是 300 px。這就是為什麼我們得到四個相等的列。

但是，使用 fr 單元建立的網格並不總是相等的！

當你使用 fr 時，你需要知道每個 fr 單位是可用（或剩餘）空間的一個小片段。

如果你的元素比使用 fr 單位建立的任何列都要寬，則需要以不同的方式進行計算。

例如，下面例子中的網格具有一個大列和和三個小（但相等的）列，即使它是使用 grid-template-columns: 1fr 1fr 1fr 1fr 建立的。

請參閱 CodePen 上 Zell Liew（@zellwk）的 CSS Grid fr unit demo 1。

將 1200px 分成四部分併為每個 1fr 列分配 300px 的區域後，瀏覽器意識到第一個網格項包含 1000px 的影象。由於 1000px 大於 300px，瀏覽器會選擇將 1000px 分配給第一列。

這意味著，我們需要重新計算剩餘空間。

新的剩餘空間是 1260px - 1000px - 20px * 3 = 200px；然後根據剩餘部分的數量將這 200px 除以三。每個部分是 66px。我希望這能夠解釋為什麼 fr 單位不總是建立等寬列。

如果你希望 fr 單位每次都建立等寬列，則需要使用 minmax(0, 1fr) 去強制指定它。對於此特定示例，你還需要將影象的 max-width 屬性設定為 100%。

請參閱 CodePen 上 Zell Liew（@zellwk）的 CSS Grid fr unit demo 2

注意：Rachel Andrew 撰寫了一篇關於不同 CSS 值（min-content、max-content 和 fr 等）如何影響內容大小的文章。這篇文章值得一讀！

不等寬網格

只需更改 fr 倍數，就可以建立寬度不等的網格。下面是一個遵循黃金比例的網格，其中第二列是第一列的 1.618 倍，第三列是第二列的 1.618 倍。

.grid {
  display: grid;
  grid-template-columns: 1fr 1.618fr 2.618fr;
  grid-column-gap: 1em;
}
複製程式碼

GIF shows a three-column grid created with the golden ratio. When the browser is resized, the columns resize accordingly.

用黃金比例建立的三列網格。

在不同的斷點改變網格

如果你想要在不同的斷點處更改網格，則可以在媒體查詢中宣告新的網格。

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-column-gap: 1em;
}

@media (min-width: 30em) {
  .grid {
    grid-template-columns: 1fr 1fr 1fr 1fr;
  }
}
複製程式碼

使用 CSS Grid 建立網格很難嗎？要是產品經理知道是這麼簡單的話，設計師和開發人員早就被幹掉了。

基於高度的網格

之前根據網站的高度來製作網格是不可能的，因為我們沒有辦法獲取視口的高度。現在，通過視口單元（viewport units）、CSS Calc 和 CSS Grid，我們甚至可以根據視口高度製作網格。

在下面的演示中，我根據瀏覽器的高度建立了網格方形。

請參閱 CodePen 上 Zell Liew（@zellwk）的 Height based grid example。

Jen Simmons 有一個很棒的視訊，講述了四維空間設計 —— 使用 CSS Grid。我強烈建議你去看看。

網格項的放置

在過去，定位網格項是一種很大的痛苦，因為你必須計算 margin-left 屬性。

現在，使用 CSS Grid，你可以直接使用 CSS 放置網格項而無需額外的計算。

.grid-item {
  grid-column: 2; /* 放在第二列 */
}
複製程式碼

Screenshot of a grid item placed on the second column

在第二列放置一個專案。

你甚至可以通過 span 關鍵字告訴網格項應該佔用多少列。

.grid-item {
  /* 放在第二列，跨越 2 列 */
  grid-column: 2 / span 2;
}
複製程式碼

Screenshot of a grid item that's placed on the second column. It spans two columns

你可以使用 span 關鍵字來告訴網格項應該佔用的列數（或行數）。

啟示

CSS Grid 能夠使你能夠輕鬆地佈置事物，以便你可以快速地建立許多同一網站的不同變體。一個最好的例子是 Lynn Fisher 的個人主頁。

如果你想了解更多關於 CSS Grid 可以做什麼的內容，請檢視 Jen Simmon 的實驗室，在那裡她將探索如何使用 CSS Grid 和其他工具建立不同型別的佈局。

要了解關於 CSS Grid 的更多資訊，請檢視以下資源：

Master CSS Grid，Rachel Andrew 和 Jen Simmons 視訊教程
Layout Land，Jen Simmons 關於佈局的一系列視訊
CSS layout workshop，Rachel Andrew 一個 CSS 佈局課程
Learn CSS Grid，Jonathan Suh 一個關於 CSS Grid 的免費課程
Grid critters，Dave Geddes 一種學習 CSS Grid 的有趣方法

使用不規則形狀進行設計

我們習慣於在網頁上建立矩形佈局，因為 CSS 盒子模型是一個矩形。除了矩形之外我們還找到了建立簡單形狀的方法，例如三角形和圓形。

今天，我們不需要因為建立不規則形狀過於麻煩而止步不前。使用 CSS 形狀和 clip-path，我們可以毫不費力地建立不規則的形狀。

例如，Aysha Anggraini 嘗試使用 CSS Grid 和 clip path 建立一個 comic-strip-inspired 佈局。

<div class="wrapper">
  <div class="news-item hero-item">
  </div>
  <div class="news-item standard-item">
  </div>
  <div class="news-item standard-item">
  </div>
  <div class="news-item standard-item">
  </div>
</div>
複製程式碼

.wrapper {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: repeat(2, 1fr);
  grid-auto-rows: 1fr;
  max-width: 1440px;
  font-size: 0;
}

.hero-item,
.standard-item {
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}

.news-item {
  display: inline-block;
  min-height: 400px;
  width: 50%;
}

.hero-item {
  background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/53819/divinity-ori-sin.jpg');
}

.standard-item:nth-child(2) {
  background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/53819/re7-chris-large.jpg");
}

.standard-item:nth-child(3) {
  background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/53819/bioshock-large.jpg");
}

.standard-item:nth-child(4) {
  background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/53819/dishonored-large.jpg");
}

@supports (display: grid) {
  .news-item {
    width: auto;
    min-height: 0;
  }
  
  .hero-item {
    grid-column: 1 / span 2;
    grid-row: 1 / 50;
    -webkit-clip-path: polygon(0 0, 100% 0, 100% calc(100% - 75px), 0 100%);
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 75px), 0 100%);
  }

  .standard-item:nth-child(2) {
    grid-column: 1 / span 1;
    grid-row: 50 / 100;
    -webkit-clip-path: polygon(0 14%, 0 86%, 90% 81%, 100% 6%);
    clip-path: polygon(0 14%, 0 86%, 90% 81%, 100% 6%);
    margin-top: -73px;
  }

  .standard-item:nth-child(3) {
    grid-column: 2 / span 1;
    grid-row: 50 / 100;
    -webkit-clip-path: polygon(13% 6%, 4% 84%, 100% 100%, 100% 0%);
    clip-path: polygon(13% 6%, 4% 84%, 100% 100%, 100% 0%);
    margin-top: -73px;
    margin-left: -15%;
    margin-bottom: 18px;
  }

  .standard-item:nth-child(4) {
    grid-column: 1 / span 2;
    grid-row: 100 / 150;
    -webkit-clip-path: polygon(45% 0, 100% 15%, 100% 100%, 0 100%, 0 5%);
    clip-path: polygon(45% 0, 100% 15%, 100% 100%, 0 100%, 0 5%);
    margin-top: -107px;
  }
}
複製程式碼

請參閱 CodePen 上 Aysha Anggraini（@rrenula）的 Comic-book-style layout with CSS Grid。

Hui Jing 解釋瞭如何使用 CSS 形狀，使文字能夠沿著碧昂絲的曲線流動。

An image of Huijing's article, where text flows around Beyoncé.

如果你願意，文字可以在碧昂絲周圍流動！

如果你想深入挖掘，Sara Soueidan 的文章可以幫助你建立非矩形佈局。

CSS 形狀和 clip-path 為你提供無限的可能性來建立屬於你設計的且獨一無二的自定義形狀。不幸的是，在語法上，CSS 形狀和 clip-path 並不像 CSS Grid 那麼直觀。幸運的是，我們有諸如 Clippy 和 Firefox’s Shape Path Editor 來幫助我們建立我們想要的形狀。