[译] 布局的下一次革新

原文地址：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 网格

那么，看起来会是什么样呢？

布局

动画

吸附点

平滑滚动

创造性思考

更多资源