[譯] 佈局的下一次革新

時間 2019-11-05

標籤佈局下一次革新简体版

原文原文鏈接

原文地址：The Layouts of Tomorrow

原文做者：mxbck

譯文出自：掘金翻譯計劃

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

譯者：MeFelixWang

校對者：IridescentMia

若是在過去幾年中你參加過任一網頁設計演講，你可能已經看過 Jon Gold 這篇著名的推文：css

它諷刺了今天不少網站看起來都同樣的事實，由於它們都遵循咱們共同決定使用的相同標準佈局實踐。創建博客？主欄，工具側邊欄。營銷網站？大圖，三個博眼球的框（必定是三個）。前端

當咱們回顧早期的網頁時，我認爲今天的網頁設計有更大的創造力。android

進入 CSS 網格

Grid 是網頁佈局上第一個真正的工具。到目前爲止，咱們所擁有的一切，從表格到浮動，從絕對定位到彈性盒子 —— 都是爲了解決不一樣的問題，咱們找到了使用和濫用它來進行佈局的方法。ios

這些新工具的重點不是使用不一樣的底層技術再次構建相同的東西。它有更多的潛力：它能夠重塑咱們對佈局的思考方式，使咱們可以在網頁上作一些全新的，不一樣的事情。git

我知道，當你長時間以某種方式構建東西時，很難進入一種新的思惟模式。咱們受過培訓，將網站視爲標題，內容和頁腳的組合。還有條紋和盒子。github

但爲了讓咱們的行業持續進步（以及讓咱們的工做有趣），偶爾退一步並從新思考咱們的工做方式是個好主意。web

若是咱們不這樣作，咱們仍然會使用間隔的 gif 圖和全大寫 <TABLE> 標籤來構建東西。😉後端

那麼，看起來會是什麼樣呢？

我在 dribbble 上尋找過讓佈局有所突破的想法。那種會讓像我這樣的前端開發人員乍一看眉頭緊鎖的設計。api

有不少很棒的做品 —— 這裏有一些我最喜歡的：瀏覽器

"Warehouse" by Cosmin Capitanu

"Fashion Boutique" by KREATIVA Studio

"Organic Juicy Co." by Broklin Onjei

"Travel Summary" by Piotr Adam Kwiatkowski

"Digital Walls" by Cosmin Capitanu

我特別喜歡最後一個。它讓我想起了 Windows 8 中風靡一時的「Metro Tiles」。它不只視覺上使人印象深入，並且很是靈活 —— 它能夠在手機，平板電腦上工做，在設計師的建議下，即便在巨大的電視屏幕上或 AR 中也能夠。

考慮到咱們今天擁有的工具，製做這樣的東西有多難？我想搞清楚，因而開始構建原型。

我試着在生產環境的真實約束下來實現它。所以，界面必須具備響應性，高性能和可訪問性。（儘管如此，它並不須要像素級還原，由於你懂的 —— 那是不可能的。）

結果以下：

你能夠在 Codepen 上查看最終結果。

👉 因爲這僅用於演示目的，所以我沒有爲舊版瀏覽器降級、打補丁。個人目標是在這裏測試現代 CSS 的功能，所以並不是全部功能都具備跨瀏覽器支持（以下所示）。我發現它在最新版本的 Firefox 或 Chrome 中效果最佳。

實現過程當中一些有趣的東西：

佈局

不出所料，「Metro Tiles」的關鍵因素是網格。整個佈局邏輯在此代碼塊下自適應：

.boxgrid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    grid-auto-rows: minmax(150px, auto);
    grid-gap: 2rem .5rem;

    &__item {
        display: flex;

        &--wide {
            grid-column: span 2;
        }
        &--push {
            grid-column: span 2;
            padding-left: 50%;
        }
    }
}
複製代碼

神奇的地方主要在第二行。repeat(auto-fit, minmax(150px, 1fr)) 響應地處理列建立，這意味着它將在一行中連續放入儘量多的盒子以確保它們與外邊緣對齊。

--push 修飾類用於實現設計的效果，其中一些盒子「跳過」一欄。因爲在沒有明確設置網格線的狀況下這是不可能的，我用了個技巧：實際的網格單元格跨越兩列，但只容許有足夠的空間來填充單元格。

動畫

原始設計中每節背景和每一個 tile 網格以不一樣的速度移動，產生了深度上的錯覺。沒什麼特別的，只是一些好的舊視差而已。

雖然這種效果一般是經過 Javascript 綁定滾動事件而後應用不一樣的 transform 樣式來實現的，但還有更好的方法：徹底用 CSS。

這裏的祕訣是利用 CSS 3D 變換將圖層沿 z 軸分開。Scott Kellum 和 Keith Clark 的這項技術其實是經過在滾動容器上使用 perspective 和在視差子元素上使用 translateZ 來實現的：

.parallax-container {
  height: 100%;
  overflow-x: hidden;
  overflow-y: scroll;

  /* set a 3D perspective and origin */
  perspective: 1px;
  perspective-origin: 0 0;
}

.parallax-child {
  transform-origin: 0 0;
  /* move the children to a layer in the background,
     then scale them back up to their original size */
  transform: translateZ(-2px) scale(3);
}
複製代碼

這種方法的一個巨大好處是提升了性能（由於它不會觸及帶有計算樣式的 DOM），其結果是減小了重繪及作到幾乎 60fps 的平滑視差滾動。

吸附點

CSS Scroll Snap Points 是一個有點實驗性的功能，但我認爲它很適合這種設計。基本上，你能夠告訴瀏覽器在文檔中滾動到接近某個元素的點時「吸附」到該元素上。目前支持很是有限，你最好的選擇是在 Firefox 或 Safari 中使用它。

目前有不一樣版本的規範，只有 Safari 支持最新的實現。Firefox 仍然使用較舊的語法。組合方法以下所示：

.scroll-container {
    /* current spec / Safari */
    scroll-snap-type: y proximity;

    /* old spec / Firefox */
    scroll-snap-destination: 0% 100%;
    scroll-snap-points-y: repeat(100%);
}
.snap-to-element {
    scroll-snap-align: start;
}
複製代碼

scroll-snap-type 告訴滾動容器沿着 y 軸（垂直方向）根據 proximity 「嚴格」地進行吸附。這使瀏覽器能夠決定是否可使用吸附點，以及是不是跳轉的好時機。

對於功能強大的瀏覽器，吸附點是一個小小的加強功能，而其餘瀏覽器只是簡單地降級爲默認滾動。

平滑滾動

惟一涉及 Javascript 的地方是在左側的菜單項或點擊頂部/底部的方向箭頭時處理平滑滾動時。這是從簡單的頁內錨連接 <a href="#vienna"> 跳轉到所選部分的漸進加強。

爲了實現動畫，我選擇使用 vanilla Element.scrollIntoView() 方法 (MDN Docs)。某些瀏覽器接受一個可選參數來使用「平滑」滾動行爲，而不是當即跳轉到目標部分。

scroll behaviour property 目前是一個工做草案，因此尚未廣泛支持。目前只有 Chrome 和 Firefox 支持此功能 —— 可是，若是須要，可使用補丁。

創造性思考

雖然這只是對可能性的一種解釋，但我確信使用咱們現有的工具能夠實現無數其餘創新想法。設計趨勢可能一如既往地來去匆匆; 但我確信認爲值得記住的是，網頁是一種流動的媒介。技術在不斷變化，爲何咱們的佈局保持不變？去探索吧。

[譯] 佈局的下一次革新

進入 CSS 網格

那麼，看起來會是什麼樣呢？

佈局

動畫

吸附點

平滑滾動

創造性思考

更多資源