Partager via

Moving the Stable Web Forward in IE10 Release Preview

  • Article

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

  • Anonymous
    June 06, 2012
    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

  • Anonymous
    June 06, 2012
    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

  • Anonymous
    June 06, 2012
    Can you please make loading indication when an iframe is loading?

  • Anonymous
    June 06, 2012
    Will you ever update IE desktop settings ui or it will remain like this for the next 20 years?

  • Anonymous
    June 06, 2012
    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!

  • Anonymous
    June 06, 2012
    The comment has been removed

  • Anonymous
    June 06, 2012
    The comment has been removed

  • Anonymous
    June 06, 2012
    @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.)

  • Anonymous
    June 06, 2012
    Nice effort. Still irrelevant when you lock in IE10 to windows 8 imo. Too little too late.

  • Anonymous
    June 06, 2012
    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!

  • Anonymous
    June 06, 2012
    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.

  • Anonymous
    June 06, 2012
    The comment has been removed

  • Anonymous
    June 06, 2012
    @RF, if it's any consolation, I got the reference.  And I played Descent 1, 2, AND 3 :-)

  • Anonymous
    June 06, 2012
    The comment has been removed

  • Anonymous
    June 06, 2012
    The comment has been removed

  • Anonymous
    June 06, 2012
    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?

  • Anonymous
    June 06, 2012
    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.

  • Anonymous
    June 06, 2012
    The comment has been removed

  • Anonymous
    June 06, 2012
    What about the properties on "multi column layout"? They were not vendor-prefixed at least in Consumer Preview...

  • Anonymous
    June 06, 2012
    css gradients.... Please let Mozilla know... see www.colorzilla.com/gradient-editor

  • Anonymous
    June 06, 2012
    @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.

  • Anonymous
    June 06, 2012
    The comment has been removed

  • Anonymous
    June 06, 2012
    @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!

  • Anonymous
    June 06, 2012
    Looking forward to IE10! :-)

  • Anonymous
    June 07, 2012
    I'm already waiting for IE11 because IE10 miss a lot of good features.

  • Anonymous
    June 07, 2012
    The comment has been removed

  • Anonymous
    June 07, 2012
    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.

  • Anonymous
    June 07, 2012
    The comment has been removed

  • Anonymous
    June 07, 2012
    So can we finally download the Windows 7 version of IE10 somewhere?

  • Anonymous
    June 07, 2012
    Where's the Windows 7 version?!?!??! When are you going to fix the comment system on this blog?!?!?

  • Anonymous
    June 08, 2012
    The comment has been removed

  • Anonymous
    June 08, 2012
    The comment has been removed

  • Anonymous
    June 08, 2012
    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.

  • Anonymous
    June 08, 2012
    @Fleet Command - I would not say "lost", I would say "losing". The majority of the users still use Internet Explorer.

  • Anonymous
    June 09, 2012
    The comment has been removed

  • Anonymous
    June 09, 2012
    The comment has been removed

  • Anonymous
    June 09, 2012
    The comment has been removed

  • Anonymous
    June 10, 2012
    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:
  3. Youre Browsers cause major unnecessary costs in web development due to wasted hours, just to make things IE compatible
  4. You don't create any income for microsoft
  5. Your Browser only works on MS Plattforms and therefore can never be treated as a standard
  6. 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.

  • Anonymous
    June 10, 2012
    The comment has been removed

  • Anonymous
    June 10, 2012
    The comment has been removed

  • Anonymous
    June 10, 2012
    @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.

  • Anonymous
    June 11, 2012
    The comment has been removed

  • Anonymous
    June 11, 2012
    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!

  • Anonymous
    June 11, 2012
    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.

  • Anonymous
    June 13, 2012
    The comment has been removed

  • Anonymous
    June 19, 2012
    You Guys rock! A W3C-conform browser! With CSS3! And all this in 2012! Awesome!