css3 grid ie
This blog post started life as an answer to a question posted over at my CSS Grid AMA. This original question being,
这篇博客文章开始了我对CSS Grid AMA上发布的问题的回答。 最初的问题是
“With Blink and Gecko implementations shipping early 2017, with WebKit implementation probably shipping in the fall 2017, it seems the 4 major web engines will support grids. Is the 2011 Internet Explorer implementation supporting the same feature set? And will it be possible to just convert the 2016 syntax into 2011 syntax with something like Autoprefixer?”
“随着Blink和Gecko实施在2017年初发布，WebKit实施可能在2017年秋季发布，看来4个主要的Web引擎将支持网格。 2011 Internet Explorer实施是否支持相同的功能集？ 并可以通过Autoprefixer之类的工具将2016年语法转换为2011年语法吗？”
A very good question, and one with a less than straightforward answer. As always, it depends. Here is why.
一个很好的问题，而答案却不那么直接。 与往常一样，这取决于。 这就是为什么。
IE10实施 (The IE10 Implementation)
The Grid implementation that is in IE10, IE11 and current Edge is an implementation based on the 2011 specification for CSS Grid Layout. This early version of Grid Layout exposed the core concepts that are part of the Candidate Recommendation, however in the five years that have passed many additions and changes have been made.
IE10，IE11和当前Edge中的Grid实现是基于2011 CSS Grid Layout 规范的实现。 早期版本的Grid Layout公开了候选建议中的核心概念，但是在过去的五年中，已经进行了许多添加和更改。
This means that when Grid ships in Chrome, Firefox and hopefully Safari in 2017, the version of Grid in those browsers – being based on the up to date specification – will be very different to that which is in Internet Explorer and Edge.
这意味着，当Grid于2017年在Chrome，Firefox和Safari中发布时，这些浏览器中的Grid版本（基于最新规范）将与Internet Explorer和Edge中的版本完全不同。
The question is, should we treat IE10, IE11 and Edge as if they have no Grid Layout support or should we try and support them with their version of Grid until such time as Edge updates to the current spec? As with pretty much everything, how far you want to go with this is going to depend on the type of site you are building and the browsers you tend to see on your site. Here are some thoughts to help you make that decision.
问题是，我们是否应该将IE10，IE11和Edge视为没有网格布局支持，还是应该尝试以它们的Grid版本支持它们，直到Edge更新到当前规格为止？ 与几乎所有内容一样，您要走多远取决于您正在构建的网站类型以及您倾向于在网站上看到的浏览器。 这里有一些想法可以帮助您做出决定。
规格属性和值 (Specification Properties and Values)
Here is a table detailing the properties in the spec at CR, the IE10 properties and also whether they are prefixed by Autoprefixer as tested using the online Autoprefixer tool.
下表详细说明了CR规范中的属性，IE10属性以及是否已使用在线自动前缀工具测试的自动前缀作为前缀。
| CR Level 1 Property | CR Level 1属性 | IE10 Implementation | IE10实施 | Autoprefixer | 自动前缀 | Note | 注意 |
|---|---|---|---|---|---|---|---|
| grid-template-columns | 网格模板列 | -ms-grid-columns | -ms-grid-columns | Yes | 是 | ||
| grid-template-rows | 网格模板行 | -ms-grid-rows | -ms-grid-rows | Yes | 是 | ||
| grid-template-areas | 网格模板区域 | - | -- | No | 没有 | ||
| grid-template | 网格模板 | - | -- | No | 没有 | Shorthand | 速记 |
| grid-auto-columns | 网格自动列 | - | -- | No | 没有 | ||
| grid-auto-rows | 网格自动行 | - | -- | No | 没有 | ||
| grid-auto-flow | 网格自动流 | - | -- | No | 没有 | ||
| grid | 格 | - | -- | No | 没有 | Shorthand | 速记 |
| grid-row-start | 网格行开始 | -ms-grid-row | -ms-grid-row | Yes | 是 | ||
| grid-column-start | 网格列开始 | -ms-grid-column | -ms-grid-column | Yes | 是 | ||
| grid-row-end | 网格行尾 | - | -- | No | 没有 | Defined by the -ms-grid-row-span property | 由-ms-grid-row-span属性定义 |
| grid-column-end | 网格列端 | - | -- | No | 没有 | Defined by the -ms-grid-column-span property | 由-ms-grid-column-span属性定义 |
| grid-row | 网格行 | - | -- | Yes (only for start value) | 是（仅用于起始值） | Shorthand for setting start and end values together | 一起设置开始和结束值的简写 |
| grid-column | 网格列 | - | -- | Yes (only for start value) | 是（仅用于起始值） | Shorthand for setting start and end values together | 一起设置开始和结束值的简写 |
| grid-area | 网格区域 | - | -- | No | 没有 | ||
| grid-row-gap | 网格行间隙 | - | -- | No | 没有 | Gap properties can be faked by using a regular track. | 间隙属性可以通过使用常规轨道来伪造。 |
| grid-column-gap | 网格列间隙 | - | -- | No | 没有 | ||
| grid-gap | 网格间隙 | - | -- | No | 没有 | ||
| - | -- | -ms-grid-column-span | -ms-grid-column-span | - | -- | Not required due to changes to spec | 由于规格变更，不需要 |
| - | -- | -ms-grid-row-span | -ms-grid-row-span | - | -- | Not required due to changes to spec | 由于规格变更，不需要 |
| align-self | 自我调整 | -ms-grid-column-align | -ms-grid-column-align | Yes | 是 | Now part of Box Alignment | 现在是Box Alignment的一部分 |
| justify-self | 自我辩护 | -ms-grid-row-align | -ms-grid-row-align | No | 没有 | Now part of Box Alignment | 现在是Box Alignment的一部分 |
This isn’t a complete list of all changes to the specification. Many values have changed and new things added too. For example the syntax for repeating track listings, the additional of values such as span 2 for grid-column-end and grid-row-end. However it is a reasonable demonstration of the fact that using the IE10 version of Grid for fallbacks is complicated.
这不是规范所有更改的完整列表。 许多价值观已经改变，新事物也增加了。 例如，重复曲目列表的语法， grid-column-end和grid-row-end等值的附加值，例如span 2 。 但是，这是使用IE10版本的Grid进行回退很复杂这一事实的合理证明。
Autoprefixer可以为我们解决此问题吗？ (Can Autoprefixer fix this for us?)
We’re used to being able to deal with prefixed versions of specifications by adding the unprefixed property after the prefixed one. Autoprefixer essentially automates this job for us, and has support for the -ms-grid properties. However, even where similar properties exist in the two versions of the specification, the capabilities of the older spec and implementation are very different to the new one. This means you can’t simply run Autoprefixer and consider the job done.
我们习惯于通过在前缀版本之前添加unprefixed属性来处理规范的前缀版本。 Autoprefixer本质上为我们实现了这项工作的自动化，并且支持-ms-grid属性。 但是，即使规范的两个版本中存在相似的属性，旧规范和实现的功能也与新规范和实现的功能完全不同。 这意味着您不能简单地运行Autoprefixer并考虑完成的工作 。
相似特性的不同行为 (Different behaviour of similar properties)
In IE10 you don’t specify a start and end line, you specify a start line, and then detail how many columns or rows the area spans. This defines the end line. So rather than:
在IE10中，您没有指定起始行和结束行，而是指定了起始行，然后详细说明了该区域所跨越的列数或行数。 这定义了终点线。 因此，而不是：
grid-column: 1 / 3;grid-column: 1 / 3;
We have to say:
我们不得不说：
The following CodePen example demonstrates this.
下面的CodePen示例演示了这一点。
See the Pen Grid CR vs. IE10 2: Line-based placement spanning cells by rachelandrew (@rachelandrew) on CodePen.
请参见CodePen上的rachelandrew （ @rachelandrew ）在Pen Grid CR与IE10 2：基于行的单元格中跨越单元格 。
对准： (Alignment:)
We have some alignment capability in the 2012 specification and IE implementation. However it doesn’t implement the properties from Box Alignment that are now used for alignment in Grid Layout. Instead we can align items by using the grid-row-align and grid-column-align properties.
我们在2012年规范和IE实施中具有一些对齐功能。 但是，它没有实现“框对齐”中现在用于“网格布局”中对齐的属性。 相反，我们可以使用grid-row-align和grid-column-align属性来对齐项目。
These have to be applied to the items – there is no concept of setting the alignment of grid item. The -ms-grid-row-align property is on a basic level equivalent to align-self and takes the same values, -ms-grid-column-align is like using justify-self.
这些必须应用于项目–没有设置网格项目的对齐方式的概念。 -ms-grid-row-align属性在基本级别上等同于align-self并采用相同的值， -ms-grid-column-align类似于使用justify-self 。
You can see this in action in the next CodePen.
您可以在下一个CodePen中看到这一点。
See the Pen Grid CR vs. IE10 3: Alignment by rachelandrew (@rachelandrew) on CodePen.
请参阅CodePen上的Pen Grid CR与IE10 3： rachelandrew（ @rachelandrew ） 对齐 。
IE中不存在的主要内容 (Major things that don’t exist in IE)
In addition to things that behave differently, we have functionality that was never implemented for IE, or has been added to the spec since the version that was implemented against. This isn’t an exhaustive list but some of the major things missing are as follows.
除了行为不同之外，我们还具有从未针对IE实施的功能，或者自针对该版本实施以来已添加到规范中的功能。 这不是一个详尽的列表，但是缺少的一些主要内容如下。
自动放置 (Auto-placement)
There is no auto-placement behaviour in IE10 implementation. This means that you need to position everything rather than use the autoplacement ability of grid.
IE10实施中没有自动放置行为。 这意味着您需要放置所有内容，而不是使用网格的自动放置功能。
If you don’t position items they will stack up in the first cell of the grid. Compare the CodePen below with the little code needed for Example 1 at Grid by Example.
如果您不放置物品，它们将堆叠在网格的第一个单元格中。 将下面的CodePen与Grid by Example中示例1所需的少量代码进行比较。
See the Pen Grid CR vs. IE10 1: defining the grid by rachelandrew (@rachelandrew) on CodePen.
见笔网格CR对IE10 1：限定所述网格由rachelandrew（ @rachelandrew ）上CodePen 。
天沟 (Gutters)
The grid-column-gap, grid-row-gap and grid-gap properties were added later. To create gaps in IE Grid you will need to create a track for the gutter and then position items taking it into account.
稍后添加了grid-column-gap ， grid-row-gap和grid-gap属性。 要在IE Grid中创建间隙，您将需要为装订线创建一个轨道，然后将其考虑在内定位物品。
See the Pen Grid CR vs. IE10 1b: defining the grid with gaps by rachelandrew (@rachelandrew) on CodePen.
见笔网格CR对IE10 1B：限定有间隙网格由rachelandrew（ @rachelandrew上） CodePen 。
带有网格模板区域的布局 (Layout with grid-template-areas)
This was part of the 2011 specification but didn’t make it into the IE implementation. So this means there is no easy way to map properties such as grid-area, used to define a name for areas and grid-template-areas, used to define the layout in CSS.
这是2011年规范的一部分，但未纳入IE实现。 因此，这意味着没有简单的方法来映射属性（例如用于定义区域名称的网格区域和用于定义CSS布局的网格模板区域）。
完全使用IE版本有意义吗？ (Does it make sense to use the IE version at all?)
If you are using Grid in a very simple way, and positioning items rather than using auto-placement then the fact that grid exists in Internet Explorer from version 10 could turn out very useful. You could certainly use this in order to create a simpler layout for IE10 and up, once Grid is shipped in other browsers.
如果您以一种非常简单的方式使用Grid并定位项目而不是使用自动放置，那么事实证明网格存在于Internet Explorer自版本10起的事实可能非常有用。 一旦将Grid交付到其他浏览器中，您当然可以使用它来为IE10及更高版本创建更简单的布局。
However be aware that this is going to require some additional testing and work, you are unlikely to be able to simply rely on Autoprefixer to run and do the work for you. For example, if you have used auto placement for any item and then don’t set a position using the -ms properties, that item is going to stack up with any other unpositioned items in the first grid cell.
但是请注意，这将需要一些额外的测试和工作， 您不太可能仅仅依靠Autoprefixer来为您运行和完成工作 。 例如，如果您对任何项目使用了自动放置，然后没有使用-ms属性设置位置，则该项目将与第一个网格单元中的任何其他未放置的项目堆叠在一起。
The good news is that the IE implementation is pretty much frozen in time between IE10, 11 and current versions of Edge (presumably until Edge updates to the new specification). So work you do to implement grid in IE should work in those versions without needing to do different things for different IEs.
好消息是，在IE10、11和Edge的当前版本之间（大概在Edge更新到新规范之前），IE的实现在很大程度上被冻结了。 因此，您在IE中实现网格的工作应该可以在那些版本中进行，而无需针对不同的IE做不同的事情。
使用功能查询 (Use Feature Queries)
The IE implementation is prefixed so if you use CSS Feature Queries and check for display: grid the CSS inside the feature query will not be run by an Edge browser that supports the old prefixed version AND feature queries. So if you need to do additional work for your legacy Grid version, you can overwrite that inside your feature queries.
IE实现带有前缀，因此，如果您使用CSS功能查询并检查是否display: grid功能查询中的CSS不会由支持旧前缀版本和功能查询的Edge浏览器运行。 因此，如果您需要为旧版Grid版本做其他工作，则可以在功能查询中覆盖它。
Once Edge does ship their new implementation, that will presumably be unprefixed. If you have tested for display: grid unprefixed it will be able to use the new implementation without you changing your code.
一旦Edge交付了他们的新实现，大概就不会加上前缀了。 如果您已测试display: grid前缀，则无需更改代码即可使用新的实现。
关于Edge的实施 (And about Edge shipping their implementation)
If you want Edge to support new Grid, make sure Microsoft know that you want it. You can upvote the feature here, that’s a quick thing you can do to ask Microsoft to close the loop. Ask them to build on the great work they did to give us Grid Layout the first place, by bringing their implementation to meet the revised spec now at Candidate Recommendation. This link is where to keep track of Edge implementation status.
如果希望Edge支持新的Grid，请确保Microsoft知道您想要它。 您可以在此处对功能进行投票 ，这是您可以要求Microsoft结束循环的快速操作。 让他们继续努力，使他们的实现达到现在在候选推荐标准中修订后的规范，从而使他们能够为我们的网格布局赢得第一名。 该链接是跟踪Edge实施状态的位置 。
进一步的例子 (Further examples)
I’ve been writing about grid for a long time so have articles about the IE10 version of Grid Layout.
我已经写了很长时间的网格文章，所以有关于IE10版本的Grid Layout的文章。
- Giving Content Priority with CSS Grid Layout – from 2012 on 24 Ways
- CSS Grid Layout, what has changed – an explanation of changes from the IE version dated April 2013, many of these things changed again since
- Three Years with Grid Layout – my thoughts a year ago after spending 3 years working with the spec
- 从2012年开始， 通过CSS网格布局为内容提供优先级 -24种方式
- CSS Grid Layout，发生了变化 -解释了自2013年4月IE版本以来的变化，自从
- 网格布局三年 -我一年前在使用规范工作三年后的想法
You can also check out these resources from Microsoft:
您还可以从Microsoft签出这些资源：
- Internet Explorer 10 Developer Guide – Grid Layout
- IE10 Platform Preview and CSS Features for Adaptive Layouts
I’ve covered a fair bit of ground here and I’ve not spent a huge amount of time building things using the IE implementation, since the specification was updated. So, if anyone spots anything wrong or that could be usefully added let me know!
自从规范更新以来，我在这里已经覆盖了相当多的领域，并且我还没有花费大量时间使用IE实现来构建东西。 因此，如果有人发现任何错误或可以添加的有用信息，请告诉我！
css3 grid ie
扫一扫
332
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
