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

來自專欄掘金翻譯計劃122 人贊了文章

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

原文作者：Zell

譯文出自：掘金翻譯計劃

本文永久鏈接：https://github.com/xitu/gold-miner/blob/master/TODO1/future-of-web-design.md

譯者：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;}

你可以通過在 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;}

使用 CSS Grid 創建 12 列網格。

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

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

.grid { display: grid; grid-template-columns: 100px 162px 262px; grid-column-gap: 20px;}

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

使網格具有響應性

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

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

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

用 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;}

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

在不同的斷點改變網格

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

.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; /* 放在第二列 */}

在第二列放置一個項目。

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

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

你可以使用 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 形狀，使文本能夠沿著碧昂絲的曲線流動。

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

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

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

Clippy 可幫助你使用 clip-path 輕鬆創建自定義形狀。

使用 CSS 的 writing-mode 切換文本流

我們習慣於在網路上看到從左到右的文字排版，因為網路一開始主要是為講英語的人們製作的。

但有些語言不是朝這個方向進行文字排版的。例如，中文可以自上而下閱讀，也可以從右到左閱讀。

CSS 的 writing-mode 可以使文本按照每種語言原生的方向流動。Hui Jing 嘗試了一種中國式布局，在一個名為 Penang Hokkien 的網站上自上而下，從右到左流動。你可以在她的文章「The One About Home」中閱讀更多關於她的實驗。

除了文章之外，Hui Jing 在排版和 writing-mode 方面進行了精彩的演講，「When East Meets West: Web Typography and How It Can Inspire Modern Layouts」。我強烈建議你觀看它。

檳城福建人（Penang Hokkien）表示中文文本可以從上到下，從右到左書寫。

即使你不設計像中文那樣語言，也不意味著你無法將 CSS 的 writing-mode 應用於英文。早在2016年，當我創建 Devfest.asia 時，我靈光一閃，選擇使用 writing-mode 旋轉文字。

標籤是使用 writing-mode 和轉換創建的。

Jen Simmons 的實驗室 也包含許多關於 writing-mode 的實驗。我強烈建議你也看一下。

Jen Simmon 實驗室的圖片顯示了 Jan Tschichold。

努力和創造力能使人走得更遠

儘管新的 CSS 工具很有幫助，但你並不是一定需要它們中的任何一個才能創建獨特的網站。一點點聰明才智和一些努力都需要走很長的路。

例如，在 Super Silly Hackathon 中，Cheeaun 將整個網站旋轉 -15 度，當你在閱讀網站時，你會看起來像個傻子。

如果你想進入 Super Silly Hackathon，Cheeaun 會確保你看起來很傻。

Darin Senneff 製作了一個帶有一些三角和 GSAP 的動畫登錄頭像。看看這隻猿是多麼的可愛，以及當你的滑鼠游標位於密碼框時它是如何遮住眼睛的。卡哇伊！

當我為我的課程 Learn JavaScript 創建銷售頁面時，我添加了讓 JavaScript 學習者感到賓至如歸的元素。

我使用 function 語法來創建課程包，而不是普通地編寫有關課程包的信息。

總結

獨特的網頁設計不僅僅是布局設計，而是關於設計如何與內容整合。只需付出一點努力和創造性，我們所有人都可以創造獨一無二的設計並廣而告之，如今我們可以使用的工具讓我們的工作更輕鬆。

問題是，你是否足夠在意製作出獨一無二的設計呢？我希望你是。

如果發現譯文存在錯誤或其他需要改進的地方，歡迎到 掘金翻譯計劃 對譯文進行修改並 PR，也可獲得相應獎勵積分。文章開頭的 本文永久鏈接 即為本文在 GitHub 上的 MarkDown 鏈接。

掘金翻譯計劃 是一個翻譯優質互聯網技術文章的社區，文章來源為 掘金 上的英文分享文章。內容覆蓋 Android、iOS、前端、後端、區塊鏈、產品、設計、人工智慧等領域，想要查看更多優質譯文請持續關注 掘金翻譯計劃、官方微博、知乎專欄。

推薦閱讀：