渐进增强的CSS布局:从浮动到Flexbox到Grid(上)

时间:2017-09-13 15:39:53 点击: 0 评论:0 作者:LeviDing 来源:www.smashingmagazine.com

原文地址:https://www.smashingmagazine.com/2017/07/enhancing-css-layout-floats-flexbox-grid/

原文作者:Manuel Matuzovi?

译者:LeviDing

校对者:薛定谔的猫,LouisaNikita

最近几周听到的声明和问题:
  • 我什么时候可以开始使用 CSS grid 布局?

  • 还需要好几年我才能在实际项目中使用 CSS Grid 布局,这太扯淡了。

  • 为了使用 CSS Grid 布局,网站需要 Modernizr 吗?

  • 如果我现在想使用 CSS Grid,那我需要为我的网站做两三个版本。

  • 渐进增强在理论上听起来不错,但我认为在实际项目中不可能实现。

  • 渐进增强的成本是多少?

这些都是很好的问题,并不是所有的都很容易回答,但我很乐于分享我的一些方法。CSS Grid 布局模块是响应式设计中最令人激动的发展之一。如果它对我们和我们的项目有意义,我们应尽快去用好它。

Demo:渐进增强布局

在详细阐述我对上述问题的想法之前,我想介绍一下我做的一个小的 demo。

注意: 最好在配备有大屏幕的设备上打开上面这个 demo。你用手机打开的话,啥也看不见。

可在不同的布局技术之间进行切换

示例网站的主页,具有可调节的滑块,可在不同的布局技术之间进行切换。

当你打开这个 demo, 你会发现自己在一个基本布局的网站的主页上。您可以调整左上角的滑块以增强您的体验。布局从非常基本到基于浮动的布局,再转换为 基于 flexbox 的布局,最后是基于 CSS Grid 的布局。

它不是最美丽或最复杂的前端设计,但它足以显示基于浏览器功能的网站可以采用哪些形态。

此演示页面使用 CSS Grid 布局构建,不使用任何前缀属性或 polyfills。它对于 Internet Explorer(IE)8,极限模式下的 Opera Mini,UC 浏览器和当前最流行的现代浏览器的用户来说,都是可以访问的。如果你不期待在所有浏览器中都看到完全相同的效果,那么你现在完全可以使用 CSS Grid 布局。但是期望使用 CSS Grid 在所有浏览器中都看到完全相同的效果是现在无法实现的。我很清楚,这种情况并不完全取决于我们的编程开发人员,但是我相信如果客户明白其中的好处(面向未来的web设计,更好的可访问性和更高的性能),我们的客户会很愿意接受这些差异。除此之外,我相信我们的客户和用户 —— 感谢响应式设计 —— 已经了解到,网站在每个设备和浏览器中看起来都不一样。

在接下来的部分中,我将向你展示如何构建 demo 的部分内容,以及为什么有些效果只在 box 外有效。

边注:为了让这个 demo 支持 IE 8,我不得不多添加几行 JavaScript 和 CSS(一个 HTML 5 垫片)。我没办法,因为 IE 8+ 听起来比 IE 9+ 更令人印象深刻。

CSS Grid 布局和渐进增强

我们一起来深入了解我如何在页面中心建立“四级增强”组件。

HTML

我将所有项目按逻辑顺序放入到 section 中。该部分的第一个 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>
浮动增强功能

四级增强组件

所有的项目都在“四级增强”组件中,向左浮动。

在较大的屏幕上,如果所有项目彼此排列,则此组件的效果最好。为了支持不了解 flexbox 或 grid 的浏览器,我将其设为浮动,给它们设置了一定的 size 和 margin,并在最后一个浮动项目之后清除浮动。

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 重新为各个项目进行排序时,我们必须非常谨慎 我们应该仅将其用于视觉上的变化,并确保重新排序不会改变键盘或屏幕阅读器用户的体验。

Grid 增强功能

Grid 增强功能

“四个层次的渐进增强”中的所有项目都因 CSS Grid 的加入而得到了提升。

一切看起来都不错,但标题仍然需要进行一些定位上的调整。有很多方法可以将标题放在第二个项目的正上方。我发现最简单、最灵活的方式是使用 CSS Grid 布局。

首先,我画了一个四列的网格,在父级容器上有一个 20 像素的凹槽。

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

因为所有文章的宽度都是 24.25%,所以我为支持 CSS Grid 的浏览器重新设置了这个属性。

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

然后,我把标题放在第一行和第二列。

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

为了去掉 Grid 的自动 auto-placement,我还将第二个 article 显式地放在第二行和第二列(标题下)。

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

最后,因为我想删除标题和第二个项目之间的间距,所有其他项目必须跨两行。

article {
  grid-row: span 2;}

就是这样。你可以在 Codepen 上看最终的布局5,传送门:https://codepen.io/matuzo/pen/PjYKXW?editors=1100

如果我需要让这些代码支持 IE 9+,那么我们将总共需要八行代码(其中三行实际上是 clearfix,并且是可重用的)。当你使用前缀的时候也要对比一下。

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

这只是一个简单的例子,而不是一个完整的项目,我知道一个网站有更复杂的组件。但是,想像一下,在所有的浏览器中构建一个布局效果几乎一样的项目需要多长时间。

你不需要覆盖一切

在前面的例子中,width 是唯一一个必须重置的属性。关于 grid(和 flexbox,顺便说一下)的一个重要的事儿是,如果某些属性被应用于 flex 或 grid 的项目内部,它们将失去原来的作用。例如 float,如果它应用于的元素在 grid 容器内,则不起作用。对于其他一些属性也是如此:

  • display: inline-block

  • display: table-cell

  • vertical-align

  • column-* 属性

更多内容请点击查看 Rachel Andrew 写的“Grid 回退和覆盖”,传送门:https://rachelandrew.co.uk/css/cheatsheets/grid-fallbacks

几乎每个主流浏览器都支持 CSS 功能查询

几乎每个主流浏览器都支持 CSS 功能查询。

如果你必须使用属性覆盖,那就是用CSS功能查询。在大多数情况下,你只需要覆盖width或margin等属性。 功能查询的支持情况非常好,并且最好的是每个浏览器都支持网格。在这你不需要Modernizr。

此外,你不需要将所有的grid属性都放在功能查询中,因为旧的浏览器会简单的忽略他们不了解的属性和值。

在我写这个demo的时候,对我来说唯一感到有点棘手的是当有一个flex或grid容器使用了clearfix的。包含内容的伪元素也可以变为flex或grid项。它可能会,也可能不会影响你;只要知道它就好了。作为替代方案,你可以使用 overflow:hidden来清除父级,如果这适用于你的话。

未完待续,济南SEO整理编辑...

关键词  布局

评论

"渐进增强的CSS布局:从浮动到Flexbox到Grid(上)"的0条评论

点击刷新