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

時間 2019-11-16

原文原文鏈接

原文地址：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 將解釋如何用它們來鍛鍊咱們的創造力。javascript

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

這難道是咱們的「創造性」思惟能夠實現的最大限度嗎？這種想法讓我感到一陣沒法控制的悲傷。前端

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

現在，網頁設計的風貌已經徹底改變。咱們擁有又新潮又強大的工具 —— CSS 網格（CSS Grid），CSS 自定義屬性（CSS custom properties），CSS 圖形（CSS shapes）和 CSS 寫做模式（CSS writing-mode），咱們能夠用僅舉的這幾項工具來鍛鍊咱們的創造力。android

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

你早就已經知道網格對於網頁設計相當重要。可是你是否停下來問問本身，你主要使用網格去如何設計網頁？ios

咱們大多數的人都沒有思考這個問題。咱們一般習慣使用已經成爲咱們行業標準的 12 列網格。git

但爲何咱們使用相同的網格？
爲何網格由 12 列組成？
爲何咱們的網格大小相等？

咱們使用相同網格的理由多是：咱們並不想計算。github

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

爲了讓事情更簡單，咱們能夠採用網格框架。一開始，960gs 和 1440px 等框架容許咱們選擇八、九、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 來幫助咱們建立咱們想要的形狀。