css网格_CSS网格的逐步增强

最新推荐文章于 2024-07-30 20:07:10 发布

cumian9828

最新推荐文章于 2024-07-30 20:07:10 发布

阅读量116

点赞数

文章标签： java python css html vue ViewUI

原文链接：https://www.freecodecamp.org/news/progressive-enhancement-with-css-grid-8138d4c7508c/

版权

css网格

CSS Grid (Grid) has been out for some time now, with full support in major modern browsers. I’ll leave others to dive into why it’s so great and what new design possibilities it makes so easy to explore. If you have been looking for the best way to support responsive web designs, I’ve yet to see anyone that doesn’t love Grid. It’s simple to use, yet extremely powerful and flexible.

CSS Grid(网格)已经存在一段时间了，在主要的现代浏览器中提供了全面的支持。我将让其他人深入探讨为什么它如此出色，以及它使得如此容易探索的新设计可能性。如果您一直在寻找支持响应式Web设计的最佳方法，那么我还没有看到任何不喜欢Grid的人。它使用简单，但功能强大且灵活。

But, I hear you say, a lot of our users aren’t using the most up-to-date browser versions, or are in markets where Chrome/Firefox don’t hold a majority share. And, really, is re-writing all our old code really worth it?

但是，我听到您说过，我们的许多用户都没有使用最新的浏览器版本，或者在Chrome / Firefox所占份额不大的市场中。而且，真的，重新编写我们所有的旧代码真的值得吗？

I felt similarly, until hearing a great talk given by Natalya Shelburne. She described how she started using CSS Grid alongside Bootstrap, without losing support for older browsers, by enhancing rather than deleting old CSS.

直到听到娜塔莉亚·谢尔本 ( Natalya Shelburne)的精彩演讲，我才有类似的感觉。她描述了如何通过增强而不是删除旧CSS来开始将CSS Grid与Bootstrap结合使用，而又不失去对旧浏览器的支持。

Importantly, this is without using any JavaScript polyfills, but using pure CSS. As Rachel Andrew mentions:

重要的是，这不使用任何JavaScript polyfill，而是使用纯CSS。正如雷切尔·安德鲁(Rachel Andrew)所提到的：

As we already know, the browsers that don’t support grid are older, slower browsers or browsers most often found on lower powered devices in emerging markets. Why would you force a bunch of JavaScript onto those devices?

我们已经知道， 不支持网格的浏览器是较旧 ，较慢的浏览器，或者是新兴市场中功能较低的设备上最常见的浏览器。 您为什么要在这些设备上强制使用一堆JavaScript？

Natalya describes how “feature queries” can be used to implement Grid in browsers that do support it, without losing existing functionality. MDN refers to this as “progressive enhancement”, stating that:

Natalya描述了如何使用“ 功能查询 ”在支持它的浏览器中实现Grid而不丢失现有功能。 MDN将此称为“ 渐进增强 ”，指出：

It is worth noting that you do not have to use grid in an all or nothing way. You could start by simply enhancing elements in your design with grid, that could otherwise display using an older method.

值得注意的是，您不必完全或完全不使用网格。您可以从简单地使用网格增强设计中的元素开始，否则可以使用较旧的方法进行显示。

使用网格 (Using Grid)

So, how do we go about this?

那么，我们该如何处理呢？

In a previous post, I described a simple approach to “keep your footer where it belongs.” This avoids the problems seen when a page’s main content is too small to push a footer to the bottom of the page.

在上一篇文章中，我描述了一种简单的方法“ 将页脚保持在其位置 ”。这样可以避免页面的主要内容太小而无法将页脚推到页面底部时出现的问题。

This provides a chance to show how a feature query can be used to move to using Grid.

这提供了展示如何将要素查询用于使用Grid的机会。

It’s important to note that this is an example of how you could move to using Grid in an existing codebase, not why it is a powerful tool. This example is used because it is small — so it is possible to understand the how without distractions found in a larger codebase.

重要的是要注意 ，这是一个示例， 说明了如何在现有代码库中使用Grid， 而不是为什么 它是一个强大的工具。使用此示例是因为它很小-因此可以了解如何不会在较大的代码库中发现干扰。

Realistically, Grid provides no great improvement here. The benefits of using a new tool should be discussed, rather than just implementing it because it is cool!

实际上，Grid在这里没有太大的改进。应该讨论使用新工具的好处，而不是仅仅因为它很酷就实现它！

The example is below. More explanation on the code is here.

示例如下。有关代码的更多解释在这里。

<!DOCTYPE html>
<html>
 <head>
   <link rel="stylesheet" type="text/css" href="main.css" />
 </head>
<body>
 <div id="page-container">
   <div id="content-wrap">
     <!-- all other page content -->
   </div>
   <footer id="footer"></footer>
 </div>
</body>
</html>

There are two main parts to adding Grid:

添加网格有两个主要部分：

adding the needed new grid properties
添加所需的新网格属性
overriding any properties no longer needed.
覆盖不再需要的任何属性。

main.css:

main.css ：

#page-container {
  position: relative;
  min-height: 100vh;
}
#content-wrap {
  padding-bottom: 2.5rem;    /* Footer height */
}
#footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 2.5rem;            /* Footer height */
}

main.css can be extended to add:

可以将main.css扩展为添加：

@supports (display: grid) {
    #page-container {
        position: static;               // override
        display: grid;                  // new   
        grid-template-rows: 1fr auto;   // new
        grid-template-columns: 100%;    // new
    }
    
    #content-wrap {
        padding-bottom: 0;              // override
    }
    #footer {
        position: static;               // override 
        height: auto;                   // override
    }
}

position is set back to its default of static, and the padding and height are reset to values that do not interfere with the new layout.

position设置回其默认值 static ，并且将padding和height重置为不会干扰新布局的值。

min-height: 100vh is not referenced. It is also used by Grid so does not need to be altered.

min-height: 100vh 未引用。 Grid也使用它，因此不需要更改。

Three new, related,grid properties are added. The use of a single fraction unit 1fr ensures the first child element of page-container (in this case content-wrap) will fill all the remaining space that the auto height of the second child element footer does not take up.

添加了三个新的相关grid属性。使用单一的分数单位 1fr保证的第一个子元素page-container (在这种情况下， content-wrap )将填充所有剩余空间的auto第二子元素的高度footer不占用。

And that’s all there is to it! Now browsers that support Grid will use the code within the feature query, while still fully supporting browsers that don’t. This even allows for single components to add Grid one at a time — a team can see how straightforward the process is without a huge time investment.

这就是全部！现在，支持Grid的浏览器将使用功能查询中的代码，同时仍完全支持不支持Grid的浏览器。这甚至允许单个组件一次添加一个Grid-团队可以看到，无需花费大量时间就可以轻松完成该过程。

Hopefully this illustrates the incremental approach that can be taken to using Grid.

希望这说明了可以使用网格的渐进方法。

更复杂的用途 (More complex uses)

The power of what Grid offers is best seen in the more complex examples written by Natalya that inspired this update article. This shows the power of what Grid can offer when used at a larger scale.

纳塔利亚(Natalya)撰写的更复杂的示例激发了这篇更新文章，这充分体现了Grid提供的功能。这显示了Grid大规模使用时可以提供的功能。

快速提示 (Quick tips)

The fallback code can be tested without access to an older browser or emulator. Temporarily change@supports (display: grid) to a non-existent value, for example gridNO, so the fallback code is used.

无需访问旧版浏览器或仿真器即可测试后备代码。暂时将@supports (display: grid)更改为不存在的值，例如gridNO ，因此使用后备代码。

Firefox provides some great tools that Chrome currently doesn’t. These are the “Grid Display Settings” activated within the “Inspector” tab. These settings help to visually illustrate how Grid is being executed, which is great for complex layouts.

Firefox提供了Chrome当前无法提供的一些出色工具。这些是在“检查器”选项卡中激活的“网格显示设置”。这些设置有助于直观地说明如何执行Grid，这对于复杂的布局非常有用。

Finally, I was inspired by a statement made by Rachel Andrew:

最后，我受到雷切尔·安德鲁(Rachel Andrew)的发言的启发：

It shouldn’t look the same in all browsers, it should be a good experience in all browsers.

在所有浏览器中看起来都不一样，在所有浏览器中都应该是一个很好的体验。

The default of many companies is to strive for a duplicate experience in every browser. But is it worth considering that on older, slower browsers, a simpler approach might actually be a better experience?

许多公司的默认设置是力争在每个浏览器中都具有相同的体验。但是，值得考虑的是，在较旧，速度较慢的浏览器上，更简单的方法实际上可能会带来更好的体验？

Thanks for reading ? I hope that this helps inspire you to try using Grid not just in greenfield projects, but also alongside anything you might be using today!

谢谢阅读？我希望这能激发您不仅在未开发项目中尝试使用Grid的机会，而且还可以与您今天使用的任何东西一起尝试Grid！

翻译自: https://www.freecodecamp.org/news/progressive-enhancement-with-css-grid-8138d4c7508c/

css网格

cumian9828

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css网格_CSS网格的逐步增强

css网格CSS Grid (Grid) has been out for some time now, with full support in major modern browsers. I’ll leave others to dive into why it’s so great and what new design possibilities it makes so easy to ...
复制链接

扫一扫