[译] 新的 CSS 特性正在改变网页设计

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

原文作者：Zell

译文出自：掘金翻译计划

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

译者：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 来帮助我们创建我们想要的形状。