北京网页设计：逐步增强CSS布局之从浮动到Flexbox到网格

2019.08.13 mf_web

114

我在最近几周听到的陈述和问题

“我什么时候可以开始使用CSS网格布局？”
“太糟糕了，我们需要多年才能在生产中使用网格。”
“我是否需要Modernizr来制作带有CSS网格布局的网站？”
“如果我今天想使用网格，我必须建立两到三个版本的网站。”
“渐进式增强在理论上听起来很棒，但我认为不可能在实际项目中实施。”
“累进增强需要多少费用？”

北京网页设计这些都是好问题，并非所有问题都很容易回答，但我很乐意分享我的方法。CSS网格布局模块是自响应式设计以来最令人兴奋的发展之一。如果对我们和我们的项目有意义的话，我们应该尽快利用它。

演示：逐步增强的布局

在详细阐述我对上述问题和陈述的看法之前，我想提出一个我做过的小演示。

免责声明：最好在具有大屏幕的设备上打开演示。你不会在智能手机上看到任何重要的东西。

使用Flexbox和CSS Grid逐步增强CSS布局。 — 示例网站的主页，带有可调滑块，可在不同的布局技术之间切换。

当您打开演示时，您会发现自己位于具有非常基本布局的网站的主页上。您可以调整左上角的滑块以增强体验。布局从非常基本到基于浮动的布局切换为flexbox布局，最后，成为使用网格的布局。

它不是最美丽或最复杂的设计，但它足以证明网站可以根据浏览器的功能采取哪些形状。

此演示页面使用CSS网格布局构建，不使用任何前缀属性或polyfill。它可以在Internet Explorer（IE）8，极端模式的Opera Mini，UC浏览器以及当然最流行的现代浏览器中为用户访问和使用。如果你不希望在每个浏览器中看到完全相同的外观，那么今天你可以完美地使用CSS网格布局，这无论如何都无法实现。我很清楚这个决定并不总是取决于我们的开发人员，但我相信，如果他们了解这些差异（面向未来的设计，更好的可访问性和更好的性能），我们的客户愿意接受这些差异。最重要的是，我相信我们的客户和用户 - 由于响应式设计 - 已经了解到网站在每个设备和浏览器中看起来都不一样。

在接下来的部分中，我将向您展示如何构建演示的各个部分以及为什么有些东西只是开箱即用。

快速注意：为了使页面在IE 8中工作，我必须添加几行JavaScript和CSS（一个HTML5垫片）。我无法抗拒，因为IE 8+听起来比IE 9+更令人印象深刻。

CSS网格布局和渐进增强

让我们深入了解如何在页面中心构建“ 四级增强 ”组件。

HTML

我开始将所有项目section按逻辑顺序排列。该部分的第一项是标题，后面是四个小节。假设它们代表不同的博客帖子，我将每个帖子都包含在一个article标签中。每篇文章都包含一个标题（h3）和一个链接图像。我在picture这里使用了元素，因为如果视口足够宽，我想为用户提供不同的图像。在这里，我们已经有了第一个良好的渐进式增强实例。如果浏览器不理解picture和source，它仍然会显示img，这也是的一个子picture元素。

<section>
  <h2>Four levels of enhancement</h2>
  <article><h3>No Positioning</h3><a href="#">  <picture>    <source srcset="320_480.jpg" media="(min-width: 600px)">    <img src="480_320.jpg" alt="image description">  </picture></a>
  </article></section>

复制

浮动增强功能

使用float构建的演示页面的一个组件 — “四级增强”组件中的所有项目都向左浮动

在较大的屏幕上，如果所有项目彼此相邻布局，则此组件的效果最佳。为了实现那些不了解flexbox或网格的浏览器，我浮动它们，给它们一个大小和一些边距，并在最后一个浮动项目后清除浮动。

article {
  float: left;
  width: 24.25%;}article:not(:last-child) {
  margin-right: 1%;}section:after {
  clear: both;
  content: "";
  display: table;}

复制

Flexbox增强功能

使用flexbox构建的演示页面的一个组件 — 使用flexbox增强了“四级增强”中的所有项目

在这个例子中，我实际上不需要使用flexbox来增强组件的总体布局，因为浮动已经完成了我需要的工作。在设计中，标题位于图像下方，这是Flexbox可以实现的。

article {
  display: flex;
  flex-direction: column;}h3 {
  order: 1;}

复制

使用flexbox重新排序项目时，我们必须非常谨慎。我们应该仅将它用于视觉变化，并确保重新排序不会改变键盘或屏幕阅读器用户的用户体验。

网格增强功能

现在一切看起来都不错，但标题还需要一些定位。有很多方法可以将标题放在第二个项目的正上方。我发现最简单，最灵活的方法是使用CSS网格布局。

首先，我绘制了一个四列网格，在父容器上有一个20像素的装订线。

section {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 20px;}

复制

因为所有文章的宽度仍然是24.25%，我为知道网格的浏览器重置了这个属性。

@supports(display: grid) {
  article {width: auto;
  }}

复制

然后，我将标题放在第一行和第二列。

h2 {
  grid-row: 1;
  grid-column: 2;}

复制

为了对抗网格的自动放置，我还将article第二行明确地放在第二行和第二列（标题下方）。

article:nth-of-type(2) {
  grid-column: 2;
  grid-row: 2 / span 2;}

复制

最后，为了消除标题和第二个项目之间的差距，所有其他项目必须跨越两行。

article {
  grid-row: span 2;}

复制

而已。您可以在Codepen上看到最终布局。

如果我提取额外的行，我需要使这个东西在IE 9+中工作，那么我们将总共得到8行（其中三行实际上是针对clearfix并且是可重用的）。将其与使用前缀时获得的开销进行比较。

article {
  float: left;
  width: 24.25%;}@supports(display: grid) {
  article {width: auto;
  }}section:after {
  clear: both;
  content: "";
  display: table;}

复制

我知道这只是一个简单的例子，而不是一个完整的项目，我知道一个网站有更复杂的组件。但是，想象一下构建一个在所有各种浏览器中看起来像素完全相同的布局需要多长时间。

你不必覆盖一切

在前面的示例中，width是唯一必须重置的属性。关于网格（和Flexbox，顺便说一下）的一个好处是，如果将某些属性应用于flex或网格项，它们就会失去它们的能力。float例如，如果应用的元素位于网格容器中，则无效。对于其他一些属性来说也是如此：

display: inline-block
display: table-cell
vertical-align
column-* 性能

有关详细信息，请查看惊人的Rachel Andrew的“Grid'Fallbacks'和Overrides” 。

表格显示了CSS功能查询的浏览器支持 — 每个主要浏览器都支持CSS功能查询。（图片：我可以使用）（查看大图）

如果必须覆盖属性，请使用要素查询。在大多数情况下，您只需要它们来覆盖诸如width或等属性margin。对功能查询的支持非常好，最好的部分是每个了解网格的浏览器都支持它们。你不需要Modernizr。

此外，您不必将所有网格属性放在要素查询中，因为较旧的浏览器将忽略它们不理解的属性和值。

在演示这个演示时，它对我来说有点棘手的唯一一次是有一个flex或grid容器，并且应用了clearfix。具有内容的伪元素也变为flex或网格项。它可能会或可能不会影响您; 只是要意识到这一点。作为替代方案，overflow: hidden如果适用于您，您可以清除父级。

衡量渐进增强的成本

浏览器已经为我们做了很多渐进式增强。我已经提到了picture元素，它回归到img元素。另一个例子是email输入字段，text如果浏览器不理解它，它将回退到一个简单的输入字段。另一个例子是我在演示中使用的范围滑块。在大多数浏览器中，它被渲染为可调滑块。range例如，IE 9中不支持输入类型，但它仍然可用，因为它回退到一个简单的input字段。用户必须手动输入正确的值，这不方便，但它可以工作。