Partager via

Moving to Standards-based Web Graphics in IE10

  • Article

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

The changes described above are effective as of IE10 Platform Preview 4, available for Windows Developer Preview.

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.

—Ted Johnson, Lead Program Manager, Internet Explorer Graphics

Comments

  • Anonymous
    December 07, 2011
    Congrats MSFT! - I fully approve the removal of these non-standard items - it shows true commitment to standards.

  • Anonymous
    December 07, 2011
    Darn! This is actually good news, so I will look even more foolish when I post an off-topic rant about how M$ is evil and you should Just Use Linux.

  • Anonymous
    December 07, 2011
    Hmmm..... maybe WebGL is coming too ???

  • Anonymous
    December 07, 2011
    @Guest perhaps when WebGL becomes a W3C standard

  • Anonymous
    December 07, 2011
    @Guest 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.

  • Anonymous
    December 07, 2011
    WebGL is not even a standard by W3C, and still has security issues in that hackers can exploit your video card and eventually, your machine.

  • Anonymous
    December 07, 2011
    Pretty good news. I believe you made the right choice by removing those features.

  • Anonymous
    December 07, 2011
    IE users will miss out exciting 3d stuff on the internet... haha

  • Anonymous
    December 07, 2011
    A small correction. Raphaël actually works all the way down to IE6, not only IE8 that the blog post suggests. Great move toward standards IETeam!

  • Anonymous
    December 07, 2011
    steve_web, hush, it's not standards, it's same markup ;-)

  • Anonymous
    December 07, 2011

  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 :-]

  • Anonymous
    December 07, 2011
    what about border image support? Will this be in? www.w3.org/.../css3-background

  • Anonymous
    December 07, 2011
    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..

  • Anonymous
    December 08, 2011
    @Anonymous, 7 Dec 2011 5:03 PM like [TYPEDARRAY]? 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. Instead, we get a lot of old stuff, labeled as new. you're welcome, g

  • Anonymous
    December 08, 2011
    That's great. I hope foreignObject will be supported?

  • Anonymous
    December 08, 2011
    WebGL please.

  • Anonymous
    December 08, 2011
    "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.

  • Anonymous
    December 08, 2011
    @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. There's no loss of backward-compatibility here.

  • Anonymous
    December 09, 2011
    @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.

  • Anonymous
    December 09, 2011
    Wow. Now we're talking. Congrats!

  • Anonymous
    December 09, 2011
    @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. Let's hold off on the firing squad.

  • Anonymous
    December 09, 2011
    "Let's hold off on the firing squad" for the win :)