Moving the Stable Web Forward in IE10 Release Preview


As part of Windows 8 Release Preview planning, we reviewed all the W3C draft standards supported by IE10. In particular, we looked for those specifications that:

  • Are stable, that is, there were no recent additions or changes and no renaming or major changes are expected;
  • Are supported by at least two browsers other than IE10;
  • Are interoperable across all these browsers for the features’ core use cases;
  • Are already used on the Web, including in their unprefixed form; and
  • Reached Candidate Recommendation since Windows 8 Consumer Preview or are likely to become Candidate Recommendations in 2012.

The following W3C draft standard features match these criteria and IE10 now supports them in their unprefixed form:

For compatibility with sites and apps developed using the Windows 8 Consumer Preview, IE10 also supports these standards in their vendor-prefixed form using the Microsoft vendor prefixes (‑ms‑/ms).

IE10 also supports the following W3C draft standards in vendor-prefixed form. We believe these drafts do not yet meet the criteria listed above:

From Experimental to Stable

When Web browsers implement emerging standards they do so by marking the new features with their own vendor prefix: a style property prefixed with ‑moz‑ indicates an experimental CSS feature in Mozilla’s Firefox, ‑ms‑ means the same for Microsoft’s Internet Explorer, ‑o‑ for Opera, and ‑webkit‑ for WebKit-based browsers including Google’s Chrome and Apple’s Safari. The features’ object model equivalents are similarly prefixed.

New platform APIs such as window.requestAnimationFrame() are likewise currently invoked as window.mozRequestAnimationFrame(), window.webkitRequestAnimationFrame(), or window.msRequestAnimationFrame().

Browser vendors generally drop their prefix once the corresponding specification reaches the Candidate Recommendation stage. This naming convention has a number of objectives, among which:

  • Allow the specification to evolve: without prefixes web content written for the earliest implementation(s) could constrain the editor(s) and make useful additions or changes difficult or even impossible, and
  • Segregate experimental implementations: the bugs or choice of draft version of a particular browser have no impact on other browsers.
  • Style sheet documentation: the vendor-specific dependencies of a style sheet are explicitly documented

Other standards may not rely on vendor prefixes at all. For instance, browser vendors never prefixed the new HTML elements introduced by the HTML5 specification such as <canvas> and <video>.

The Web’s Best Practices

In practice, there comes a time when several browsers support the same draft feature in an interoperable manner. As a result, Web developers find themselves writing declarations such as:

-webkit-transform: rotate(30deg);

-moz-transform: rotate(30deg);

-ms-transform: rotate(30deg);

-o-transform: rotate(30deg);

After copy and pasting this pattern a number of times, many developers assume the forthcoming W3C standard will be backward compatible with today’s Web. They proceed to “future-proof” their style sheets by adding an unprefixed version of the property:

-webkit-transform: rotate(30deg);

-moz-transform: rotate(30deg);

-ms-transform: rotate(30deg);

-o-transform: rotate(30deg);

transform: rotate(30deg);

From a web developer’s point of view, the above set of declarations is now ready for future browsers that support unprefixed CSS Transforms.

Past standard features have in fact validated this pragmatic assumption. When IE9 added support for the unprefixed border-radius property in its first Platform Preview, our team saw the feature “light up” across many sites due to the future-proofed style sheets already deployed.

A number of features are going through the same evolution now. Not only are many CSS Transitions demo pages already future proofed – see Paul Hayes’ parallax effect or Lea Verou’s animatable gallery – but open source projects such as Google’s html5slides, designers’ home pages, site logos and tutorials routinely include unprefixed transition declarations.

Many transition effects involve CSS Transforms, tutorials for which also frequently declare unprefixed transform properties.

Finishing the Specs

Even as Web developers anticipate browser convergence in their new markup, the standardization process is far more conservative. While border-radius worked interoperably enough for thousands of Web sites, members of the CSS Working Group were busy defining the rendering of more complex cases such as the appearance of a rounded corner between two adjacent borders of variable widths and colors. Likewise, the CSS Transitions, Animations, and Transforms editors are working to specify error conditions, fix errors, or clarify less common scenarios.

While these issues must be resolved to ensure a high level of interoperability and to reach Recommendation status, relatively few of them will affect current and future content. Once a specification is stable and interoperable the web should not be held back by the last corner cases. This was not necessary for new HTML5 elements or to finalize the CSS2.1 spec, neither of which required prefixing.

While solid specifications backed up by complete public test suites are critical, requiring all Web developers to repeat the same declarations multiple times until a Candidate Recommendation is published prioritizes spec completeness over content stability.

Finishing a specification is a time-consuming effort. To take one example, CSS gradients emerged in 2008, the first Working Draft specifying an interoperable solution in 2009 and the Candidate Recommendation was published in April 2012. In the meantime, the standardized syntax became incompatible with the prefixed syntax deployed on many Web sites. The Release Preview of IE10 is the first public unprefixed implementation of the latest spec. (IE10 also supports the more interoperable prefixed version with the ‑ms‑ vendor prefix.)

What It Means For Your Code

CSS gradients

While broadly interoperable, the prefixed gradient syntax supported by all modern browsers reflects a now obsolete draft version of the specification. This earlier syntax is incompatible with the current Candidate Recommendation. For example, if you have declared the following gradient:

background: -ms-linear-gradient(left, yellow, red);

Then producing the unprefixed equivalent is not simply a matter of removing the ‑ms‑ prefix. Because IE10’s unprefixed linear gradient function conforms to the latest specification, it should become:

background: linear-gradient(to right, yellow, red);

A future blog post will cover IE10’s support for CSS gradients in more detail.

Cascading and the CSS Object Model

The cascade will resolve prefixed CSS properties as expected; given the following rule (notice the higher rotation angle in the unprefixed declaration):

-ms-transform: rotate(30deg);

transform: rotate(60deg);

Your element will rotate 60 degrees: the two properties are treated as aliases of each other and the last declaration wins. Their corresponding CSSOM properties are also aliases: if you request the computed value of the transform and msTransform style properties they will both reflect the winning 60 degree transform.

Likewise, setting element.style.transform will also set element.style.msTransform and vice-versa.

Serialization of property names

Properties such as transition-property take a list of CSS property names. For instance, to make the transform property transition over 2 seconds in IE10 Consumer Preview a developer would write:

-ms-transition-property: -ms-transform;

-ms-transition-duration: 2s;

IE10 Release Preview will serialize the value of both style.msTransitionProperty and style.transitionProperty as ‘transform’. Note that the original prefix is not preserved.

This is also true for the propertyName property of transition events.

Animation and Transition event type names

IE10 Release Preview allows the registration of Animation and Transition event listeners using both prefixed and unprefixed names i.e. the following are equivalent:

element.addEventListener("MSTransitionEnd", myHandler, false);

element.addEventListener("transitionend", myHandler, false);

But IE10 Release Preview will always return an unprefixed name in the type property of the event object.

What’s Next

We will submit new test cases to the W3C for all the features that IE10 now supports without a prefix. As Working Group members and co-editors, we will work with our colleagues to move these specifications forward to Candidate Recommendation.

We welcome feedback you have on our support for these feature and their cross-browser compatibility.

—Sylvain Galineau, Program Manager, Internet Explorer

Comments (46)

  1. Mike says:

    Does IE10 format large tables correctly now? In particular, see this well-known bug: stackoverflow.com/…/ie9-table-has-random-rows-which-are-offset-at-random-columns

  2. Mohammed B Sindi says:

    Wish you speed up its release since I am having some problems with version 8 and 9 and currently no ie on my pc, using Mozilla

  3. pablo says:

    Can you please make loading indication when an iframe is loading?

  4. Will you ever update IE desktop settings ui or it will remain like this for the next 20 years?

  5. Bill says:

    Your Comment form is still broken – please stop posting new articles until you fix it once and for all!

    Your Comment form is still broken – please stop posting new articles until you fix it once and for all!

    Your Comment form is still broken – please stop posting new articles until you fix it once and for all!

    Your Comment form is still broken – please stop posting new articles until you fix it once and for all!

  6. temp says:

    IE designer team sucks. +1 with @W74ever.

    We cannot have a descent UI.

  7. pmbAustin says:

    Please bring back the IE8 separate search box in IE10-Desktop, at the very least as an OPTION that power-users can turn on.

    Please add support for favorites/bookmarks to IE10-Metro.

    Please add ability to have tiles for both IE10-Metro adn IE10-Desktop on the Start Screen.

    Please make the default behavior of IE10 in Windows 8 to be "Launch IE10-Metro if in Metro app, but launch IE10-Desktop if on desktop", and enable this same behavior in other applications (like Video vs. Windows Media Player, Music vs. Windows Media Player, Mail Metro app vs. Windows Live Mail or Thunderbird or other desktop mail app, etc).

    Please update IE10 at regular intervals (every six months?) with updated standards support, so that it isn't constantly falling behind other browsers with much more agressive update schedules than "once every two or three years".

  8. RF says:

    @temp — man, the Descent UI was awesome. I mean, three degrees of freedom, pulling off on such basic hardware in the '90s, and such great gameplay. I wish we could have Descent UI. (Like, three people will know what I'm talking about here. If you don't, just rest assured I'm not seriously talking about IE.)

  9. Duckie says:

    Nice effort. Still irrelevant when you lock in IE10 to windows 8 imo. Too little too late.

  10. sam says:

    don't post a new blog post until there is a new IE10 build out for windows 7! I can't see how it is going to be stable since there has been no public testing. Thanks for nothing MS!

  11. Tom says:

    Please reduce the total memory consumed when opening 5 tabs for 5 different web sites especially when compared to other browsers (mozilla, safari, etc).  IE dramatically slows our less than 2 year old windows machines even though they have 2gb ram.   Our users run IE with 5-7 tabs open, word, excel, outlook and a messenger program.

  12. Xero says:

    A good thing about IE (which others like FF miss) is that when you search on page (Ctrl+F), it shows the count of occurrence and the number of current selection (like 2 of 3). This is present in IE4-IE10 except for Metro IE9 in Windows Phone. But now in IE10 Metro, they bring it back! Thank you. Now, please resolve this issue: connect.microsoft.com/…/soft-hyphen-should-be-ingored-when-the-search-function-is-used

    @Tom, with IE9 and IE10 now, the memory consumption is drastically reduced. Speaking of Firefox, even the FF13 is a memory hog compared to IE, Chrome and Safari. IE10 is pretty fast as in loading time and response time. Just with some intense and complex DOMs, it slows down the page rendering and fortunately those edge cases (which are very rare in use) are currently under review by IE team as well.

    @Duckie, @sam, I agree with yall, its frustrating. According to IE team, Windows 7 will get RTM version (sometimes referred as RTW – release to web) will be released for Windows 7 as well. Stay tuned for the happy news any day now! 😎

    @pmbAustin, some nice points you raised  :-). .  You talked about:

    Favorites in Metro IE:

    Access to Favorites/bookmarks is mandatory and they need to make it roam across the browsers and across multiple platforms/devices. Like Windows Phone, Windows 7, Windows 8, IE9, IE10, Firefox and Chrome. To make it that pervasive, they need to incorporate BingBar (for IE7-IE9 and non-IE browsers), WindowsLive/SkyDrive (as a common medium), built support in IE10 (desktop, metro and windows-phone) to auto-sync favorites with cloud and support to manage (edit, update, view and retrieve) favorites/bookmarks and categories on SkyDrive website (in contrast with contacts.live.com, there must be favorites.live.com with similar functionality)!

    Update IE10 regularly:

    Check out the screenshot of IE10 about dialog: i45.tinypic.com/312xzsg.png Its already there! 😎

    @ieblog, thank you for bringing about improvements!

  13. pmbAustin says:

    @RF, if it's any consolation, I got the reference.  And I played Descent 1, 2, AND 3 🙂

  14. Trevor says:

    – Missing bookmark support

    – Can we get a windows 8 version without Metro? For those of us that want to get stuff done instead of play in the land of animated tiles until we suffer from epilepsy! (you do recall that everyone hates animated advertisements on the web right?)

    – on install of Windows 8 we don't see the screen to choose which browser we want to install!? Is this a beta bug that will be fixed in RTM win8?!

    – since our desktop mouse wheels spin vertically on 95%+ of your windows install base can we switch the default paging of tiles in Metro to vertical instead of horizontal?

    – will Microsoft be backporting the spellchecker it finally added after a decade of complaints to IE9, IE8 etc.?

    – will Microsoft be addressing the comment form on this blog to make it work every time? PS quick tip! Here's the code you need to add:

    <input type="submit" value="Post"/>

    Yup! That's it! 35 characters will take you from a non working blog to a working blog!

    Luckily the embarrassment of this not being fixed yet hasn't caught the attention of your shareholders that believe your mobile strategy is going to work and developers are going to jump on board.

    So lucky that they haven't seen that you've neglected a 35 character fix for over 6 years.

    Wow can you imagine the egg on your face if the investors saw the real Microsoft instead of the fake one they see in PR events! OMG!

    IE Blog comment system is a TOTAL EPIC FAIL!!!

  15. sevenacids says:

    @pmbAustin: Can you please explain the advantages of a separate search box? I mean, in Firefox, for example, I find it quite silly to still have a separate box to search. What for? You can choose a different search provider in the One box of IE, too. There's no reason to have two boxes here, it only clutters the UI and makes it more complex than it has to be. Frankly, since I use IE as my default browser, I always use the address box in Firefox to search, too.

  16. davis says:

    Trevor, spell-checking was previously announced for IE10 on Windows 7 and system-wide on Windows 8.

    But where is IE10 on Windows 7 *cough* hmm?

  17. Paul Irish says:

    Everything about this post is awesome. Congrats IE and thank you Sylvain!

    Now off to remove the ms prefixes on transitions, gradients, rAF, and keyframe animations.

  18. All of a sudden and comments have filled almost half of the page! I have to say, life must be better without any prefixes… It is one of the reasons I do not quite like Firefox – though I certainly prefer it to IE 6 – that Firefox doesn't even support box-sizing and uses -moz-box-sizing instead! But of course @Paul Irish, it's not time IE remove the -ms- prefix on gradients for the ms and webkit do not do quite the same on gradients…

  19. What about the properties on "multi column layout"? They were not vendor-prefixed at least in Consumer Preview…

  20. Rob^_^ says:

    css gradients….

    Please let Mozilla know…

    see http://www.colorzilla.com/gradient-editor

  21. davis says:

    @Vic, Microsoft previously said major milestones only – beta and RC – would appear for Windows 7. We're at RC for Windows 8 and IE10 will RTM by the Windows 8 RTM, but yet no Windows 7 preview release.

    For comparison, IE8 beta and RC releases appeared without problem for Windows XP and Windows Vista, and IE8, despite being in loose development sync to Windows 7, RTMed before Windows 7. There's even a blog post here explaining the extra work that was done on IE8 for Windows 7 between its XP/Vista RTM and the Windows 7 version.

  22. Tom says:

    @pmbAustin

    "Please bring back the IE8 separate search box in IE10-Desktop, at the very least as an OPTION that power-users can turn on."

    Real power users use Ctrl+E

  23. Minhaz says:

    @Tom, I agree with you. Even to search with multiple provider, there are some real powerful shortcuts. Like I have set two search providers in IE9; bing (default) and google. If I need to search something on google (next to default) I will follow this sequence:

    Ctrl+E, <enter search term>, Ctrl+DownKey, Ctrl+RightKey, <enter>, <enter>

    to search with default provider

    Ctrl+E, <enter search term>, <enter>

    to search with term in the clipboard or open the copied url (to perform 'paste and go'):

    Ctrl+Shift+L

    Hope this help someone!

  24. Esben Sundgaard says:

    Looking forward to IE10! 🙂

  25. temp says:

    I'm already waiting for IE11 because IE10 miss a lot of good features.

  26. pmbAustin says:

    @Minhaz & @Tom, I vastly prefered the old way with the separate search box.  I don't like my 'searches' to pollute the address box drop down.  Never mind it's an ADDRESS BAR.  I hate it when two completely unrealted things are combined.  But even more, searching with multiple providers is VASTLY easier with the separate search box… your search term STAYS IN THE BOX, unlike the address bar where it disappears and is replaced by the actual URL… and al you need to do is hit the drop down and click the provider you want to repeat the search with.  It's so fast and simple and uncluttered and uncomplicated.  

    I hate everything about the "one big goober combined mess" bar, and I *only* use it as an Address/URL bar.  Because THAT IS WHAT IT IS FOR.  I'm sick of being told it makes a "good enough" search replacement, because NO IT DOES NOT.

    BRING. BACK. THE. SEPARATE. SEARCH. BOX.  As an option for *real* power users, at least.  The code already exists (it's right there in IE8), just put it back.  Sheesh.  How hard can it be?

  27. pmbAustin says:

    For the record, the way I do searches now in IE9?  I turn on the "favorites bar", and put both Google and Bing on there, so I have one-click access to the actual search sites.  It's an extra step, but it's still TONS better than using that the URL bar for "searching".  I really cannot stand using that bar for searching and don't understand why anyone else thinks it's a good idea, to be honest.  I really don't.  Talk about a 'Toaster Fridge".  It's such a pain, and just really breaks all my flow.  It's too messy and complicated to have searches and URL histories mashed together like the "One Bar" does.  I hate it so much, that I actually never use it at all, and just go to the sites and search from there… because I find that easier and "less messy".  The separate search bar is simple, it's clean, it's neat, and my search term stays there for one click access (I frequently need to "go back" to the results) no matter how far I've wandered.  It has EVERY advantage over the OneBar concept.

    BRING. IT. BACK.

  28. pure says:

    I think the problem with the search box is not that it's gone and integrated in the address bar since IE9, it's people not having enough time to open up the Google, Wikipedia, etc. website and type their search there. Seriously, how much time do you actually save by using a search box, if any? It can only be a few seconds.

    It would be nice to have a search pane instead: Just type Ctrl+E (or click a magnifier icon, for example) and a favorite-like pane appears, containing a text box at the top where you can type your search (main search provider selected by default), and a listing of your recent searches underneath, grouped by all installed search providers. Now your latest searches are only two clicks away.

  29. Martijn says:

    So can we finally download the Windows 7 version of IE10 somewhere?

  30. Harry says:

    Where's the Windows 7 version?!?!??!

    When are you going to fix the comment system on this blog?!?!?

  31. RedM@ says:

    What I'd like to see added back to IE10 is support for Discoverable OpenSearch providers (advertising the search provider via a <link> tag in the <head>), as described here:

    msdn.microsoft.com/…/cc891507(v=vs.85).aspx

    Many sites do include this, but do not clutter their interface with a link to add the search provider.  This is also true for some internal sites we use at work (which therefore are obviously not included on the IE Gallery).  Tools like the one on EnhanceIE.com work ok, but are tedious, don't include a favicon (which is necessary to be useful in IE9), and do not support search suggestions.

    Please Fix! Maybe a seperate area in the search provider bar on the address drop-down that displays discovered providers, and highlight the search icon (similar to IE8's search menu), with a right-click-to-add on the discovered icons.

  32. Mary Joe says:

    The comment session won't timeout ever, if you login with windows live id (like lots of blog systems requrie). But if you dont want to login and retain your anonymity, then you have 12-15 minutes to send the comment, after that the server dispose the track of the visiting user and invalids the token. If you sit on the page more than that, refresh the page before you send the comment to get active and valid token from the server.

    Hope this helps.

  33. Good improvements. I am very sorry that they are in vain. Because you see, Internet Explorer has recently lost the browser war. It is no longer the most popular web browser. And it is unlikely to ever recover from its loss. So, you see, I do not think anyone cares whether Microsoft "move the stable web forward" or not. Users will have the stable web on their operating system of choice.

  34. PhistucK says:

    @Fleet Command –

    I would not say "lost", I would say "losing". The majority of the users still use Internet Explorer.

  35. pmbAustin says:

    So, this new "integrated" Flash player is on Desktop as well?  It seems so… and I'm having problems with it.  Many videos that used to play (on Tumbler sites for example) that played fine in the Consumer Preview release now just display as a white box (with a moving thumb showing where in the video it's playing).  Sound is find, but there's no picture.

    Any ideas of how to resolve this problem?

  36. pmbAustin says:

    @pure, I use search constantly in my work… so a few seconds here and there ads up to a whole lot of time over the course of a day, let alone a week, a month, or a year.

    I fail to see what harm there is in providing the OPTION to a separate search box if a user wants it.  Just like I fail to see the harm in letting users reposition the "home" icon to the left of the address bar if they want to.  The arbitrary restrictions to customization that exist in IE are kind of ridiculous, and a serious impediment to wider adoption.  The number one reason I hear people give for not using IE9 is because they can't customize the UI the way they want to work.

    A little work on allowing greater customization of the UI in IE10 would go a long way towards removing objections some people have to using it.  I love the few tweaks they've made to IE10 since IE9 (like some of the enhancmenets to the Favorites Bar, that allow you to just have the favicon and no lable, for instance), but allowing users to move the Home, Options, Favorites buttons around, and allowing the option of a separate search box that works like the one in IE8, would be AWESOME.  Best of all worlds.

    Why can't they do that?  Why won't they do that?  They can keep all the options the same as they are today, and just let users that want/need to alter things to fit the way they like to work the option of doing that.

    (And while they're at it, having at least the OPTION to easily view and browse favorites/bookmarks in IE10-Metro, and save the current page to Favorites so it can be easily accessed from IE10-Desktop in the future, would do wonders for IE10-Metro adoption)

  37. Just installed Windows 8 Consumer preview.

    And…after the horrible "why the hell do i have to switch to metro to chat and who thought removing the start menu was a faster way of doing things" shock…i tried ie10.

    Awesome work.

    Even sites that just won't work in ie9(without turning on compatibility…) work the way they should.

    BUUUUT!

    There is one feature that i think should be FIXED in ie10.

    Inline translate.

    Bing does seem to do a better job of translating pages….BUT….the new kid on the block(you probably know which browser i'm talking about) does the translation in a WAY WAY WAY more friendly way.Plus it remembers what i want automatically translated.

    Seriously…it's 2012.Opening new tabs and windows just so that i can see what the text looks in a different language is absurd.

    Are there any plans to bring this sort of "inline" translations to ie?

    I actually found myself turning on the other browser because i was just TIRED of having to click again and again just to have all the pages on a particular site translated…and still have them displayed as the site's creators wanted it to display.

    Anyway…good job overall 🙂

  38. Dave says:

    Please just do one of the following.

    1. Switch to either the webkit or mozilla engine

    2. Let other other Browsers take your place

    There are clear reasons I ask for this:

    1. Youre Browsers cause major unnecessary costs in web development due to wasted hours, just to make things IE compatible

    2. You don't create any income for microsoft

    3. Your Browser only works on MS Plattforms and therefore can never be treated as a standard

    4. Even the different versions of IE treat code totally differently

    If you want to keep the brand, why not do so using option 1, that could seriously make everybody happy, it could even put other browsers into the shade.

  39. MAG says:

    IE10 METRO FREEZE THEN OPENNING SITES WITH BIG CONTENTS

  40. pmbAustin says:

    The embedded Flash in IE10 (Metro and Desktop) fails to play a LOT of videos.  The sound is there, but the video is blank/white.

    So much for "it just works"…  this is a step backwards from the Consumer Preview where these videos at least worked in IE10-Desktop.

  41. Tom says:

    @pmbAustin  

    If you click the magnifier or press ctrl+e, the previous search term is displayed (text is selected for instant erase). Sorry, but it seems you are just whining blindly. Btw using a mouse cannot be faster than using a keyboard purely.

  42. pmbAustin says:

    @Tom, sorry, but I'm much more efficient with the separate search box.  And if your hand is already on the mouse, using the mouse is MUCH faster than using the keyboard.

    What is wrong with providing the option of a separate search box for those of us who don't want to pollute the address bar with search results and other crap, and want to use it as god intended, as the ADDRESS bar?  I don't mind if the default is to keep it hidden, but give me the freakin' option and let me work the way that works best for ME, not the way that you insist I work because…well… I'm not sure why.

  43. Comment form says:

    Are you going to fix the comment form?

    We'd like to provide lots of feedback but don't want to when we know the comment form will eat our posts!

  44. Robbie says:

    The comment form work fine if you log in.

    If you are not logged in and thus an anonymous visitor the comment form will expire after 15 minutes.

  45. Tom says:

    @pmbAustin

    If you want to type a new search expression fast then you have to switch to keyboard anyway, so using the mouse cannot be faster in this situation. If your hand is already on the mouse and you only want to change the search provider, then click on the magnifier and choose your provider. Sorry, but there is absolutelly no advantage of a separate search box, probably this is the reason it was removed.

  46. webdev says:

    You Guys rock!

    A W3C-conform browser! With CSS3!

    And all this in 2012! Awesome!