大多数主流浏览器都支持了 CSS Grid 布局。自然地,规范也成为了大小会议的热门话题之一。在参与了一些关于 Grid 布局和渐进增强的讨论后,我认为使用它还是有很大的不确定性。我听到一些很有趣的问题和发言,我想在这篇文章中讨论讨论。
听到的声明和问题:
1、我什么时候可以开始使用 CSS grid 布局?
2、还需要好几年我才能在实际项目中使用 CSS Grid 布局,这太扯淡了。
3、为了使用 CSS Grid 布局,网站需要 Modernizr 吗?
4、如果我现在想使用 CSS Grid,那我需要为我的网站做两三个版本。
5、渐进增强在理论上听起来不错,但我认为在实际项目中不可能实现。
6、渐进增强的成本是多少?
这些都是很好的问题,并不是所有的都很容易回答,但我很乐于分享我的一些方法。CSS Grid 布局模块是响应式设计中最令人激动的发展之一。如果它对我们和我们的项目有意义,我们应尽快去用好它。
渐进增强布局
![b22b75c3b17a0574c10af4a1071d82e0.png](https://i-blog.csdnimg.cn/blog_migrate/c2bc7ac834027c18e41545da31b18326.jpeg)
示例网站的主页,具有可调节的滑块,可在不同的布局技术之间进行切换。
当你打开这个 demo, 你会发现自己在一个基本布局的网站的主页上。您可以调整左上角的滑块以增强您的体验。布局从非常基本到基于浮动的布局,再转换为 基于 flexbox 的布局,最后是基于 CSS Grid 的布局。
它不是最美丽或最复杂的设计,但它足以显示基于浏览器功能的网站可以采用哪些形态。
此演示页面使用 CSS Grid 布局构建,不使用任何前缀属性或 polyfills。
它对于 Internet Explorer(IE)8,极限模式下的 Opera Mini,UC 浏览器和当前最流行的现代浏览器的用户来说,都是可以访问的。
如果你不期待在所有浏览器中都看到完全相同的效果,那么你现在完全可以使用 CSS Grid 布局。但是期望使用 CSS Grid 在所有浏览器中都看到完全相同的效果是现在无法实现的。我很清楚,这种情况并不完全取决于我们的开发人员,但是我相信如果客户明白其中的好处(面向未来的设计,更好的可访问性和更高的性能),我们的客户会很愿意接受这些差异。
除此之外,我相信我们的客户和用户 —— 感谢响应式设计 —— 已经了解到,网站在每个设备和浏览器中看起来都不一样。
在接下来的部分中,我将向你展示如何构建 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 元素的一个子元素。
![2bb13ad0a161c41dfef63b055c4576f7.png](https://i-blog.csdnimg.cn/blog_migrate/55e1b55421c0c97d66c9bdd3b4bc395e.jpeg)
浮动增强功能
![9e72fc6f624692cdd4d2cd09bf6ed3f1.png](https://i-blog.csdnimg.cn/blog_migrate/bfca3efd8b7e46bfe3c8929494bebc58.jpeg)
所有的项目都在“四级增强”组件中,向左浮动。
在较大的屏幕上,如果所有项目彼此排列,则此组件的效果最好。为了支持不了解 flexbox 或 grid 的浏览器,我将其设为浮动,给它们设置了一定的 size 和 margin,并在最后一个浮动项目之后清除浮动。
![289687416b58fe96f6976ef6e3a0ab7a.png](https://i-blog.csdnimg.cn/blog_migrate/2d641818485483e457554d0e749577fd.jpeg)
Flexbox 增强功能
![82713bccd3abc905c8d5d4fdc9e7ea43.png](https://i-blog.csdnimg.cn/blog_migrate/6ee69688da3e903eebc30c0ca48248c1.jpeg)
“四个层次的渐进增强”中的所有项目都因 flexbox 的加入而得到了提升。
在这个例子中,我实际上不需要使用 flexbox 来增强组件的总体布局,因为浮动已经完成了我的需求。在设计中,标题在图像的下边,这可以通过 flexbox 实现。
article { display: flex; flex-direction: column;}h3 { order: 1;}
使用 flexbox 重新为各个项目进行排序时,我们必须非常谨慎 我们应该仅将其用于视觉上的变化,并确保重新排序不会改变键盘或屏幕阅读器用户的体验。
Grid 增强功能
![dba910c0e9a967ccb3847ba56cc14d73.png](https://i-blog.csdnimg.cn/blog_migrate/ddab422560d5c43e7a75c680439fe471.jpeg)
“四个层次的渐进增强”中的所有项目都因 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;}
如果我需要让这些代码支持 IE 9+,那么我们将总共需要八行代码(其中三行实际上是 clearfix,并且是可重用的)。当你使用前缀的时候也要对比一下。
![b38963de635e8a021e87414a541122ae.png](https://i-blog.csdnimg.cn/blog_migrate/792f63f0432688e541d17afedd04117f.jpeg)
这只是一个简单的例子,而不是一个完整的项目,我知道一个网站有更复杂的组件。但是,想像一下,在所有的浏览器中构建一个布局效果几乎一样的项目需要多长时间。
你不需要覆盖一切
在前面的例子中,width 是唯一一个必须重置的属性。关于 grid(和 flexbox,顺便说一下)的一个重要的事儿是,如果某些属性被应用于 flex 或 grid 的项目内部,它们将失去原来的作用。例如 float,如果它应用于的元素在 grid 容器内,则不起作用。对于其他一些属性也是如此:
- display: inline-block
- display: table-cell
- vertical-align
- column-* 属性
![4b9193c2030f9ae89b67fc785b13f014.png](https://i-blog.csdnimg.cn/blog_migrate/6f72661db0837a2767b4cfbe8044239c.jpeg)
几乎每个主流浏览器都支持 CSS 功能查询。
如果你必须使用属性覆盖,那就是用 CSS 功能查询。在大多数情况下,你只需要覆盖 width 或 margin 等属性。 功能查询的支持情况非常好,并且最好的是每个浏览器都支持网格。在这你不需要 Modernizr。
此外,你不需要将所有的 grid 属性都放在功能查询中,因为旧的浏览器会简单的忽略他们不了解的属性和值。
在我写这个 demo 的时候,对我来说唯一感到有点棘手的是当有一个 flex 或 grid 容器使用了 clearfix 的。包含内容的伪元素也可以变为 flex 或 grid 项。它可能会,也可能不会影响你;只要知道它就好了。作为替代方案,你可以使用 overflow:hidden 来清除父级,如果这适用于你的话。
衡量渐进增强的成本
浏览器已经为我们做了很多渐进增强的工作。我已经提到 picture 元素,它返回到 img 元素。另一个例子是 email 字段,如果浏览器不明白,它将返回一个简单的 text 字段。另一个例子是我在demo 中使用的调节滑块。在大多数浏览器中,它会被渲染为可调节的滑块。例如,IE 9 中不支持输入类型 range,但它仍然可以使用,因为它返回一个简单的 input 字段。用户必须手动输入正确的值,这不太方便,但它可以正常工作。
![e96b31295ae75c9053633bb2a2704cb7.png](https://i-blog.csdnimg.cn/blog_migrate/8084a72f27775261515b06ee727c0168.jpeg)
比较在 Chrome 和 IE 9 中如何呈现 range 输入类型。
有些东西是浏览其所关注的,其他的则需要由我们负责
在准备 demo 的时候,我意识到,真正了解 CSS 是非常有帮助,而不仅仅是写一些属性,希望能够在浏览器中获得最佳的效果。越了解浮动,flexbox 和 grid 的工作原理,以及您对浏览器的了解越多,越容易实现渐进增强。
成为一个了解 CSS 的人,而不仅仅是使用 CSS 的人,将为你在工作中带来巨大的优势。
摘要
我有一种感觉,我们中的一些人忘记了我们的工作是什么,甚至可能忘记我们实际做的“仅仅”是一份工作。我们不是摇滚明星,忍者,工匠或大师,我们所做的最终是将内容放在网上,让人们尽可能轻松地消费。
内容是我们创建网站的原因。
这听起来很无聊,我知道,但不一定是这样的。我们可以使用最热门的尖端技术和花哨的技术,只要我们不忘记我们在为谁做的网站:用户。我们的用户不一样,也不使用相同的设备,操作系统,浏览器,互联网提供商或输入设备。通过提供最基本的版本开始,我们可以从现代网络中获得最佳效果,而不会影响可访问性。
![a2a75a95d9c5a3c7791c826c02591359.png](https://i-blog.csdnimg.cn/blog_migrate/bc00fb264c3b387e17a35157de6efb9f.jpeg)
几乎每个主流浏览器都支持 CSS 功能查询。
Grid,例如,几乎在每个主流浏览器中都得到了支持,我们不应该等待好多年,直到覆盖率达到 100% 才在实际项目中使用它,因为那根本不存在。仅仅是因为 web 本就不是那么玩的。
Grid 非常好用。现在就开始使用吧!
截图
以下是各种浏览器的 demo 页面的截图:
![641c08f1256dc98f0eb97da43f46e4a1.png](https://i-blog.csdnimg.cn/blog_migrate/4599174e84a9cda98364572f7a4631fb.jpeg)
Internet Explorer 8, Windows 7
![cd764003f8ae125d80bbd39ab5c0fc9d.png](https://i-blog.csdnimg.cn/blog_migrate/cbe2512270aed4ea9fe5c8571807254c.jpeg)
Internet Explorer 9, Windows 7
![16ad945b33ce688cec51ba4628db1a7a.png](https://i-blog.csdnimg.cn/blog_migrate/34d8d5bde98f32c3d3096822cd368f90.jpeg)
Internet Explorer 10, Windows 7
![1b10b96b6a1a274ecdbf997e7b550321.png](https://i-blog.csdnimg.cn/blog_migrate/fdd65ae1239fdb1bbf73a197c4b57c64.jpeg)
Internet Explorer 11, Windows 8
![9a9cb6ba6987f2a0bbc675cc7ad0beec.png](https://i-blog.csdnimg.cn/blog_migrate/565b80b4645b40fa7c66a09bacb7d05c.jpeg)
Opera Mini 42 (Extreme), Android 7
![a8244df262c74a4d5a0e001e7b01aa6b.png](https://i-blog.csdnimg.cn/blog_migrate/1708c448e45925bb4d6d17fa089a1d25.jpeg)
UC Browser 11, Android 7