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

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.

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:

• CSS3 Click Chart (one of my sites, I know)
• Prefixr
• CSS3 Generator
• CSS3 Button Maker
• Microsoft’s CSS Gradient Background Maker
• Ultimate CSS Gradient Generator
• Funk and Hoffman’s CSS3 Generator
• Damian Galarza’s Gradient Generator
• CSS3Gen
• Westciv’s Radial Gradient Generator
• Compass (bug reported by Paul)

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