[译] 新的 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 将解释如何用它们来锻炼咱们的创造力。javascript

曾经有一段时间网页设计变得单调乏味。设计师们和开发者们一次又一次地构建相同类型的网站，以致于咱们被本行业的人嘲笑只会建立两种类型的网站：css

这难道是咱们的“创造性”思惟能够实现的最大限度吗？这种想法让我感到一阵没法控制的悲伤。前端

我不想认可这一点，但这也许是咱们当时能完成的最好做品。也许是由于咱们没有合适的工具去进行创意设计致使的。网络的需求正在迅速发展，但咱们被浮动（floats）和表格（tables）这些古老的技术所局限。java

现在，网页设计的风貌已经彻底改变。咱们拥有又新潮又强大的工具 —— CSS 网格（CSS Grid），CSS 自定义属性（CSS custom properties），CSS 图形（CSS shapes）和 CSS 写做模式（CSS writing-mode），咱们能够用仅举的这几项工具来锻炼咱们的创造力。android

CSS 网格（CSS Grid）如何改变一切

你早就已经知道网格对于网页设计相当重要。可是你是否停下来问问本身，你主要使用网格去如何设计网页？ios

咱们大多数的人都没有思考这个问题。咱们一般习惯使用已经成为咱们行业标准的 12 列网格。git

但为何咱们使用相同的网格？
为何网格由 12 列组成？
为何咱们的网格大小相等？

咱们使用相同网格的理由多是：咱们并不想计算。github

过去，在基于浮动的的网格中去建立一个三列网格。你须要计算每列的宽度，每一个间隔的大小以及如何去放置这些网格项。而后，你须要在 HTML 中建立类（classes）以适当地设置它们的样式。这样作很是复杂。web

为了让事情更简单，咱们能够采用网格框架。一开始，960gs 和 1440px 等框架容许咱们选择八、九、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 来帮助咱们建立咱们想要的形状。

Clippy 可帮助你使用 clip-path 轻松建立自定义形状。

使用 CSS 的 `writing-mode` 切换文本流

咱们习惯于在网络上看到从左到右的文字排版，由于网络一开始主要是为讲英语的人们制做的。

但有些语言不是朝这个方向进行文字排版的。例如，中文能够自上而下阅读，也能够从右到左阅读。

CSS 的 writing-mode 可使文本按照每种语言原生的方向流动。Hui Jing 尝试了一种中国式布局，在一个名为 Penang Hokkien 的网站上自上而下，从右到左流动。你能够在她的文章“The One About Home”中阅读更多关于她的实验。

除了文章以外，Hui Jing 在排版和 writing-mode 方面进行了精彩的演讲，“When East Meets West: Web Typography and How It Can Inspire Modern Layouts”。我强烈建议你观看它。

槟城福建人（Penang Hokkien）表示中文文本能够从上到下，从右到左书写。

即便你不设计像中文那样语言，也不意味着你没法将 CSS 的 writing-mode 应用于英文。早在2016年，当我建立 Devfest.asia 时，我灵光一闪，选择使用 writing-mode 旋转文字。

标签是使用 writing-mode 和转换建立的。

Jen Simmons 的实验室也包含许多关于 writing-mode 的实验。我强烈建议你也看一下。

Jen Simmon 实验室的图片显示了 Jan Tschichold。

努力和创造力能令人走得更远

尽管新的 CSS 工具颇有帮助，但你并非必定须要它们中的任何一个才能建立独特的网站。一点点聪明才智和一些努力都须要走很长的路。

例如，在 Super Silly Hackathon 中，Cheeaun 将整个网站旋转 -15 度，当你在阅读网站时，你会看起来像个傻子。

若是你想进入 Super Silly Hackathon，Cheeaun 会确保你看起来很傻。

Darin Senneff 制做了一个带有一些三角和 GSAP 的动画登陆头像。看看这只猿是多么的可爱，以及当你的鼠标光标位于密码框时它是如何遮住眼睛的。卡哇伊！

当我为个人课程 Learn JavaScript 建立销售页面时，我添加了让 JavaScript 学习者感到宾至如归的元素。

我使用 function 语法来建立课程包，而不是普通地编写有关课程包的信息。

总结

独特的网页设计不只仅是布局设计，而是关于设计如何与内容整合。只需付出一点努力和创造性，咱们全部人均可以创造独一无二的设计并广而告之，现在咱们可使用的工具让咱们的工做更轻松。

问题是，你是否足够在乎制做出独一无二的设计呢？我但愿你是。

若是发现译文存在错误或其余须要改进的地方，欢迎到掘金翻译计划对译文进行修改并 PR，也可得到相应奖励积分。文章开头的 本文永久连接 即为本文在 GitHub 上的 MarkDown 连接。

掘金翻译计划是一个翻译优质互联网技术文章的社区，文章来源为掘金上的英文分享文章。内容覆盖 Android、iOS、前端、后端、区块链、产品、设计、人工智能等领域，想要查看更多优质译文请持续关注掘金翻译计划、官方微博、知乎专栏。