CodeinWP CodeinWP

Dropping -ms- Vendor Prefixes for IE10

The upcoming IE10 will continue to have strong support for a number of CSS3 features and HTML5 APIs. But if you haven’t yet heard, many of these features will be supported in IE10 unprefixed. These include:

  • Radial Gradients
  • Linear Gradients
  • Keyframe Animations
  • Transitions
  • Transforms
  • font-feature-settings
  • IndexedDB
  • requestAnimationFrame
Update (Dec. 17/12) Please keep in mind that certain features still require the use of the -ms- vendor prefix. For example, the hyphens property and any of the flexbox properties.

Similar improvements have been made in the upcoming Firefox 16. With regards to the -moz- prefix, this doesn’t really change the way we write our code, because there are stable versions of Firefox that support (using the -moz- prefix) all of those soon-to-be-unprefixed features.

But for IE10, this means it’s completely useless to include most of those features in their prefixed form. Yes, as the IE Blog article linked above points out, IE10 will still support those features with the -ms- prefix, to ensure existing code doesn’t break. But for almost all those features listed, the prefix is no longer necessary.

In other words, something like this:

.element {
  -webkit-transition: background-color linear .8s;
  -moz-transition: background-color linear .8s;
  -o-transition: background-color linear .8s;
  -ms-transition: background-color linear .8s;
  transition: background-color linear .8s;
}

Should now become this:

.element {
  -webkit-transition: background-color linear .8s;
  -moz-transition: background-color linear .8s;
  -o-transition: background-color linear .8s;
  /* -ms- prefix removed! */
  transition: background-color linear .8s;
}

Why Was -ms- There To Begin With?

Just so everyone understands: Developers have been including the -ms- prefix in these types of code blocks until now because IE10 has been in “Platform Preview” and “Developer Preview” mode (which is Microsoft’s weird way of saying “Alpha” or “Beta”).

All the features listed above have been supported by one or more of these “Preview” releases of IE10, thus moving developers to start including the -ms- prefix in their code, for “future-proofing”.

What About IE9?

The only feature listed above that is supported in IE9 is CSS3 2D transforms. So that’s the only one that benefits from keeping the -ms- prefix. That includes the transform property as well as transform-origin.

Update: 3D Transforms are not supported in IE9, so they too will be unprefixed in IE10. Details here.

Unfortunately, IE9 doesn’t support transitions, animations, or any of the other things listed as unprefixed in the upcoming IE10.

Lots of Stuff Needs Updating

This is a pretty significant change, and it affects a whole slew of websites, tutorials, and code generators. Any code generator that spits out vendor prefixes using -ms- for one of the features listed above (with the exception of transforms) is now producing unnecessary code.

Of course, taken on a single site, this is not a big deal. There are certainly more important things to focus on when it comes to code optimization and performance.

Nonetheless, as developers, we don’t like meaningless lines of code. Every piece of code should serve a purpose, so I hope many of the developers who run code generators put it on their to-do lists to remove the -ms- prefixes from their code. This would also be a good idea for tutorials that use -ms- in the examples.

Some tools have already been updated. For example, one of my tools and CSS3 Please.

The Affected

Here’s a first-draft list of code generators and similar tools that still need correction in this regard:

That’s just a quick preliminary list of some of the more popular tools that need updating to reflect this change.

So if you see any tools or generators that use the -ms- prefix for any of these features that aren’t supported in IE9, try to contact the developers responsible to get these corrected. And certainly this would also apply to any bloggers writing new articles that use vendor prefixes for any of those features.

Feel free to comment if you know of any other tools that still include the -ms- prefix for gradients, transitions, or keyframe animations, and I’ll update the post.

Photo credit: Void blank check from Bigstock

8 Responses

  1. Matt says:

    Fantastic!

  2. Scott says:

    This is why Lea Verou’s prefix-free is awesome.

  3. Alejandro says:

    Great article!
    i used to hate IE (like others do) but i feel some kind of peacefully about hearing good news about IE… It seems to make front-end web developers work more easy :D

  4. egiova says:

    Since MS is actively involved in the development of Mobiles, their browser is evolving… probably a coincidence. Really, these people take us for fools.
    I hope simply that all these changes are long term and not just to satisfy the community: “now that we need them.”
    Excellent article, extremely helpful, and fully justifies my preference for your site, thank you very much.

Leave a Reply

Comment Rules: Please use a real name or alias. Keywords are not allowed in the "name" field and deep URLs are not allowed in the "Website" field. If you use keywords or deep URLs, your comment or URL will be removed. No foul language, please. Thank you for cooperating.

Markdown in use! Use `backticks` for inline code snippets and triple backticks at start and end for code blocks. You can also indent a code block four spaces. And no need to escape HTML, just type it correctly but make sure it's inside code delimeters (backticks or triple backticks).