css网格_CSS网格即将到来

最新推荐文章于 2024-10-06 20:16:20 发布

cundai5745

最新推荐文章于 2024-10-06 20:16:20 发布

阅读量128

点赞数

文章标签： java python 人工智能编程语言 html

原文链接：https://rachelandrew.co.uk/archives/2017/01/03/css-grid-is-coming/

版权

css网格

You can see the approaching green. CSS Grid is coming to browsers, unprefixed and out from behind flags this year. This post is a round-up of questions I keep being asked about browser support and grid layout.

您可以看到接近的绿色。 CSS网格即将浏览器，没有前缀和今年出从后面的标志。这篇文章是我一直被问到有关浏览器支持和网格布局的问题的汇总。

在哪里可以找到有关网格浏览器支持的最新信息？ (Where can I find the latest information on grid browser support?)

This blog post will quickly be out of date. I keep a page over on my Grid by Example site, which I try to keep as up to date as I can. It includes links to browser bug trackers and intent to ship / implement notifications.

这篇博客文章很快就会过时。我在“ 示例网格”站点上保留了一个页面，我试图使该页面保持最新。它包括指向浏览器错误跟踪器的链接以及发送/实施通知的意图。

网格最初不会真的是越野车吗？肯定它太新了吗？ (Won’t grid be really buggy at first? Surely it is too new to use?)

Flexbox early adopters will remember major difference in browser implementations - even between two versions of the same browser. People are understandably worried about a similar situation with Grid Layout.

Flexbox的早期采用者会记住浏览器实现的主要差异-甚至是同一浏览器的两个版本之间。可以理解的是，人们担心Grid Layout会出现类似情况。

This isn’t the case. Grid Layout has been developed as a specification, and also in browser implementations over a 5 year period at this point. The implementations in Chrome, Firefox and Safari all follow the specification, which has been developed as those implementations have been put in place with feedback from the browser implementors. Major changes have happened in the spec during that time, but as this all happened behind browser flags there was no impact on production code.

事实并非如此。目前，网格布局已被开发为一种规范，并且已经在浏览器实现中开发了5年。 Chrome，Firefox和Safari中的实现均遵循该规范，该规范是根据浏览器实现者的反馈将其部署到位而开发的。在这段时间内，规范发生了重大变化，但是由于这一切都发生在浏览器标志后面，因此对生产代码没有影响。

So the shiny new Grid Layout you will get in browsers, is a pretty mature piece of work at this point. Would you consider any other five year old piece of software too new to use?

因此，此时您将在浏览器中获得闪亮的新Grid Layout是一项相当成熟的工作。您是否认为其他任何使用了五年的软件都太新了而无法使用？

我们知道Safari何时会有Grid吗？ (Do we know when Safari will have Grid?)

The Safari Technology Preview has Grid Layout support, roughly comparable to that in Chrome as it has been implemented by the same developers. However Apple do not tend to let us know what will be in a release, or when the release will be.

Safari技术预览版具有Grid Layout支持，与由相同的开发人员实施的Chrome大致相当。但是，Apple并不倾向于让我们知道发行版中的内容或发行时间。

It may be that Grid is included in a March release. That would be the best scenario. A somewhat more pessimistic view would make it October based on past schedules. I think that the fact it is in Preview makes Grid in Safari in 2017 pretty likely by my guess, but it is a guess!

网格可能包含在3月的发行版中。那将是最好的情况。较为悲观的看法将根据过去的时间表将其定为十月。我认为预览中的事实使2017年Safari中的Grid很有可能，但这是一个猜测！

我可以使用说Grid在Edge中吗-与其他浏览器相比，它有何不同？ (Can I Use says Grid is in Edge - how does that compare to the other browsers?)

The version of Grid Layout currently in Edge is the same as the implementation of Grid in IE10 and 11. This was the original version of the specification that was developed by Microsoft.

Edge中当前的Grid Layout版本与IE10和11中的Grid实现相同。这是Microsoft开发的规范的原始版本。

I have written about the differences between the specifications and whether it makes sense to try and use the prefixed IE/Edge version for backwards compatibility. TL:DR “it depends” but take a look at Should I try to use the IE implementation of Grid Layout if you want to know the details.

我已经写了规范之间的差异，以及尝试使用带前缀的IE / Edge版本以实现向后兼容性是否有意义。 TL：DR“这取决于”，但请看一下如果您想了解详细信息，是否应该尝试使用IE的Grid Layout实现。

You can track the status of Edge updating to the current specification.

您可以跟踪Edge更新到当前规范的状态。

Internet Explorer 11是否将获得新的Grid规范？ (Will Internet Explorer 11 get the new Grid specification?)

No, IE11 will be frozen in time with the IE10 version of Grid.

不会，IE11将随IE10版本的Grid冻结。

因此，由于IE / Edge，我们无法使用Grid！ (So we can’t use Grid because of IE / Edge!)

Only if you are under the assumption that websites have to look the same in all browsers and on all devices. If not being able to have the exact same layout across all browsers is a complete showstopper for you then perhaps it is too early to use Grid. However it will also be too early for you to use a huge number of other new browser features. I hope you are able to play and experiment in your own time, as there is a lot of fun stuff out there!

仅当您假设网站必须在所有浏览器和所有设备上都看起来相同时。如果不能在所有浏览器中使用完全相同的布局对您来说是一个完整的展示，那么使用Grid可能为时过早。但是，使用大量其他新浏览器功能还为时过早。我希望您能够在自己的时间玩耍和尝试，因为那里有很多有趣的东西！

Even if it is too early to use Grid for your entire layout, it is possible to use a better supported method for main layout structures and then use Grid to finesse UI components that can also be displayed in a similar way for non-supporting browsers. I think one of the initial issues people have with using Grid is being unable to see past “main layout” as the use case. I’m more interested in the possibilities for layout of small and fiddly UI components, and it is often in these places you can start to use the spec earlier.

即使现在就将Grid用于整个布局还为时过早，也可以对主布局结构使用更好的受支持方法，然后使用Grid精细化UI组件，这些组件也可以类似方式显示在不支持的浏览器中。我认为人们在使用Grid时遇到的最初问题之一是无法将过去的“主布局”视为用例。我对小巧的UI组件的布局可能性更感兴趣，通常在这些地方，您可以更早地开始使用该规范。

我们可以检测IE并做其他事情吗？ (Can we detect IE and do something else?)

Don’t try and detect IE, instead test for Grid Support using Feature Queries. You can test for support of the new specification by testing for display: grid, and you will get the current Edge implementation by testing for display: -ms-grid. IE10 and 11 don’t have Feature Query support.

不要尝试检测IE，而应使用Feature Queries测试对Grid Support的支持。您可以通过测试display: grid来测试对新规范的支持，并且可以通过测试display: -ms-grid来获得当前Edge的实现。 IE10和11没有功能查询支持。

我应该填充网格吗？ (Should I polyfill Grid?)

I wouldn’t. If your layout is complex enough to need polyfilling to get a decent end result in non-supporting browsers it is likely that using the polyfill will have a negative effect in terms of performance and user experience.

我不会如果您的布局非常复杂，需要在不支持浏览器的情况下进行填充，以获得令人满意的最终结果，则使用填充可能会对性能和用户体验产生负面影响。

Grid plays very nicely as an enhancement on top of older methods of layout. Use Feature Queries and enhance a simpler layout, allow browsers to grow into your design as Grid Support lands in them.

Grid作为旧版布局方法的增强，可以很好地发挥作用。使用功能查询并增强更简单的布局，使浏览器可以在网格支持落入您的设计中。