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