IE10 Platform Preview and CSS Features for Adaptive Layouts

The first platform preview of IE10 contains many new CSS3 features all developed as implementations of evolving Web standards. In this post, we’ll look at three of those CSS features—CSS3 Grid Layout, Flexible Box Layout, and Multi-column Layout. CSS Grid Layout and Flexible Box Layout both help developers create layouts for complex Web applications and Web sites. Multi-column is designed to help developers create advanced text layouts for improved readability on the Web. These three new CSS features can make it easier to more effectively use screen real-estate across a wide variety of devices and resolutions—a longstanding and growing problem for Web designers.

CSS3 Grid Layout

Let’s start with CSS Grid Layout (aka “Grid” ), which is a proposal recently submitted by Microsoft to the CSS Working Group. The core idea behind Grid is to partition a Web page into a defined set of rows and columns, and then position and size elements based on those rows and columns, all using CSS. Because the size of rows and columns can be defined as fixed, flexible, or size-to-content, it’s easy to build a layout that completely fills the entire screen, regardless of screen size.

For example, the image below shows an exemplary game board which has been divided up into two columns and three rows, containing multiple elements. Some of the elements need to remain fixed, while others need to grow or shrink as the size of the browser window changes.

With Grid, you can achieve this design starting with the markup below.

<div id="grid">
    <div id="title">Game Title</div>
    <div id="score">Score</div>
    <div id="stats">Stats</div>
    <div id="board">Board</div>
    <div id="controls">Controls</div>
</div>

The div with ID “grid” is set as a grid container with display: grid, and the various rows and columns are defined as either flexible (that is, growing or shrinking based on available space) or auto-sizing, which sizes the row or column to the width or height of the largest element placed inside.

#grid {
    display: -ms-grid;
    -ms-grid-columns: auto 1fr;
    -ms-grid-rows: auto 1fr auto;
}

Once the grid is defined, you can position individual elements to specific grid cells. As the markup below shows, not only can you specify that an element is placed at a specific row and column in CSS, but you can specify that an element should span multiple rows and/or columns, and specify an element’s horizontal or vertical alignment within a cell or range of cells. Elements can be specified as having a fixed size, or can be specified to fill the available width or height of the cell they’re placed in. In the example above, the “board” element grows along with the screen, while other elements, such as the “title” element, stay fixed in size. (Note that, because this is still an emerging specification, in IE10 usage, all of the grid properties below are prefixed with “-ms-”.)

#title { -ms-grid-column: 1; -ms-grid-row: 1 }
#score { -ms-grid-column: 1; -ms-grid-row: 3 }
#stats { -ms-grid-column: 1; -ms-grid-row: 2; -ms-grid-row-align: start }
#board { -ms-grid-column: 2; -ms-grid-row: 1; -ms-grid-row-span: 2 }
#controls { -ms-grid-column: 2; -ms-grid-row: 3; -ms-grid-column-align: center }

By combining Grid with CSS3 Media Queries, you can specify entirely different layouts for different resolutions, aspect ratios, and screen orientations. For example, you can define a different number of rows or columns for different screen sizes (e.g. more columns for a vertical “portrait” layout, more columns for a horizontal “landscape” layout), or specify that rows and columns are sized differently. You can try this out for yourself with the Griddle test drive using the IE10 platform preview and resizing the window from wide to narrow width.

In addition, because the position of elements in a grid is independent of the order they are specified – that is, their position is specified purely by CSS rather than by their order in HTML markup – it’s easy to give elements different arrangements on different screen sizes, or even avoid displaying some elements entirely in some layouts. For example, you might want to skip displaying certain toolbars or sidebars on a small resolution designed for phones or tablets, where you might show a wider variety of content elements on a layout designed for a widescreen, high-resolution desktop screen. Most importantly, all these different effects are achieved purely with CSS – and because the visual display of content is entirely separated from the HTML, there’s no need to prepare a different HTML file for mobile vs. desktop devices.

CSS3 Flexible Box Layout

Grid is great for adaptive layout, but it’s not the only option available. In the IE10 platform preview developers can also use Flexible Box Layout (aka “Flexbox”) to lay out elements in a fluid, source-independent way. Flexbox and Grid share many common aspects – elements are placed inside of a parent container, and their size and position are adjusted depending on the parent size. The key difference between Flexbox and Grid is that Flexbox lays out its content along a single axis (vertical or horizontal) whereas grid can lay out content in both rows and columns. Also, the default behavior of Flexbox is to “stack” elements along one side of the container, whereas the default behavior of Grid is to place elements “on top” of each other in row 1, column 1.

While many behaviors that can be achieved with Flexbox are also possible with Grid, and vice versa, Flexbox is best suited for creating individual components and collections (e.g. toolbars, image collections) while Grid is designed for creating full-page layouts, and for components where individual elements overlap.

The basics of using Flexbox are straightforward. The example below starts with three buttons (individual components of a basic media toolbar) laid out in a containing div. By default, these buttons are laid out with display: inline-block, which means that they have an intrinsic size that does not change as the container size changes. This can lead to unused white space where the layout does not adapt to the available space.

<div id="playControl">
    <button>Back</button>
    <button>Play</button>
    <button>Forward</button>
</div >

Result of markup above

With flexible box layout (i.e. display: box) you can specify that the button container will lay out its children such that each child element has an equal share of the available space in the container. Now the buttons fill the container completely, and will do so regardless of how the container size changes. This is an approach that works well with flexible grid cells – if the outer container is a div that is sized to fill a flexible grid cell, then not only does the overall layout adapt as the screen size changes, but the individual toolbar changes as well.

#playControl { display: -ms-box; }
button { -ms-box-flex: 1; }

Result of markup above

Another useful feature of Flexbox is the ability to act as a container for an arbitrary number of items, especially using the box-lines property. Specifically, a container element (such as a div) with display: box; set will automatically stack elements in that container towards one side of the container (the left side of the container, for most Western languages). If the box-lines property is set to multiple, then a Flexbox container will arrange content elements in multiple rows of content, if vertical space allows. This means that a flexible container element can automatically arrange its contents to make the best use of space, without the designer having to know how many items are in the container and having to explicitly place each item.

In the example images below, the same five items are arranged in a single row when the container is wide enough, but a second row of items is created beneath the first when the container is too narrow. This approach can be used when a dynamic data query has returned an unknown number of items, and you want to display them in a simple, straightforward way.

<div id="collectionContainer">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
</div >

#collectionContainer { -ms-box-lines: multiple; }

CSS3 Multi-column Layout

Finally, you can use CSS Multi-column layout to arrange content into multiple columns on the page. This approach is used by newspapers and magazines in the print world, which makes text easier to read and track from line to line by organizing the content into multiple parallel columns.

Multi-column layout allows you to do that with a few lines of CSS. For example, the content in the image below can be quickly organized into 3 columns by placing the line “column-count:3” on the containing div.

<div id="beagleContent">
    <img src="3Beagles.jpg" style="float: right">
    Lorem ipsum...
</div >

#beagleContent { column-count: 3; }

Multi-column layout offers a wide variety of options to specify how your content is laid out, including the ability to set a fixed column count, a minimum column width, the size of the gap between columns, and even column rules, which are decorative borders between columns. Multi-column layout also provides the ability to specify where column breaks should occur, and to have content automatically balanced between columns, so all columns are the same length. Also, note that because Multi-column is a W3C Candidate Recommendation, no -ms- tag is needed when using these properties. You can try an example of CSS3 multi-column layout using the IE10 platform preview and other browsers.

Your Feedback

We’re excited to have CSS3 Grid, Flexbox and Multi-column in the IE10 platform preview so developers can learn, experiment, and provide feedback. We will continue to work with the Web community and the W3C CSS working group on the CSS Grid and other specifications and submit accompanying test cases. Together we can make CSS3 adaptive layouts another dependable part of the interoperable Web platform.

—Chris Jones, Program Manager

Comments

• Anonymous
  April 14, 2011
  I'm struggling to figure out why defining a grid layout in CSS as shown in the examples is a superior approach to using HTML tables?  I know all the cool kids only use CSS for formatting, but other than saying you can do it without tables because you can, how is this approach actually superior?  In other words, how does this lead to a "better web" than using tables?

• Anonymous
  April 14, 2011
  The comment has been removed

• Anonymous
  April 14, 2011
  For the record, I do think the multi-column idea is a very fine idea, as there is currently no good way to do multi-column layouts.  The grid is the only markup I'm questioning the use of.

• Anonymous
  April 14, 2011
  @Parrotlover77 The markup is clean, yet you get all the layout possibilities of tables. It's the best of both words, really.

• Anonymous
  April 14, 2011

• worlds

• Anonymous
  April 14, 2011
  @Parrotlover77 "display: table-row", "display: table-cell", etc… supported since IE8

• Anonymous
  April 14, 2011
  Focus on the scripting part of HTML5 spec. classList and dataset HTMLElement's properties should had been supported in IE9, they're not any complex APIs and are very useful. Please implement them ASAP. Thank you.

• Anonymous
  April 14, 2011
  @Parrotlover77 Because grid is actually more powerful than tables in that the mark up is not determined by the order of the HTML like in a table. Look at the order that is presented in the HTML and look at the CSS. Of course, the accessibility of such a layout is questionable. It's been a long practice among accessibility advocates that source order should match display order for devices that don't support such. I honestly don't know what to say to that.

• Anonymous
  April 14, 2011
  @Brian: What's the display order in a 2D and not 1D world?

• Anonymous
  April 14, 2011
  Sorry, but Microsoft wants to forget Vista ever happened, so don't expect IE 10 for it

• Anonymous
  April 14, 2011
  Does this mean that next version of SQL Server Reporting Services will finally support multi-column reports in the browser and not just through a PDF?

• Anonymous
  April 14, 2011
  @Parrotlover77 Grid is better than tables because you are not locked into a specific layout like you would be with tables.  You get the same effect (laying out based on a grid structure), however, if you put your grid within your markup you are stuck with it being that way.  If you define your grid in CSS, then you can change it out based on screen size, user preference, browser type (desktop vs mobile), etc. You could even do away with it if you do a site look and feel redesign without having to go back to your content.  Grid layout is a great idea.  We need some form of it in CSS.

• Anonymous
  April 14, 2011
  @ Skylab:  Agreed, Please do not drop Vista Support. Someone needs to start a petition or something.

• Anonymous
  April 14, 2011
  It's like a built-in 960 Grid System or Blueprint grid

• Anonymous
  April 14, 2011
  I know this is offtopic, but I'd like to know some of the main reasons to develop a whole new JS VM (Chakra) instead of putting efforts on using the DLR and making it better.

• Anonymous
  April 14, 2011
  @Diego - They're entirely different products made by entirely different teams with entirely different schedules. Having IE take a dependency on .NET would complicate things significantly.

• Anonymous
  April 14, 2011
  The comment has been removed

• Anonymous
  April 14, 2011
  The comment has been removed

• Anonymous
  April 14, 2011
  Are we likely to see spellchecking in IE10? It's one of the most frequent feature requests we receive from clients. On another note, whilst I can appreciate the increased speed of IE releases, I think that it could prove problematic in the long-term: many corporate IT environments will not keep rolling out fresh versions of IE every year or so.  They might do it once or twice, though, leaving us with a very fragmented environment. Whereas we'll be able to target the latest Firefox (Chrome-like auto-updating is en route) and the latest Chrome, we may well have to support IE 8, IE 9, IE 10, IE 11, and so on, ad infinitum! Unfortunately, I'm not sure what can actually be done about this.

• Anonymous
  April 14, 2011
  @Chris Jones [MSFT] <img src="3Beagles.jpg" style="float: right"> must be instead/rather <img src="3Beagles.jpg" style="float: left"> otherwise your example does not make sense. This is the 2nd time I'm posting this. Your blog application must be buggy. Gérard Talbot

• Anonymous
  April 14, 2011
  Corporate update schedules are based on internal application support needs. Believe me, the IT groups in these organizations know very well what IE version they're on and why, plus they will have update plans in place. Their equipment is primarily for operating these applications, not cruising the web, and they really couldn't care less if Suzie down in marketing has problems with a shopping site she's not supposed to be viewing during company hours anyway. My company is rolling out 10K+ Windows 7 desktops by December 31. Our XP stations are getting updated with IE8 ahead of the general OS update.  We've set up a beta testing group to start using IE9 as a daily browser. We report back all of our issues, and from that create update plans. By the time we're over the hurdle of the OS roll out, we'll have enough IE9 testing data to begin the update. Our big change is the OS, and then we'll be doing IE updates with a 6-8 month lag behind RTM, depending on the issues we find. It may be faster if the browser core doesn't change and our major applications don't fail. We would have moved to IE8 months ago, but a major ERP vendor refused to guarantee their product would work with it. Not Microsoft's fault. We now have the guarantee in hand and we're moving ahead. The solution to the "problem" is good IT management, not letting the latest and coolest drive business decisions, and understanding the difference between personal, consumer web sites and mission-critical business applications. As for spell checking, I use ieSpell w/o a problem and always have. wafsd

• Anonymous
  April 14, 2011
  Please develop Internet Explorer 10 for Windows Vista, or it will become Irrelevant Explorer.

• Anonymous
  April 14, 2011
  The comment has been removed

• Anonymous
  April 14, 2011
  It's interesting that a lot of these features look exactly like how WPF implemented it.

• Anonymous
  April 14, 2011
  Is the multicolumn concept now not just an simple grid with columns only?

• Anonymous
  April 14, 2011
  @Kevin: That's exactly what I thought, too.

• Anonymous
  April 14, 2011
  Keep up the good work. It's good to see the browser as it evolves, I enjoy the blog posts. More technical ones would be good too.

• Anonymous
  April 14, 2011
  The comment has been removed

• Anonymous
  April 14, 2011
  The comment has been removed

• Anonymous
  April 14, 2011
  Certainly a welcome feature. Being forced to use HTML/CSS after experiencing XAML is sometimes painful. @RP: Apparently a spokeswoman from Microsoft confirmed to Computerworld that Vista will not be a supported platform (www.computerworld.com/.../Windows_Vista_No_IE10_for_you). I think you're correct in saying that the IE Team hasn't made any comment about this. There is always the chance that Microsoft's plans will change - IE9 was going to need Windows 7 SP1 (rather than SP0), but that requirement was later dropped (a service pack is less significant than a new OS, of course). As long as the decision has been made on sound technical grounds (IE10 requiring new APIs available only in Windows 7+), it's hard to argue against it. Still, I'd like to see Microsoft support the unfairly maligned Vista for a while longer. It always puzzles me to see people who hated Vista gushing over Windows 7 - the latter is certainly a fantastic operating system, but it built on its very solid predecessor.

• Anonymous
  April 14, 2011
  McZ, "Very nice features. But a constant thing customers are requestioning is still missing. It's the possibility to have the pictures somewhere in the area where the text is with the text floating around it. If you like, exactly the behavior of Word or Publisher. I would propose to enhance float into that direction:..... etc." It seems that years of being a Microsoft developer got to you ;-) The right address is w3.org, not microsoft.com. On the other hand i heard the Silverlight team takes feature suggestions.

• Anonymous
  April 14, 2011
  The comment has been removed

• Anonymous
  April 14, 2011
  html5test.com/results.html

• Anonymous
  April 15, 2011
  please stop posting bad code samples - clean up your code before posting. </div > is not how to end a tag.

• Anonymous
  April 15, 2011
  The comment has been removed

• Anonymous
  April 15, 2011
  The comment has been removed

• Anonymous
  April 15, 2011
  The comment has been removed

• Anonymous
  April 15, 2011
  The comment has been removed

• Anonymous
  April 15, 2011
  @shaun What are you talking about? </div > is perfectly validating HTML. Sure, it might not suit your refined aesthetic sense, but it's not by any means a "bad code sample".

• Anonymous
  April 15, 2011
  The comment has been removed

• Anonymous
  April 15, 2011
  The comment has been removed

• Anonymous
  April 17, 2011
  First, I use Opera. But am a .NET-developer. So I'm neither a MS-fanboy nor a MS-hater. In fact, I have tried the W3C.org-way, it's ridiculous. Not even an answer. I've come to the impression, that proposals are only taken when a large company with large server farms are making them. Like WebSockets, WebWorkers, Web-you-name-it.

• Anonymous
  April 17, 2011
  gkv, what rubbish. "How dare we expect Microsoft to stand behind the products we paid for, how dare we not upgrade every 6 months to keep up with their fiscal needs." Name any Microsoft product that gets updated every 6 months, much less have the support lifecycle run out. Come on, name one. Certainly not their OS products. "XP being 10 years old means little." Really, because that's TEN YEARS of active support. Can you name ANY other software by ANY other vendor that's had support for as long? Heck, can you name any product of any kind that has support lasting that long? The closest thing I can come up with are cars, and not many cars are expected to still be running after this amount of time and are certainly no longer under even an extended warranty. IIF Microsoft drops Vista support with IE 10, they'd be making a mistake, but it's not the same thing as stopping support entirely. No one will be "forced to upgrade" due to this, and if they choose to do so it certainly won't be in your 6 month time frame. That time frame passed quite a while ago, and it will be more than 6 months before IE 10 is released. Your "economic climate" comments are just as ridiculous. No company that deserves to still be profitable will choose to upgrade if they are in a fiscal downturn. Those XP boxes? Well, the hardware is probably at "end of life" now, and they'll be getting Win 7 upgrades "for free" with the new hardware purchases... if they've not been acquiring Vista licenses over the years anyway. IE 10 not being supported on older OSes? Oh noes, we have to upgrade the entire enterprise so that we have the shiny new WEB BROWSER. You know, the software that's probably NOT critical to day to day operations, certainly not critical enough that we HAVE to have the newest version to get the job done. Don't make a mountain out of an ant hill.

• Anonymous
  April 18, 2011
  Erm, so far only the platform preview only requires 7, this doesn't mean that the final release of IE10 will require windows 7. All that would likely mean at the moment is that the platform preview is being developed and tested on 7 only so far. We are a long way off of a release of a new version, so we don't know what it will support right now.

• Anonymous
  April 18, 2011
  @wekempf > IIF Microsoft drops Vista support with IE 10, they'd be making a mistake, > but it's not the same thing as stopping support entirely. If you visit microsoft lifecycle support for its products support.microsoft.com/.../lifeselectwin , you will see that Windows Vista support (Mainstream Support; there is no extended support for Vista) ends on april 10th 2012. Absolutely everything in this blog so far and other pieces of info elsewhere suggest that Windows Vista will not support IE10. > No one will be "forced to upgrade" due to this After april 2012, Windows Vista users will have to make a choice somehow. After april 2012, Windows Vista users still may not be "forced to upgrade" but who would want to use an operating system that has no security updates available and no support whatsoever? After april 2012, I bet Windows 8 will be by that time (what a pleasant  coincidence!) available for purchase (upgrade) for Vista users and it will have IE10 (the honey-incentive supposed to drive Windows 8 sales). > Those XP boxes? Well, the hardware is probably at "end of life" now You are mentioning one of the reasons why I gradually, progressively stopped using Windows and turned to Linux Kubuntu: new version of Microsoft Windows always require more powerful and faster hardware, more CPU, more RAM, faster FS bus, more memory and processor power/speed in video cards and overall more and more fast+powerful user system resources just to run Microsoft softwares. The memory footprint always increases. And nothing suggests this is going to change in future Windows versions. > and if they choose to do so it certainly won't be in your 6 month time frame. (Mainstream Support End Date of Windows Vista) - (General Availability Date of Windows Vista) = 5 years 3 months. So, while it is not 6 months, it is not 10 years either. XP users will have had 12 years ½ though! So, it is perfectly understandable why a Windows Vista user would be upset here. > they'll be getting Win 7 upgrades "for free" with the new hardware purchases Translation: the cost of the new PC will surreptitiously include the cost for Windows 7. So, they will be paying for Windows 7 - like it or not; aware or not - even if they are (or not) under the impression that the operating system comes with the hardware for free. > Don't make a mountain out of an ant hill. Consider that we are talking of a few hundreds dollars per PC. Consider that the cost of the PC may include other MS softwares (honey-incentive) which may not be clearly stated as such. Consider that paying for the cost of a Windows 7 licence pays, for instance, for the right to use H.264 video codec (royalties). Multiply all the above by a few millions of users and small businesses and I say you have a mountain of money here. Gérard Talbot

• Anonymous
  April 18, 2011
  The comment has been removed

• Anonymous
  April 18, 2011
  wekempf: "Name any Microsoft product that gets updated every 6 months, much less have the support lifecycle run out. Come on, name one." Umm? IE10? Although they might delay its release artificially to after April 2012 purposefully so that they can say "hey Vista is under extended support now".

• Anonymous
  April 19, 2011
  The comment has been removed

• Anonymous
  April 19, 2011
  The comment has been removed

• Anonymous
  April 20, 2011
  The comment has been removed

• Anonymous
  April 20, 2011
  @klimax First, your very first words in your first post addressed to me said that I tried to make as wrong comment as possible. I invited you to compare hardware requirements for Windows 7 and Linux Kubuntu or Linux Xubuntu. I was expecting you to at least answer this part of my reply. This kind of info was and still is extremely easy to find and then compare. >> Linux [K|X]Ubuntu can run on a netbook (mini-portable laptop); not possible under Windows Vista and Windows 7 unless >> adding more memory (512MB or more)." > Not true. I use old netbook originally only for XP with 7+Aero and it runs well. (only upgrade was SSD...) I do not invent out of nowhere this sort of information. Real people have been coming to our meetings with their netbooks; they had Windows7 installed but they stopped using these because it was too much RAM memory hogging, generally too slow (disk swapping). So they installed Linux Ubuntu. There has even been a tv consumer review done on netbooks (mini-laptops): their own testing lead them to recommend the netbooks (Asus 1001PX-MC27-BK was their #1 recommendation) that had more RAM, more powerful video card and more hard-disk space for/before buying a netbook. The one thing they never considered while testing was the operating system: they did all their testing on Windows 7. > stop talking about something you know much less. "The human mind works like a parachut: it works when it's opened."  American saying Gérard Talbot

• Anonymous
  April 20, 2011
  YES! YES! I LOVE YOU! Multi-column layout! YES! I'm so happy now :)