[譯] 由 CSS 網格系統的創造者們所講述的故事

Tivcrmn發表於2019-02-26
CSS

[譯] 由 CSS 網格系統的創造者們所講述的故事

一個來自編輯者的小提醒： 我們想要感謝 Microsoft Edge 團隊，因為他們分享了與許多對 CSS 網格系統的發展有傑出貢獻的專家的採訪手稿。在編輯這份關於 CSS 網格系統歷史的文章中，這些手稿十分珍貴。同時，你也可以在 Channel 9上觀看他們製作的關於這些採訪的短視訊 Creating CSS Grid。

在 2017 年 10 月 17 日，微軟的 Edge 瀏覽器釋出了 CSS 網格系統。基於許多原因，這是 CSS 歷史上的一個里程碑。首先，它意味著所有的主流瀏覽器現在都支援這個令人驚歎的佈局工具。這個很棒的案例體現了主流瀏覽器在統一標準上的成功以及跨瀏覽器之間的合作。但是最後，或許是最有趣的一點，這次事件將一個本來超過20年為週期進行迴圈制定標準的過程，從此改寫。

本來就不是一個新想法

現代的網格佈局系統自從工業革命以來就已經存在，網格一直是這麼多世紀以來使用的一種設計工具。就其本身而言，CSS 基於網格的佈局從一開始就不應該是一件令人震驚的事。

從 Bert Bos 博士處得知，他同時也是與 Håkon Wium Lie 一起的 CSS 共同創造者，他對於網格佈局已經思考過很久了。

“最初的 CSS 非常簡陋”，Bos 回想到，“CSS 本身只是一種在當時的小螢幕下建立文件檢視的工具，20 年前，螢幕很小。所以，當我們發現我們或許可以為文件建立樣式，我們原以為，既然有了一套建立樣式的系統方式，還能對文件做什麼呢？”

對於這個問題，書籍和雜誌中的佈局方法給了我們巨大的啟發。

“每一頁的內容是獨立的，但是每一頁都有一個確定的佈局” Bos 說。“每一頁的頁碼是在固定位置的。並且圖片總是靠左，靠右或者居中。我們也想要模仿這樣。”

在初期階段，瀏覽器的開發者們認為我們這個想法實現起來會太過複雜，然而網格佈局的概念逐漸地流行了起來。在 1996 年，Bos, Lie 和 Dave Raggett 共同提出了一個“frame-based（基於邊框的）”佈局模型。之後，在 2005 年，Bos 釋出了 Advanced Layout Module（高階佈局模組），此文件之後變成了 Template Layout Module（樣式佈局模組）。儘管在 web 設計的社群中有關於此的大量關注與熱情，但是沒有一個提案能夠真正在瀏覽器中實現。

再一次動情

隨著網格概念正在有條不紊的被 CSS 工作組討論，大多數人當時都希望其中的一個提案可以最終被採納。而最終，真正被採納的提案是由一群在微軟的開發者所提出的，他們一直在尋找一個健壯的佈局工具是為了更好的開發他們 web 端的產品。

Phil Cupp 當時一直是重新設計 Microsoft Intune（一款計算機管理工具）的 UI 團隊的負責人。Silverlight 是一個源於 Windows Presentation Foundation 的強大布局工具的瀏覽器外掛，而 Cupp 是 Silverlight 的狂熱粉絲，並且甚至當時一開始就打算以這種方式去重新構建新的 Microsoft Intune。然而之後，Microsoft 一直在 Windows 8 的計劃準備階段要使用 web 端的技術打造應用。在得知此之後，Cupp 想要 Intune 這款產品也照著做，但是他很快就意識到 web 現階段急需一款更出色的佈局工具。

於是，他加入了一個新的團隊，為了能夠專注於將已經存在於 Silverlight —— 一個類似於網格系統的佈局方式 —— 引入 web 端。有趣的是，團隊中的人已經意識到了這個需求。同時，許多開發者當時正在專注於 iPhones 和 iPads，這兩種裝置只需要開發者專注於兩種不同的並且不變的畫面大小（也有可能是 4 種，如果考慮橫豎屏）。於是，Windows 不得不支援大量的不同的螢幕大小，解析度和形狀因子。對了，還有可變化大小的螢幕。簡而言之，Microsoft 急切需要一個健壯並且靈活的佈局工具對於 web 端的設計，尤其假使 web 端 將會成為開發 Windows 原生應用的平臺。

在與不同的微軟團隊之間努力達成第一份草案之後，Cupp 和他的團隊釋出了一款網格佈局工具，即在 2011 年 IE10 釋出 -ms- 字首之後。他們緊隨其後釋出了草案 draft Grid Layout spec，隨後此草案也正式在 2012 年進入 W3C。

當然，這也不是第一次甚至也不是第三次 W3C 收到一份關於網格佈局的提案。但這次不同的是，他們還對草案進行了一次可評估的實現。不僅如此，我們，作為開發者，最終也有了可以真正上手的機會。網格佈局從此就不僅僅是理論上的可能性了。

少數的幾個具有前瞻性的 web 設計者和開發者比如在其中最重要的 W3C 的客邀教授 Rachel Andrew，開始試著對剛出爐的提案進行改進。

“我剛接觸到 CSS 網格佈局是在法國，一個由 Bert Bos 領導的工作室。並且我不會說法語，但是我看到了演示並且試著去操作” Andrew 回想到。“我看到他在說明……一個佈局模板的草案。我認為他真的在就印刷版而討論並且使用這種工具去建立印刷式的佈局，但是當我親眼看到那個草案時，我感覺，不，我認為這是 web 所需要的東西。這是我們真正需要並且可用的工具。 於是，我開始鑽研於此，並且開始逐漸懂得它的意圖，並且試著實現了一些簡單的例子。”

“之後，當我看到微軟對於網格系統的實現，我意識到這是一個真正可以用來開發並且向別人展示的工具。我當時想要嘗試這個新事物，不僅僅是因為有趣，也是因為我喜歡去在嘗試的同時也讓更多的人蔘與進來。事實上，我一直在這樣做，因為我知道這種提案總是曇花一現後就沒有人真正會繼續討論了，於是就再次消失了。但是，我絕對有信心網格佈局這個提案不會消失，這將會是被世人看到並且讓人激動的事物。令人欣慰的是，我們最終讓它進入了瀏覽器，使得更多的人可以使用它。”

草案的進化

由 Cupp 向 W3C 提案的並且已經在 IE10 上實現的草案，並不是我們現在的網格系統。它是通向正確方向的一小步，但遠沒有達到完美。

“Phil Cupp 的提案是一個十分有跡可循的系統，”Elika Etemad 回想到，他是 W3C 的受邀教授，也是 CSS 網格系統佈局模型的編輯者。“當時手頭只有少數需要處理的系統，並且都沒有名稱，沒有模板，什麼都沒有。但是有一個佈局演算法，他們堅信可以有效，因為他們已經進行了實驗性的實現。”

“Bert [Bos] 最開始想出的網格模型才是我加入 CSS 工作組的原因，”谷歌的一位 CSS 網格模型的編輯者 Tab Atkins 回想到。“在當時，我一直在學習許多糟糕的佈局小技巧並且也看到了使用 CSS 網格模型寫頁面的可能性。之後，我看到了 Phil Cupp 的關於網格模型的草稿，並且發現，基於它之後的演算法，它完美的解決了佈局的問題，我意識到這就是應該存在的事物。”

這同樣也是一個令人信服的提案，因為不同於之前的過於死板的佈局提案，這個提案是為了響應式的網格系統。

“你可以很清楚網格單元的大小，” Etemad 解釋到，“但是你也可以說，網格的大小就是內容所佔據的。”並且這也是我們需要去進一步發展的方向。

然而，這個草案並不是像許多 CSS 工作室認為的那麼的拿來即用。所以網格佈局的工作室期待引進一些之前的探索想法。

“我們真正喜歡 Bert [Bos] 的提案是因為網格佈局的優雅的互動實現，從而使得直觀上去佈局變得容易。” Etemad 說道。“這就像是 ASCII 藝術格式去建立一個圖片模板，你可以輸入你的程式碼，比如圖片的列寬和行高。你可以將此嵌入到相同的 ASCII 圖表，這也使得別人懂得你在幹什麼變得容易。”

當時是 CSS 工作組的共同主席的 Peter Linss 也建議將網格的 線 概念包含到提案中（而不僅僅只是討論 軌跡 ）。他相信加入這個熟悉的影象設計概念會使得這個提案對於設計者變得更加易於理解。

“當我們最開始設想 CSS 網格系統時，我們過於在一個以應用為主導的模型中考慮，”微軟的 Rossen Atanassov 回想到，之前她也是此提案的編輯者。“但是網格的概念已經不是新概念了，我意思是，網格已經存在很長時間了。並且傳統的網格型別一直是基於線段的。我們可能一直有些忽略線段了。當我們意識到可以將對於應用端的實現和對於網格排版印刷一方面的理論進行結合，對於我個人，是真正激勵我繼續發展網格系統的最 興奮 的瞬間之一。”

所以 CSS 工作組開始稍微調整微軟的建議去包含這些想法。最終的結果使得你可以認為網格系統是軌跡，或者線段，或者模板，甚至是三者的結合。

當然，達成這一目標並不容易。

打磨，不斷打磨

你可以想象到的是，在微軟的提議，Bos 的先進佈局，Linss 對於網格線段的新增這三種不同的想法中做折中，不是簡單的剪下和複製，這裡有許多比較微妙的小方面和邊界條件需要去確認。

“我認為一些比較微妙的東西在一開始就已經佔據了這三個不同提議的方方面面，我們一直想要去結合這三個提議並且產生出一個新的系統，一個足夠優雅接受所有提議的連貫的系統。”Etemad 說到。

一些想法從第一階段就是不合適於 CSS 網格系統。Bos 的概念，舉個例子，允許任意的對於網格佈局的繼承好像就是該網格的一個孩子一樣。這就是經常被引用作為“子網格”的特點，但是並沒有進入 CSS 網格佈局 1.0。

“子網格一直是最先在眾多被指出的提案中被提及的”，Atanassov 說到，“並且一直以來是一個被眷顧的提案但也遇到了一點困難在整個過程中。因為它使得提案的工作很大程度上的猶豫不決。同時也讓許多對其的開發人員望而卻步。但這也是最令我興奮的一個事情。並且我知道我們將會成功解決它並且它將會變得偉大。只不過要多花些時間。”

同樣，處理對映到網格線的內容有兩種選擇。一方面，您可以讓網格本身具有固定維度軌道，並根據溢位的內容調整溢位內容對映到哪個網格線結束。或者，您可以讓軌道增長以包含內容，以便它在預定義的網格線處結束。不能兩個兼而有之，因為它可以建立一個迴圈依賴，所以該小組決定擱置這個問題。

最終，鑑於 CSS 工作組對於提案的三個主要目標，我們做出了一些修改。如下：

  1. 功能強勁： 他們想要 CSS 網格系統讓設計者在表達他們的想法時，感到“以簡單的方式製作簡單的東西，並且使得設計複雜的事物變得可能”如同 Etemad 的想法一樣；
  2. 健壯性： 他們想要確保不會有任何的缺口使得佈局塌陷，滾動禁止，或者內容突然的消失變得可能；
  3. 還有效能卓越： 如果背後的演算法不能足夠快的去優雅的處理真實世界的情況，比如瀏覽器重設事件或是動態內容載入，他們知道，如果這樣的事情發生，將會使得使用者變得極其沮喪。

“這就是為什麼設計一個新的 CSS 佈局系統需要很多時間”，Etemad 說到。“這花費了許多時間，付出了許多努力，還有很多為其貢獻人的愛心。”

真正上場

在一個候選提議（又稱最後一版的草稿）能成為一個正式的提議（通俗地講就是標準），W3C 需要去檢視至少兩個獨立的，可共同使用的實現。微軟當時已經實現了他們的提議，但是內容已經修改了不少在那之上，他們也希望其他瀏覽器在他們投入更多的開發人員和精力去更新提議之前，能夠接過這個火炬。__為什麼？__其實，他們當時有一點擔心，因為另一個看起來很有前途的佈局提議：CSS 區域。

CSS 區域提供了一種方式，能夠在頁面中的一系列預定義的“區域”內流動，從而實現複雜的佈局。微軟在早前釋出了一款 CSS 區域的實現，同時在 IE10 之後加入了一個字首。一個小改動的支援 CSS 區域的版本也在 WebKit 中加入了。Safari 也跟隨著，和 Chrome 一樣（在那時仍然執行著 WebKit 核心）。但是之後谷歌在 Chrome 中放棄了，火狐也反對這個提案並且表示永遠不會進行開發。於是，這個想法現在被打入冷宮。甚至 Safari 在下一次版本更新時也會放棄對 CSS 區域的支援。簡單得說，微軟想要確保，在投入更多的開發人員之前，網格不會遭受之前 CSS 區域的命運。

“我們當時有開發人員立刻就說到，哇哦，這太棒了，我們一定要做。”Atanassov 回憶到。“但是這是一方面...說到，這確實很棒，我們應該做這個。於是下一步就是增加資源然後給開發人員付工資讓他們去真正地實現這個想法。”

“也有一些其他開發人員的想法 —— 其中一個是來自谷歌的提案編輯 —— 但是也有一些遲疑去貢獻程式碼，”微軟的 Greg Whitworth 回憶到，一個來自 CSS 工作組的成員。“貢獻程式碼才是真正重要的。”

一個有趣的形式變化是，媒體公司 Bloomberg 僱傭了 Igalia，一個開源專案的顧問，去同時幫助 Blink 和 WebKit 進行 CSS 網格系統的開發。

“回到2013年，[Bloomberg] 與我們進行接觸...因為他們當時有十分針對性的需求關於定義和使用類網格的結構，”同時是開發者和合作夥伴的 Sergio Villar Senin 回憶到。“他們主要是讓我們幫助他們實現 CSS 網格佈局系統的一些針對性的需求，並且也是為了 [Blink and WebKit] 去實現。”

“[Igalia 的工作] 的幫助是極大的，因為之後開發者可以發現這個提案是真的有可能幫助他們開發網站的工具，”Whitworth 補充到。

但是儘管有著兩個已經對於提案的實現，一些人還是仍然關心這個提案能否真正被使用。畢竟，僅僅是因為一個渲染引擎是開源的並不意味著它的負責人會接受每一次新的版本更新。並且即使他們同意，如同 CSS 區域經歷過的一樣，也不能保證這些功能繼續存在。幸運的是，許多設計者和開發者都對網格系統感興趣並且開始向瀏覽器提供商去施壓以便於實現這個新的佈局系統。

“CSS 網格佈局在那時有一個關鍵性的轉變” Whitworth 說到。“隨著 Rachel Andrew 的加入，在有關於 CSS 網格的網站 Grid by Example 上，他建立了許多樣例並且激起了人們的興趣，從而開始真正去推廣它並且向所有的 web 開發者展示網格系統到底能做什麼以及它是如何解決問題的。”

“之後，再過不久，Jen Simmons [一個在 Mozilla 的設計佈道師]建立了一個叫做 Labs 的網站，她放了許多她使用 CSS 網格系統做的樣例並且將對於 CSS 網格系統的熱愛和動力在社群中得以保持。”

[譯] 由 CSS 網格系統的創造者們所講述的故事

網格系統同時促進了傳統和非傳統的佈局方式。這裡有一個網格佈局的案例來自於 Jen Simmons 的實驗室，可以再 Edge 16 上瀏覽。如果你更喜歡在非 Windows 上用 Edge 瀏覽，你也可以在 BrowserStack 上瀏覽 (需要賬戶)。

隨著設計思想的領導者比如 Andrews 和 Simmons 不斷地陳述 CSS 網格系統功能的強大和多樣，web 設計者社群變得越來越活躍。他們開始在類似於 CodePen 的網站上，分享他們的想法並且開發他們自己的網格技巧。我們並不會經常花功夫在這一方面，但是開發者們的熱情能夠支援甚至去使得一個提案變成標準。

“我們可以去寫一個提案，我們可以去實現它，但是如果沒有開發者的實際需求或者具體對於功能的使用，無論我們付出多少的努力都沒有意義。” Whitworth 說到。

不幸的是，如同像 CSS 網格系統這樣的提案，對於其具體的實現的開銷經常會使得瀏覽器的提供商難以做出承諾。於是，沒有瀏覽器對於提案的具體實現，就沒有開發者去踩坑和實驗，也就很難激發大家的熱情。沒有了開發者的熱情，瀏覽器開發商就不情願投入資金去驗證是否這個想法能夠獲得利潤。我相信你能發現這個問題。實際上，這也是至少至今，為什麼 CSS 區域提案逐漸暗淡的原因之一（移動晶片組的效能是另一個被引用的原因）。

幸運的是，Bloomberg 願意去扮演捐助者的角色並且為這個 CSS 網格系統進行募捐。所以，靠著它的幫助，谷歌釋出了 CSS 網格系統的實現在 Chromium 56 安卓版，時間為 2017 年 1 月。隨後在 3 月初，谷歌也在 Chrome 上推出了網格系統，也就是 Mozilla 在 Firefox 上推出的兩天後。在當月結束之前，Opera 和 Safari 也支援了。

諷刺的是，最後一個支援的瀏覽器公司是微軟。但是在這周的早些時候他們也在 Edge 上釋出了。

“隨著在 web 平臺上 CSS 網格系統的真正出現，你一直在等一個機遇” Whitworth 說到，就在剛剛 Edge 支援網格系統之前。“你想要一個完美的提案，你也想要提案的開發者有趣，同時你也想要 web 開發者提出的許多需求。2016 年末到 2017 年初就是這樣一個甜蜜點。所有的事情都發生了。我們進一步升級了我們的實現並且激動的要再次釋出。”

“我從沒有想起某一個功能的釋出如同 CSS 網格系統一樣。每一個主流瀏覽器都將會在一年內釋出他們自己的實現，並且將會是可共同合作的形式，因為我們一直在標識後實現，測試，進一步開發新的功能，並且當這個新版本被認為是穩定的，所有的瀏覽器都會原生的支援。”

“隨著每一個新版本的釋出都幾乎同時”，Atkins 說到，“[網格系統]從一個想法，一個可以僅僅使用單一佈局就進行開發並且不需要擔心快速出現缺陷的想法...這已經是我想到的能夠達成這一階段的最快速度。”

網格系統對於 CSS 的意義

隨著網格系統的支援不再成為問題，我們可以（也應該）開始使用這個令人驚奇的工具。對於我們這種已經使用傳統 CSS 快二十年的人，其中一個挑戰就是，CSS 網格系統需要我們有一種新的對於佈局的思考模式。

“這已經不僅僅是附上你的外邊距值和屬性對於每一個獨立的元素並且擺放他們，” Bos 說到。“你現在可以有一個不同的模型，可以先設計佈局，然後將不同的元素拽入佈局中。”

“它是我們為 CSS 發明的最強大的佈局工具，” Atkins 說。“它使頁面佈局如此簡單易行...人們一直在尋求更好的佈局。僅僅是出於作者能力的原因，並且因為我們使用的小技巧並沒有像舊的方法那樣強大，只是把它放在一個很大的舊錶元素中 — 這是一個很受歡迎的原因；它讓你做強大的複雜佈局。這是維護最糟糕的事情，也是語義最糟糕的事情。而網格可以讓你恢復這種力量，這真是太棒了。”

“CSS 網格省略了我們必須做的所有複雜的事情為了實現基本佈局並使其看起來完全不必要，” Etemad 說道。“你可以直接與 CSS 引擎交談，而不需要中間翻譯。”

CSS 網格提供了很多功能，我們很多人才剛剛開始掌握。看看我們從哪裡開始會很有趣。

“我認為這將是變革性的，” Etemad 說。“它將把 CSS 變得返璞歸真，即樣式和佈局語言，將所有邏輯從標記中解放出來，並允許我們從一開始就一直試圖從內容和樣式中清晰地分離內容和樣式。”

“我對 CSS 佈局的未來感到興奮，” Whitworth 說。“CSS 網格不是終點；它實際上只是一個開始。在 IE 10中...[我們釋出了] CSS 區域以及 CSS Exclusions。我認為隨著網頁設計師開始越來越多地使用 CSS 網格，他們會意識到 為什麼 我們將所有這三個一起釋出。也許我們可以繼續我們用 CSS 網格系統做的事情，並繼續改進這些規範。讓供應商也希望實現這些。讓社群對他們感到興奮，並進一步推動網路佈局。”

Andrew 說：“我認為現在我們已經擁有了網格系統，Exclusions 也是絕對有意義的。”“它為我們提供了一種在[網格]中放置內容並在其周圍包裝文字的方法，而我們沒有任何其他方法可以做到這一點...然後這樣的東西就如同區域...我希望看到這種進步，因為...一旦我們能夠構建一個漂亮的網格結構，我們就可能希望通過它來傳播內容。我們沒有辦法做到這一點。”

“就我而言，這並不止於此；這只是開始。”

開始認識網格系統

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

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

相關文章