css 网格布局_开始使用CSS网格布局真的安全吗？

css 网格布局

I’m learning to fly small planes. It gets me away from computers. Recently, I was battling to keep the Cessna 150 low enough as we approached Bristol Airport. I was quite literally being sucked up by a cloud. My flying instructor said, “it isn’t your fault, but it is your problem”. He meant it was my responsibility to maintain my height, even though something else was working against me. I needed to learn that this situation existed and how to fly my plane to deal with it.

我正在学习驾驶小型飞机。 它使我脱离了计算机。 最近，当我们接近布里斯托尔机场时，我正在努力使塞斯纳150保持足够低。 从字面上看，我完全被乌云所吸引。 我的飞行教练说：“这不是你的错，但这是你的问题”。 他的意思是，即使有其他事情对我不利，保持我的身高也是我的责任。 我需要了解这种情况的存在，以及如何驾驶飞机来应对。

Back on the ground I considered that the phrase “it isn’t your fault, but it is your problem” is a pretty good one for all kinds of situations. In this post I’m considering the issue of supporting older browsers when using new technology such as CSS Grid Layout. As developers we can often be a bit sheepish when discussing browser support with our clients and teams, as if it is our failure that the site won’t look identical in IE9 as the latest Firefox or Chrome. Instead we need to accept that this isn’t our fault. However the responsibility of dealing with this problem well, and in a way that benefits everyone, is very much our problem.

回到地面，我认为“这不是您的错，但这是您的问题”在各种情况下都是一个很好的选择。 在本文中，我将考虑使用CSS Grid Layout等新技术时支持较旧浏览器的问题。 作为开发人员，在与客户和团队讨论浏览器支持时，我们常常会有些sheep之以鼻，这似乎是我们的失败，因为该网站在IE9中的外观与最新的Firefox或Chrome不同。 相反，我们需要接受这不是我们的错。 但是，很好地解决这个问题并以使每个人都受益的方式来负责是我们的问题。

网格是新的！ 它肯定具有强大的浏览器支持吗？ (Grid is new! Surely it has terrible browser support?)

CSS Grid Layout shipped into Chrome, Firefox, Opera and Safari in March of this year. Microsoft Edge currently have an updated Version of Grid available behind a flag in Preview builds. At the time of writing, Can I Use indicates a global availability of CSS Grid Layout of 65.64%, rising to 70.75% if you include the prefixed version in IE10, 11 and current Edge. This is a rate of adoption we’ve never seen before for such a huge feature. It isn’t surprising that people don’t realise how many visitors will have support.

CSS Grid Layout于今年3月投放到Chrome，Firefox，Opera和Safari。 Microsoft Edge当前在预览版本中的标志后面有可用的更新的Grid版本。 在撰写本文时， “我能使用”表示CSS网格布局的全球可用性为65.64％，如果在IE10、11和当前Edge中包含前缀版本，则该比例将提高到70.75％。 对于如此庞大的功能，这是我们从未见过的采用率。 人们没有意识到会有多少游客获得支持也就不足为奇了。

It should go without saying, but I will say it anyway, your usage stats may be lower or higher, depending on the audience for your site. However, if you are building a new site right now there is a very good case to be made for taking advantage of CSS Grid Layout.

它应该不言而喻，但是无论如何我还是会说，您的使用情况统计数据可能更低或更高，具体取决于您网站的受众群体。 但是，如果您现在正在构建一个新站点，则有充分的理由利用CSS Grid Layout。

为什么要使用网格？ (Why would I use Grid?)

As explained in a previous post, CSS Grid Layout enables two-dimensional layout without requiring the additional markup for row wrappers. As a two dimensional layout method you can cause elements in your design to span rows, in a predictable and robust way.

如前一篇文章所述 ，CSS Grid Layout允许二维布局，而无需为行包装器附加标记。 作为一种二维布局方法，您可以使设计中的元素以一种可预测且健壮的方式跨越行。

You can achieve some nice design effects. For example having items in your design that are at least a particular height but will still expand to contain content that is taller - shown in this demo.

您可以实现一些不错的设计效果。 例如，设计中的项目至少具有特定的高度，但仍会扩展以包含更高的内容， 如本演示中所示 。

You can easily mix fixed width elements with flexible units, with the fr unit in grid. This makes it easier to deal with items in your layout that you want to maintain at a fixed size.

您可以轻松地将固定宽度的元素与灵活的单元混合 ，而fr单元位于网格中。 这样可以更轻松地处理布局中要保持固定大小的项目。

You can redefine the layout from the grid container, making responsive design more straightforward, giving you the ability to fine tune the design at different breakpoints.

您可以从网格容器重新定义布局 ，使响应式设计更直接，使您能够在不同的断点处微调设计。

You can layer items on the grid, items respect z-index so you can cause different items to occupy the same grid cells with plenty of scope for creativity.

您可以在网格上分层放置项目，这些项目遵循z-index因此您可以使不同的项目占据同一个网格单元，并具有很大的创造力。

和不支持的浏览器？ (And non-supporting browsers?)

CSS has the solution for you. To start with, defined in the Grid and Flexbox specifications are exactly how those specifications overwrite older layout methods.

CSS为您提供解决方案。 首先，Grid和Flexbox规范中定义的正是这些规范如何覆盖较旧的布局方法。

Therefore if you want to use floats, inline-block, multiple-column layout, flexbox or even display: table as a fallback for your grid layout then the spec has you covered. You can overwrite those methods in a safe and predictable way. I made a cheatsheet explaining the fallbacks. I also cover several of these in my talk which was recorded at Render Conference earlier this year.

因此，如果要使用浮点数，行内块，多列布局，flexbox甚至display：table作为网格布局的后备，则可以满足您的要求。 您可以安全且可预测的方式覆盖这些方法。 我做了一张备忘单，解释了退步 。 我还在今年早些时候的渲染会议上录制的演讲中谈到了其中的一些内容。

CSS also has Feature Queries. These have really great browser support, and the nice thing about Feature Queries is that you don’t need to concern yourself with the browsers that don’t support feature queries. There is no browser supporting Grid Layout and not supporting Feature Queries. What you need to do in your CSS file is:

CSS还具有功能查询 。 它们确实具有强大的浏览器支持，关于功能查询的好处是，您无需担心不支持功能查询的浏览器。 没有浏览器支持网格布局并且不支持要素查询。 您需要在CSS文件中执行的操作是：

1. Your fallback CSS
2. Your Grid CSS

1. 您的后备CSS
2. 您的网格CSS

All browsers will interpret the fallback CSS. The ones that do not support Grid will stop right there. The ones that do support Grid will use the Grid CSS, and due to the rules defined in the spec and detailed in my cheatsheet, a lot of the fallback behaviour will be nullified.

所有浏览器都将解释后备CSS。 不支持Grid的将就此停止。 支持Grid的将使用Grid CSS，并且由于规范中定义的规则以及我的备忘单中详述的规则，许多后备行为将被取消。

Generally you will then have a few things in the fallback CSS that will “leak through” to the grid layout. This is often widths on items as we need to assign widths to items in legacy layout to fake something that looks like it is using a grid. Therefore we use a simple feature query, checking for support of Grid Layout, and there we perhaps set widths back to auto. We can do anything else in there for the Grid version that would also be interpreted by older browsers.

通常，您将在后备CSS中拥有一些可以“泄漏”到网格布局的东西。 这通常是项目的宽度，因为我们需要为旧版布局中的项目分配宽度，以伪造使用网格的外观。 因此，我们使用一个简单的功能查询，检查对Grid Layout的支持，然后在此处将宽度设置回auto 。 我们可以为Grid版本执行其他任何操作，而旧版本的浏览器也可以解释该版本。

We’re using CSS to do CSS. No polyfills, or hacks. This is all as defined in the specifications.

我们正在使用CSS来做CSS。 没有polyfills或hacks。 这些都是规范中定义的。

但是后备意味着我要写两次布局！ (But fallbacks mean I’m writing the layout twice!)

This is only true if you are labouring under the assumption that websites need to look the same in all browsers. Guess what? They don’t.

只有在假设网站在所有浏览器中都必须看起来相同的前提下，这才是正确的。 你猜怎么了？ 他们没有。

Here is a post I wrote in 2002. In 2002 people were avoiding learning how to use CSS for layout as it would mean their sites wouldn’t “look the same” in all browsers. However I was building sites using CSS for layout, trying to figure out how we could do that in the best possible way, and teaching other people the things I was learning. All while starting my own company, building websites for clients who wanted things to work in Netscape 4. I’ve been doing this for my entire career. I’ve been dealing with interoperability issues for 20 years. I currently have a product with a UI that has to be functional back to IE9. The existence of these old browsers has never been my fault, but it most certainly has been my problem and my job to deal with over all of these years.

这是我2002年写的一篇文章 。 在2002年，人们避免学习如何使用CSS进行布局，因为这意味着他们的网站在所有浏览器中都不会“看起来相同”。 但是，我正在使用CSS进行布局来构建网站，试图弄清楚我们如何以最佳方式做到这一点，并向其他人传授我正在学习的知识。 在创办自己的公司的过程中，一直为希望在Netscape 4中工作的客户建立网站。我在整个职业生涯中一直在这样做。 我从事互操作性问题已有20年了。 我目前有一个带有UI的产品，该UI必须能够返回IE9 。 这些旧的浏览器的存在从来不是我的错，但是这些年来这些问题无疑是我的问题和工作。

If your website really needs to look the same in all browsers (whatever that means to you), you won’t be able to use any features only available by using Grid. In that case don’t use Grid Layout! Use Grid Layout if you want to achieve something that you can’t do in a good way with older technologies. Then create a fallback that gives a good experience to those less capable browsers rather than worrying about making it exactly the same. The power of Grid is that we can do things that were pretty much impossible before. Use Grid for that, not just to replicate your old design.

如果您的网站确实需要在所有浏览器中看起来都一样（无论对您而言意味着什么），您将无法使用仅通过使用Grid才能使用的任何功能。 在这种情况下，请勿使用“网格布局”！ 如果要实现旧技术无法很好地完成的工作，请使用“网格布局”。 然后创建一个后备版本，为那些功能较弱的浏览器提供良好的体验，而不用担心使其完全相同。 Grid的强大之处在于我们可以做以前几乎不可能完成的事情。 为此，请使用Grid，而不仅仅是复制您的旧设计。

我想要一个神奇的填充 (I want a magic polyfill)

Globally polyfilling your entire layout is going to be a pretty nasty experience for your visitors. The things that grid does are not going to perform well using a JavaScript based solution. You will end up with a horrible jiggly loading experience. It is far better to provide those older browsers with a simpler experience, one tailored to their capabilities than try and force grid layout on them by way of JavaScript.

在全球范围内填充您的整个布局对于您的访问者来说将是一个非常讨厌的体验。 使用基于JavaScript的解决方案，网格无法正常运行。 您最终将获得可怕的不稳定加载体验。 为这些较旧的浏览器提供更简单的体验，更好的体验是根据其功能量身定制的，这比尝试通过JavaScript在其上强制进行网格布局要好得多。

Trying to polyfill is likely to significantly increase your development and testing time, for a decreasing group of users. Again, if having an identical layout for everyone is the ultimate dream for your site, I’d suggest not using grid right now. You will have to accept that all of the users who could get the grid layout can’t have it due to the fact there are old browsers.

对于数量减少的用户，尝试进行polyfill可能会大大增加您的开发和测试时间。 同样，如果每个人都拥有相同的布局是您网站的最终梦想，那么我建议您现在不使用网格。 您将不得不接受所有可能获得网格布局的用户都无法拥有网格布局的原因，因为事实是旧的浏览器。

这就是为网络构建的东西 (This is what it is to build for the web)

It is the way of working on the web that we deal with things not having complete support across the board. This is the nature of the industry you work in. Your job is to navigate the inevitable technology compromises in every project.

这是在Web上进行工作的一种方式，我们可以处理没有全面支持的事情。 这就是您从事的行业的本质。您的工作是在每个项目中应对不可避免的技术折衷。

Your job is to learn about new things, and advise your client or your boss in the best way to achieve their business goals through your use of the available technology. You can only do that if you have learned about the new things. You can then advise them which compromises are worth making. Ensuring design consistency at the expense of additional markup, development time or needing to make compromises on the look and feel for all browsers? Or a simpler layout for Internet Explorer 9 that means you can reduce development time and have a more performant site due to use of new technologies? You can make the argument if you have the understanding to back it up.

您的工作是学习新事物，并通过使用可用技术以最佳方式为您的客户或老板提供建议，以实现他们的业务目标。 只有了解了新事物，您才能这样做。 然后，您可以建议他们应该做出哪些妥协 。 要确保设计的一致性，却要付出额外的标记，开发时间或需要在所有浏览器的外观上做出折衷？ 还是Internet Explorer 9的布局更简单，这意味着您可以减少开发时间并由于使用新技术而拥有更高性能的网站？ 如果您有支持的理由，可以提出理由。

If there is absolutely no benefit in using a new technology, then do not use it. However, if your client wants something that is only sensible to achieve using a new technology like Grid, or would be quick to do with Grid and cause a great deal of pain without then you have a whole stack of ways to explain the tradeoffs and compromises.

如果使用新技术绝对没有好处，请不要使用它。 但是，如果您的客户想要使用Grid等新技术只能实现明智的选择，或者如果不使用Grid就可以快速使用Grid并造成很多痛苦，那么您就可以使用一整套方法来解释权衡和妥协。

Explain it based on how much development time - now and in the future it could save due to reduced complexity.

根据需要多少开发时间进行解释-由于降低了复杂性，现在和将来都可以节省下来。

Explain it based on the fact that the designers have come up with a stunning design that just won’t be possible in a robust way without Grid Layout.

基于以下事实进行解释：设计师提出了令人惊叹的设计，如果没有Grid Layout，就无法以健壮的方式实现。

Explain it based on performance, in many cases you will be able to make that case due to being able to drop that hefty framework you would otherwise be relying on.

根据性能进行说明，在很多情况下，由于能够删除原本要依靠的庞大框架，因此您可以进行说明。

The tradeoff will be the requirement to present a simplified layout for older browsers. However that doesn’t mean “no layout”. You should also be ready to explain the fact that browser adoption of Grid is not like any browser adoption of CSS we have seen before. The implementations are highly interoperable already. Edge currently has updated Grid behind a flag in Preview builds. Browsers without support are going away much faster than history would have us expect.

权衡是为旧版浏览器提供简化布局的要求。 但是，这并不意味着“没有布局”。 您还应该准备说明以下事实：浏览器采用Grid不同于我们之前看到的任何浏览器采用CSS。 这些实现已经高度可互操作。 Edge当前在预览版中的标记后面更新了Grid。 没有支持的浏览器的消失速度比历史预期的要快得多。

These are straightforward discussions to have once you are armed with all of the relevant information about the tradeoffs. The fact old browsers exist is not your fault. Don’t start these discussions by acting as if it is your failing that you can’t get the site looking identical in all browsers released in the last 10 years, while using technology only released this year. It’s not your fault, but it is your problem. It is your problem, your responsibility as a web professional to get yourself into a position where you can take the right course of action for each project.

一旦您掌握了有关权衡的所有相关信息，这些讨论将非常简单。 旧浏览器的存在并不是您的错。 在开始这些讨论时，请不要以为您无法让该网站在过去10年发布的所有浏览器中都看起来不一样，而只能使用今年才发布的技术。 这不是你的错，但这是你的问题。 这是您的问题，您是网络专业人员的责任，必须使自己处于可以为每个项目采取正确措施的位置。

这就是我们要去的地方 (This is where we are heading)

The move from tables-for-layout to CSS changed the way the web looked. It moved us away from the pixel perfect chopped up images to something more flexible and text based, something less like print design. The look of the web over the past 15 years has been defined by the technical limitations of CSS. I think that our new layout methods - Grid, Flexbox along with things like Shapes - will redefine how the web looks once again. However we have to let it, we have to let ourselves experiment and learn and create new things.

从布局表格到CSS的转变改变了网络的外观。 它使我们从像素完美切碎的图像移到了更加灵活和基于文本的内容上，而不再像印刷设计那样。 在过去15年中，网络外观是由CSS的技术局限性所定义的。 我认为我们的新布局方法-网格，Flexbox以及Shapes之类的东西-将重新定义Web的外观。 但是，我们必须让它，我们必须让我们自己进行实验，学习和创造新事物。

We can only do that if we are willing to demonstrate the benefits of these methods to the people we develop sites and applications for. We can only do that if we put aside our beliefs about the web, browsers and speed of adoption at least long enough to learn about these things. Then we can make the right decisions for each project in turn. It is never either/or, there will always be compromises. Our job is, as it always has been, to deal with that.

只有当我们愿意向开发站点和应用程序的人们证明这些方法的好处时，我们才能做到这一点。 只有搁置我们对网络，浏览器和采用速度的信念至少足够长的时间来了解这些知识，我们才能做到这一点。 然后，我们可以依次为每个项目做出正确的决定。 永远不会，或者永远不会有妥协。 一如既往，我们的工作就是应对这一问题。

翻译自: https://rachelandrew.co.uk/archives/2017/07/04/is-it-really-safe-to-start-using-css-grid-layout/

css 网格布局