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

時間  2019-11-21
標籤 css 網格 系統 創造者 講述 故事 欄目 CSS 简体版
原文   原文鏈接

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

在 2017 年 10 月 17 日，微軟的 Edge 瀏覽器發佈了 CSS 網格系統。基於許多緣由，這是 CSS 歷史上的一個里程碑。首先，它意味着全部的主流瀏覽器如今都支持這個使人驚歎的佈局工具。這個很棒的案例體現了主流瀏覽器在統一標準上的成功以及跨瀏覽器之間的合做。可是最後，或許是最有趣的一點，此次事件將一個原本超過20年爲週期進行循環制定標準的過程，今後改寫。html

原本就不是一個新想法

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

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

「最初的 CSS 很是簡陋」，Bos 回想到，「CSS 自己只是一種在當時的小屏幕下建立文檔視圖的工具，20 年前，屏幕很小。因此，當咱們發現咱們或許能夠爲文檔建立樣式，咱們原覺得，既然有了一套建立樣式的系統方式，還能對文檔作什麼呢？」ios

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

「每一頁的內容是獨立的，可是每一頁都有一個肯定的佈局」 Bos 說。「每一頁的頁碼是在固定位置的。而且圖片老是靠左，靠右或者居中。咱們也想要模仿這樣。」git

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

再一次動情

隨着網格概念正在有條不紊的被 CSS 工做組討論，大多數人當時都但願其中的一個提案能夠最終被採納。而最終，真正被採納的提案是由一羣在微軟的開發者所提出的，他們一直在尋找一個健壯的佈局工具是爲了更好的開發他們 web 端的產品。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 網格系統的熱愛和動力在社區中得以保持。」

網格系統同時促進了傳統和非傳統的佈局方式。這裏有一個網格佈局的案例來自於 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、前端、後端、區塊鏈、產品、設計、人工智能等領域，想要查看更多優質譯文請持續關注 掘金翻譯計劃、官方微博、知乎專欄。

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程