Moving to Standards-based Web Graphics in IE10

Users expect to visit any site on the Internet with any browser and enjoy a similar quality experience. We first discussed Internet Explorer’s commitment to achieving the goal of consistent “same markup, same results” across browsers in a post on March 16, 2010 announcing the release of the IE9’s first platform preview. IE9 moved us a long way toward that goal and IE10’s HTML5-based Standards and Quirks modes largely completes that work. The post HTML5 Parsing in IE10 listed some of the legacy features removed from IE10’s HTML5-based Standards and Quirks modes.

This post expands the list of removed legacy features to include two more: Vector Markup Language (VML) and DirectX-based Filters and Transitions. Both of these features were marked deprecated in MSDN documentation as of IE9 (e.g., the first sentence of Filters and Transitions: “This topic documents a feature of Visual Filters and Transitions, which is deprecated as of Windows Internet Explorer 9”) and are now gone from IE10’s Standards and Quirks modes.

The common uses of VML and DX Filters now have standards-based alternatives implemented in IE10 and current versions of other browsers. These legacy IE features remain available in IE10 in document modes 5, 7, 8, and 9 though their performance is inferior to their hardware-accelerated, standards-based replacements. We encourage Web developers to move their sites to standards-based technologies rather than rely on legacy document modes.

Use SVG, not VML

Microsoft and others proposed VML (Vector Markup Language) to the W3C in 1998. IE5 first implemented it. The W3C merged VML with a competing proposal with the outcome being SVG. (See Vector Markup Language for a brief history.)

SVG, implemented in IE9, provides the functionality needed to replace VML in Web sites and applications that use it. The VML to SVG Migration Guide, published on the Microsoft Download Center, provides guidance for moving from VML to SVG.

The Raphaël JavaScript Library is a lightweight and easy-to-use graphics API that uses SVG when available and VML when not. Raphaël is a good choice for building vector graphics solutions that work in IE8 and newer browsers.

Use CSS3, not DX Filters

Internet Explorer 4 introduced a set of visual filters and transitions to allow Web developers to apply multimedia-style effects to their Web pages. The name DX Filters comes from their underlying implementation, DirectX, and their long-form syntax, e.g., “filter: progid:DXImageTransform.Microsoft.Alpha(opacity=50).” DX Filters are not the same as SVG Filter Effects, though both use the CSS property name filter.

The most popular of these effects have since become CSS3 Working Drafts or Candidate Recommendations including opacity, gradients, and shadows. With IE10 supporting these CSS3 specifications, there’s no need for the legacy, IE-specific filters. One additional filter, AlphaImageLoader, was once popular to work around bugs with PNG transparency in IE6 but those bugs were fixed in IE7.

The following table lists the most popular DX Filters and their standards-based alternatives.

DX Filter

Standards-based Alternative

Alpha

opacity

AlphaImageLoader

<img> or background-image and related properties

Gradient

background-image: linear-gradient()

DropShadow

text-shadow or box-shadow

Matrix

transform, transform-origin

SVG Filter Effects in IE10 can be used to simulate some of the less common, more esoteric filters in the context of SVG.

Note: Because IE9 document mode supports both DX Filters and some of the standards-based alternatives, it is wise to avoid specifying both properties on the same element. Libraries such as Modernizr make it easy to use feature detection with CSS and avoid duplicate declarations.

Make the Move to Same Markup Now

More than any version of IE before, IE10 works with the same markup and code as other popular browsers (once any CSS vendor-specific prefixes are updated to include “-ms-”). Going the other way, the removal of these two legacy features means that content developed for IE10 should also work in other browsers.

Users benefit when all browsers can work with the same standards-based content.

Before SVG was announced for IE9, the IEBlog had one or two posts about their participation in the SVG Working Group; they've made little or no mention of WebGL, so I definitely would not expect it (and much less in a satisfactory or non-experimental state) until IE11 or later.

1) This is great news, IETeam. Great work, be proud of what you are doing within Microsoft

2) Marketing and management are holding back this company (not that I care, but thought i'd share my opinion). Instead of participating in and leading the remarkable Renascence happening right now (hey i'm an open source fanboy, what can I do), Microsoft struggles to find its way, thus is just a me-too company, and a late one at that. [for example: yes we too can host node.js on windows. yay :-]

Hey IE, I think you guys should make it so buttons and image buttons like the youtube search button have a round edge. In google chrome, firefox, and opera the youtube search button has a round edge. Its sad Internet Explorer makes some images and buttons that should have round edges don't in IE..

Appearantly the world(ww) will not get 3d until a single company decides otherwise.

My grandmother and myself are convinced that eventually, no 3d for the web is not an option.

But holding it back unfortunately is.

Holding it back until a point of time where that single company believes it can benefit the most of it.

Some might call this business at it's best, but from a customer's point of view, harming friends just to hypothetically harm the enemies, is not desireable. That is if customers are considered friends.

Until that yet to be announced point in time, we cannot use the new technology, and worse, we cannot plan on using it, as there are no hints at all at when that might be.

"Users expect to visit any site on the Internet with any browser and enjoy a similar quality experience."

This statement can also describe the expectation that IE remain backward-compatibility with its prior versions, as much as it does to future development. As a user, I would expect old websites that relied on filters such as opacity and gradients to continue to work. It doesn't appear to be the case, since you are removing these features from both Standards AND Quirks modes.

Sounds to me like another reason to avoid upgrading to IE10 in the enterprise space.

@Confused: As the post states, "These legacy IE features remain available in IE10 in document modes 5, 7, 8, and 9." Sites that need these features can opt into any of these four modes. BTW, 5 = IE's legacy Quirks.

@confused: Any sites that relied on those features failed to work on such browsers as Firefox, so any developers who inflict those "features" on websites deserve to be lined up against a wall and executed by firing squad anyway.

@Dan T.: There exist intranet sites within corporations that were designed for a specific version of Internet Explorer. Ensuring that new versions of IE are compatible with those sites is an important commitment Microsoft makes to its customers. This is the core reason behind IE's compatibility modes.