IE 10 has recently graduated from beta and is now the current official release. It started out Windows 8 only, but now is available on 7 as well as a preview release. Hopefully that will allow it to grab more IE users quickly. IE, which has long been the bane of web developers, has been getting better and better with each release. IE 6 has always been a pain to develop for, having many bugs/quirks in rendering pages. In all but fairly simple sites, it always took me a fair amount of time to fix after getting things looking right in other browsers. Luckily, the market share is low enough that at work we don’t even worry about it anymore. IE 7 was better. Using a subset of HTML4/CSS2 level development, I usually have had to do only minor tweaks unless the sites were fairly complex. Luckily, It’s share is almost to the cutoff point where we stop developing for it as well. With IE 8, I’ve been able to do most HTML4/CSS2 level stuff without worries. display: inline-block;, :before, :after, onhashchange, etc. It still remains a limiter in using some selectors and in making use of HTML5/CSS3 level techniques, though using an HTML5 shiv and CSS3 PIE or allowing for progressive enhancement to skip over some features in it works rather well. IE 9 has brought some HTML5/CSS3 stuff to the table, like selectors, HTML5 semantic elements, SVG, though it’s missing some important ones, like CSS3 columns and HTML5 form stuff. Since I develop to support IE 8 usually without browser specific tweaks, IE 9 basically works automatically, and has some style enhancements over 8.
And now there’s IE 10. IE 10 has added a lot more and is finally coming close to other browsers in implementing the not-yet-fully-standardized standards. It’s still missing some good ones, but the list of things that have to be skipped, worked around, etc, for IE’s current version has shrunk a good bit. It even implements some features that others haven’t yet.
The big one is the CSS3 grid layout module, which is the one I’m most excited about for the future. This module is pretty close to allowing for a real decoupling of markup from style that CSS has promised finally for page layout. With the old styling technique of using floated divs, containers must generally go in a certain order. There is some flexibility, but not enough for stuff like navigation below the main content in the markup but above it in the layout, and it is fairly inflexible as far as widths/heights of containers. Using position: absolute opens up some possibilities for changing source order, but then creates problems with changing content sizes and responsive design and can be a pain to manage. Flexbox finally brought some real source order independence to layout. Things could be marked up in whatever order you want and laid out in a completely different order. It also allows for the width/heights of the flexbox’s children to be apportioned across the container in a defined, flexible way and brings the much needed vertical-align: middle and equal height columns to containers that tables have had since days of yore. But it only allows for layout along one axis. If you want some containers to be next to each other on another axis, you have to create a wrapper container for them with their own flexbox or other layout. It also has suffered from major spec changes, and, of course, hasn’t had IE support till 10.
In comes the grid layout. It can do all the flexbox can, plus more. It allows gridding out containers in both columns and rows like a table would allow, but with source order independence and semantics, positioning containers over other containers, and multiple layouts for the same markup with media queries. It has two different fairly nice and simple ways of defining where the grid ‘cells’ go. One involves giving the cell containers numbered row and column positions with optional row/column spans. The other involves defining named positions in a string based template, then assigning the cell containers to a named position. Each cell column and row can be given a flexible or unit based width/height.
The one big thing it’s missing as far as a theoretical layout system with true source order independence goes is that, like flexbox, it only works with direct descendants of the grid container. So if, semantically, some containers that are part of a layout ought to be inside a semantic container, or if a wrapping container would be key to allowing fallback styling for older browsers, with floats or whatever, a new grid layout would need to be created just for those containers, and they would only be able to be moved within their subset of the main layout. That is an annoying limitation that will hopefully be worked out at some point. Regardless, it is a huge step toward an ideal layout system, and I can’t wait till browser support is high enough to use for client sites.
Right now, though, the spec is still in flux and has changed enough that even IE 10’s implementation is different than the current spec and is missing some parts of it. This will definitely slow implementation and make it hard to develop for. And of course, the browser support is abysmal, with just one version of one browser. Hopefully others will bring this in and then drive the spec toward a final, and hopefully better, state. And then, hopefully, the market share of browsers that don’t support it will go down quickly.
In the mean time, I intend to play with it and do a new layout I’m planning for my own site with it. I’ve purchased Windows 8 for my Windows computer partly toward that end. I will likely post more specifics about it as I play with it more.