It’s Time To Stop Blaming Internet Explorer

Articles like this frustrate me a lot. For most of my career, I’ve fought hard against the “woe is me” attitude embraced by so many in Web development and articulated in the article. This attitude is completely counterproductive and frequently inaccurately described. Everyone was complaining when Internet Explorer 6 had a 90%+ marketshare. That share has shrunk to 6.3% today globally (though Louis cites 0.66%, which is true in the United States). Microsoft even kicked off a campaign to encourage people to upgrade.
I can understand complaining about Internet Explorer 6 and even 7. We had them for a long time, they were a source of frustration, and I get that. I would still never let anyone that I worked with get too buried in complaining about them. If it’s our job to support those browsers then that’s just part of our job. The truth is that every job has some part of it that sucks. Even at my favorite job, as front end lead on the Yahoo homepage, there were still parts of my job that sucked. You just need to focus on the good parts so you can tolerate the bad ones. Welcome to life.
But then the article goes on to bemoan the fact that so many people use Internet Explorer 8 and that Internet Explorer 9 is gaining market share. First and foremost, I would much rather support Internet Explorer 8 then I would 6 and 7. Microsoft forcing most people to upgrade from 6 and 7 to 8 is an incredible move and undoubtedly a blessing.

Internet Explorer 9

Internet Explorer 9, on the other hand, is a damn good browser. The only reason it doesn’t have all of the features as Chrome and Firefox is because they rebuilt the thing from scratch so that adding more features in the future would be easier. Let me say that again: they rebuilt the browser from scratch. They necessarily had to decide what were the most important features to get in so that they could release something and start getting people to upgrade from version 8. If they had waited for feature parity with Chrome or Firefox, we probably still wouldn’t have Internet Explorer 9.
The constant drumming of “Internet Explorer X is the new Internet Explorer 6″ is getting very old. Microsoft has done a lot to try to correct their past transgressions, and it seems like there are still too many people who aren’t willing to let go of old grudges. There will always be a browser that lags behind others. First it was Mosaic that was lagging behind Netscape. Then it was Netscape lagging behind Internet Explorer. Then it was Internet Explorer lagging behind Firefox. People are already starting to complain about Android 2.x browsers.
What makes the Web beautiful is precisely that there are multiple browsers and, if you build things correctly, your sites and applications work in them all. They might not necessarily work exactly the same in them all, but they should still be able to work. There is absolutely nothing preventing you from using new features in your Web applications, that’s what progressive enhancement is all about. No one is saying you can’t use RGBA. No one is holding a gun to your head and saying don’t use CSS animations. As an engineer on the Web application you get to make decisions every single day.

Progressive Enhancement

Louis briefly mentions progressive enhancement as a concept that doesn’t even enter into the equation. Once again, this is indicative of an old attitude of Web development that is counterproductive and ultimately lacking in creativity. The reason that I still give talks about progressive enhancement is because it allows you to give the best experience possible to users based on the browser’s capabilities. That’s the way the Web was meant to work. I’ve included a video of that talk below in case you haven’t seen it.
It’s not actually old browsers that are holding back the web, it’s old ways of thinking about the Web that are holding back the Web. Fixating on circumstances that you can’t change isn’t a recipe for success. The number of browsers we have to support, even “old browsers”, just represent constraints to the problems that we have to solve. It is from within constraints that creativity is born. The Web development community has evolved enough that we should stop pointing fingers at Internet Explorer and start taking responsibility for how we do our jobs. Let’s create solutions rather than continually pointing fingers. We are better than that.
Yes, complaining is useful to get people to listen. Microsoft is listening, so continuing to complain doesn’t do anything except perpetuate an attitude that I would rather not have in Web development. Let’s give them a chance to right the ship without retrying them for past transgressions perpetually.

How To Support Internet Explorer and Still Be Cutting Edge

Everyone has been going on about how we should use CSS3 more and all of the possibilities and flexibility that come with it, but that we should still consider IE6 and other troubling browsers.
But how do we actually do that? How do we create websites that are up to date with the latest coding techniques but that are also usable for people experiencing the Web on Internet Explorer?
In this article, we’ll see what measures we can take to provide a good experience for IE users but keep moving on. We will mainly focus on the CSS part but will also provide some handy tips on dealing with overall markup.

The Content Is What Matters

Jeffrey Zeldman once said, “content precedes design. Design in the absence of content is not design; it’s decoration.” In fact, the most important thing on your website is the content. This is what everyone should be able to get, no matter which browser they’re using.
Using CSS3 doesn’t mean we should forget about older browsers and lock visitors out of our websites. We should check our websites on browsers as old as maybe IE5 or 5.5 and make sure the content is accessible for every user.
This doesn’t mean we should quit the fight to eradicate IE6 either. We can still follow the example of websites such as Twitter and YouTube and add visible but not dead-end warnings to upgrade.


YouTube and Twitter warning messages for IE6 users
And remember: each profession has the duty to educate those who are not familiar with their trade. We must explain how stuff works to our clients without being patronizing. It’s not their job to know this after all.

Basics First: The Three Layers (HTML, CSS and JavaScript)

When we create a new website, we do it in steps. First, the HTML. We will mark up our content in the most semantic way possible: titles should be marked up as headings, lists as lists, etc. The bottom line is that our content should be perfectly readable and its hierarchy understandable with only this part of the coding done. The content has to make sense, and we must never forget that this layer is the foundation on which we will develop all the rest.
Secondly, we add the style, the CSS. In this step, we add the visual elements to our design; we give the website its personality. We also make sure that the content is accessible without the third layer.
And finally, the third layer, the JavaScript, the behavior. Here we add the interactive elements to our website. We make the experience richer using things such as tabs, sliders, lightboxes, etc.
With this path in mind, our content will always be accessible in any browser. We make sure that older browsers get only the basic content and disregard more complex layers that could hamper their users’ access to it.

Adding Basic Style For Old Browsers

So our semantic markup is done, and we know that some browsers cannot render CSS properly or at all, such as browsers before Netscape 4.0 or Internet Explorer 4.0. For those browsers, displaying the bare content—the naked version—is the safest choice.
Some people say that, today, there is no need to do this. But if you’d like to make sure that these people on these browsers don’t run into any problems, just link to a basic version of your CSS with the link tag and then to the more advanced file with the @import declaration:

You can also skip the link tag altogether and leave them with a text-only version of the website:

Embracing The Differences

Now let’s deal with the black sheep of commonly used browsers: Internet Explorer 6.
You’ve got two options:

1. If only a negligible percentage of your audience is browsing the Web with it and you don’t want to throw your client’s money down the drain, you could create a basic style sheet for IE6.
2. Acknowledge that your design will not look the same in IE6, and make decisions on what to leave out: which IE6 quirks will you fix and which will you leave be.

If you choose to feed IE6 a basic style sheet, the best course is to use the Universal IE6 CSS. Your website will have virtually no design, but this style sheet makes sure that the body has a readable width, that heading sizes are reasonable and that the content has some nice white space surrounding it.
In your HTML, you will have to add some conditional comments to link to the style sheet and to hide the other sheets from IE6:

In the first conditional comment, we link our main style sheet to all browsers that are not IE6 (hence the “!”). And in the second comment, we link directly to the Universal IE6 style sheet on Google’s repository (and save some bandwidth at that!).


The Make Photoshop Faster website uses the Universal style sheet for IE6
If you prefer the second route, you must be prepared to embrace the differences between browser renderings. Know that some details of your design will not be visible or render as nicely in IE6, or even IE7 and 8. And don’t be upset about it.

Resets

As you know, all browsers have different default styles for the various HTML elements. This is why using a reset style sheet is wise, so that we can start with a clean slate.
Plenty of style sheets are around on the Internet for anyone’s benefit. The one that is usually considered the standard and most often implemented is Eric Meyer’s reset, or some variation of it.

With the advent of HTML5, including the new HTML elements in your CSS reset is also a good idea. html5doctor provides a good update to Eric Meyer’s reset that you can use for free in your projects.

You can use a CSS reset either by embedding it at the top of your own CSS file, or, if you like to keep things tidy, by importing it from your style sheet:

@import url(reset.css);

CSS Differences That Could Break Your Layout

If you decide to use the Universal IE6 CSS, you’ve just saved yourself many a headache. But don’t let the shiny logos of IE7 and 8 fool you: if you intend to use the latest CSS techniques, you still have to do a lot to cater to them.

IE6 and PNG support

We all know that PNG images with alpha-channel transparency (i.e. the good-looking ones) don’t play nice on IE6. We’ve all seen that annoying light-blue background on our carefully crafted logos.
You can choose from among a few workarounds to this problem so that IE6 can display PNGs. Each is fairly quick to implement and does make a difference in the overall design.

That said, we should mention that more and more Web designers nowadays opt not to fix the PNG issue on IE6:

The newly revamped 31three website doesn’t apply any fix for PNGs in IE6.

Advanced Selectors

These selectors are almost the definition of smooth CSS development by themselves, because they hold the true power of CSS and can make our lives as developers so much easier (and our budgets so much lower!).
The decision of whether to make them work on Internet Explorer or not depends largely on what you are using them for.
For example, if you are using them to add extra detail to your designs, such as small icons to represent different file types, it won’t make a lot of difference if the icons don’t display on some browsers. Visitors to your website won’t know what they are missing, and the links will still be perfectly usable.
These selectors are also widely used to enhance typographic detail, and lack of support for them won’t be a big issue for your designs.

Hicksdesign uses advanced selectors for numbered bullets in its navigation menu, and they simply aren’t visible for IE6 users
Which browsers don’t support this? Internet Explorer 6 will not see styles applied with virtually any advanced selector. It only really understands simple descendant combinators and classes and ID selectors. It even struggles with multiple classes applied to the same element! It’s not to be trusted.
IE7 ignores the :lang selector and pseudo-elements, such as :first-line, :first-letter, :before and :after. But it does understand all attribute selectors.
Also, none of the Internet Explorer releases to date supports the :target pseudo-class, UI element states pseudo-classes (:enabled, :disabled, etc.), structural pseudo-classes (like :nth-child, :nth-of-type or :first-child) or the negation pseudo-element.

Box-Sizing

Box-sizing allows you to tell the browser how you want it to calculate the width and height of an element.
For example, if you set the box-sizing property to border-box, then the paddings and borders will be subtracted from the specified width and height of that element, instead of added to them (as stated in the W3C’s specifications for the standard box model).
This can make it easier to control the size of elements and to make sizes behave the same across different browsers.
If you believe that your website renders in IE in quirks mode (and therefore renders with the non-standard box model), you may want to use this property in your style sheets to make all browsers uniform.
Make sure to add the standard property and the vendor-specific ones:

1

div {

2	-moz-box-sizing: border-box;

3	-webkit-box-sizing: border-box;

4	box-sizing: border-box;

5

}

Which browsers don’t support this? If the website is rendered in quirks mode, IE6 will render using the non-standard box model, so it will already be rendering as if it had the “border-box” property on. You can force IE6 to render in quirks mode. There are a few ways of doing this; one way is by adding an HTML comment before the doctype declaration of your HTML pages.

Media Queries

Media queries aren’t fully supported by most browsers, and Internet Explorer doesn’t support them at all.
However, because they are mostly used to call variations of style sheets for handheld devices, such as the iPhone, this fact is almost irrelevant in that case.
If you use media queries mainly to cater to the iPhone, the fact that they are not supported by other browsers makes no difference anyway, and their use is highly encouraged.
If you are using them to create a more flexible website design that adapts to changes in, say, window size, then know that only Safari, Firefox and Opera support them (partially).
Which browsers don’t support this? Internet Explorer and, in some instances, Safari and Firefox.

CSS Differences That Are Mainly Decorative

These are the issues that are best left alone for non-supporting browsers, because the lack of support won’t be a problem for users who want to access your content (i.e. your pages won’t break).
This has to do mainly with some of the new CSS3 properties, such as border-radius, text-shadow and border-image.

Border-radius

This is the first CSS3 property that designers learned to live without on Internet Explorer, because of its clearly decorative nature. With border-radius, you are better off not trying to replicate it on IE at all. Just let it be.


Gowalla uses border-radius on its website, but Internet Explorer users don’t see it.
Which browsers don’t support this? All Internet Explorer browsers. Opera, too.

Font-face

Font-face can be used with IE, but you may need to use Microsoft’s Web Embedding Fonts tool to convert your fonts to EOT.

If you are including both font formats in your website, your CSS will probably follow this structure:

1	@font-face {

2	font-family: "Delicious";

3	src: url("Delicious-Roman.eot");

4	src: local("Delicious"), url("Delicious-Roman.otf") format("opentype");

5

}

Usually, a browser not being able to render the first font in a font stack shouldn’t break the website or hamper in any way the user’s access to the content. So, the recommendation here is to carefully ponder which fonts you want the visitor to see if their browser doesn’t support font-face and has to rely on the fonts you have declared in the style sheet.


A browser that doesn’t support font-face simplys show the next available font in the font stack
Which browsers don’t support this? If you use the EOT version for IE, even IE users will see the correct fonts.

Multiple Columns

Rather than create multiple floating DIVs to organize your text into columns, you can create columns automatically by using the multiple column properties in CSS3. But this means that some browsers won’t see them.
Multiple columns are better used for text, not layout. If you use them on your website, the worst thing that will happen is that visitors see a wider line of text.
If you’re dealing only with short text, than why not go ahead and use it and finish the job in two minutes? But if it would seriously impair the readability of your content, then your best option is to stick to the regular DIVs to create columns.


Here, the introductory text is displayed using CSS multiple columns. IE users will see normal single-column text.
Which browsers don’t support this? Internet Explorer and Opera.

RGBa and Opacity

RGBa colors are bliss. Rather than use hard-to-update PNG files for backgrounds, you can create the same transparency effect with CSS. But IE doesn’t get it. IE6 doesn’t even understand the PNGs to begin with.
It’s safe to assume that these transparencies won’t usually be applied to elements that cover important content; in which case, the content shouldn’t be behind another element in the first place.
So, when using RGBa colors, make sure to include a normal color before the RBGa one, so that browsers that don’t understand it will still have a fallback color:

1

div {

2	background-color:  #FFFFFF;

3	background-color: rgba(255,255,255,.5);

4

}

Opacity can be applied to IE using the opacity filter, but IE filters work only on elements that have layout:

1

div {

2	filter: alpha(opacity = 50);

3

}

Also, remember that opacity works differently than RGBa colors: all of the elements enclosed in this DIV will be rendered transparent.


24ways uses RGBa colors and alpha transparency heavily, even though Internet Explorer doesn’t render the transparency.
Which browsers don’t support this? Every browser sees opacity, provided that filters are applied. IE doesn’t see RGBa colors.

Text-shadow

This is an easy call: ignore it. Assuming that the text is still readable, trying to recreate text-shadow any other way than with CSS is a Herculean task. So, unless missing text-shadow would seriously reduce the clarity of a large amount of text, or a small amount (in which case you could use image replacement), you’re better off without it.


The white text-shadow on Brokers Direct’s website is not visible on Internet Explorer.
Which browsers don’t support this? Internet Explorer.

Border-image

The border-image property gives us an easy way to add beautiful borders to our elements that would otherwise be a nightmare to implement (and that in most instances we would probably choose not to implement).
Because the property is almost always decorative, the best option would be to include a fallback for browsers that don’t support it using the normal border property, and adding the enhanced CSS after it for other browsers.


SpoonGraphics uses border-image, but it is not visible in Internet Explorer.
Which browsers don’t support this? Answering the opposite question is easier: for now, only Safari and Firefox support this feature.

Multiple Backgrounds

This feature depends on the design of your website, but in a lot of cases, the lack of a second or even third background will not affect the readability of the page.
Multiple backgrounds in CSS saves us a lot of the development headaches that were caused by having to use different HTML hooks and nested elements to achieve the same effect. So, if you opt to use multiple backgrounds, you are already choosing which browsers to display the results to.
If all users seeing all of the backgrounds is important to you, then do it the old way and apply different backgrounds to different elements.
If not, your best bet is to give a fallback to browsers that don’t support it: pick the background that you feel is most important or that best fits the overall design and add that property before the multiple backgrounds one. Browsers that don’t support it will ignore the second property.
Which browsers don’t support this? Internet Explorer, Opera and Firefox up until version 3.5 (version 3.6 is currently in beta, but it supports multiple backgrounds!).

Tools

Modernizr

Modernizr is a little JavaScript that is quite useful if you are using advanced CSS properties. It adds some classes to the html tag in your pages, to see whether a browser supports certain CSS features, such as:

• @font-face
• rgba()
• hsla()
• border-image
• border-radius
• box-shadow
• Multiple backgrounds
• opacity
• CSS animations
• CSS columns
• CSS gradients
• CSS reflections
• CSS 2-D transforms
• CSS 3-D transforms
• CSS transitions

Take border-image. When a page loads in a browser that supports the property, it output borderimage. If the browser doesn’t support it, it outputs no-borderimage.
Modernizr doesn’t enable these features in browsers that don’t support them, but rather gives you important information (in the form of classes) that you can use in your style sheets to apply distinct selectors and properties to elements.

IE-7.js

IE-7.js makes IE5+ behave like IE8, supporting more advanced selectors and fixing some rendering bugs. Here’s an excerpt from the creator’s website:

• Added support for advanced selectors: >, + and ~; attribute selectors; :hover, :active, :focus for all elements; :first-child, :last-child, :only-child, :nth-child, :nth-last-child; :checked, :disabled, :enabled; :empty, :not; :before, :after, :content; :lang.
• It uses the standard box model in standards and quirks mode.
• Supports min- and max-width and -height.
• Supports PNG alpha transparency (but doesn’t solve the PNG problem for repeated or positioned backgrounds).

The disadvantage of this technique is that JavaScript has to be enabled for it to work, which is unfortunate. So, you will have to be careful to give users who have disabled JavaScript an acceptable version of your website, especially if some behaviors will not work or, worse, if the lack of JavaScript will break your layout.

Examples

As they say it, this is easier said than done. So, we’ll show that these ideas can actually be put into practice with some nice examples. These are websites we’ve come across that render differently in different browsers. In some cases, the differences are quite noticeable, but the developers have chosen to embrace those differences.

Twitter

Twitter in Firefox

Twitter in IE6

WordPress

WordPress in Firefox

WordPress in IE6

WWF

WWF in Firefox

WWF in IE6

Conclusion

Remember that the purpose of this post is not to teach you how to hack IE or deal with its quirks or even how to achieve effects by resorting to JavaScript. Rather, it is to explain how we can design and build websites knowing that differences will arise between browsers.
You won’t see people rioting over the lack of rounded corners on Twitter or WordPress; they aren’t even upset by it, because those differences don’t fundamentally break the websites. People can still use the websites and have a good experience. In most cases, they won’t even notice it!
All we have to do now is explain this politely but seriously to our clients, so that we can all contribute to the ever-evolving Web.

Further Reading And References

• Quirks Mode and Strict Mode
• On Having Layout
• The IE6 Equation
• Ultimate IE6 Cheatsheet: How to Fix 25+ Internet Explorer 6 Bugs
• Definitive Guide to Taming the IE6 Beast
• How to Use Modernizr

CSS3 Solutions for Internet Explorer

CSS3 is probably the hottest trend in web design right now, allowing developers the opportunity to implement a number of solutions into their projects with some very straightforward CSS while avoiding having to resort to nonsemantic markup, extra images, and complex JavaScript. Unfortunately, it’s not a surprise that Internet Explorer, even in its most recent version, still does not support the majority of the properties and features introduced in CSS3.
Experienced developers understand that CSS3 can be added to new projects with progressive enhancement in mind. This ensures that content is accessible while non-supportive browsers fall back to a less-enhanced experience for the user.

But developers could face a situation where a client insists that the enhancements work cross-browser, demanding support even for IE6. In that case, I’ve collected together a number of options that developers can consider for those circumstances where support for a CSS3 feature is required for all versions of Internet Explorer (IE6, IE7, & IE8 — all of which are still currently in significant use).

Opacity / Transparency

I think all developers are baffled at why Internet Explorer still fails to support this very popular (albeit troublesome) property. It’s been around so long, that we often forget that it’s actually a CSS3 property. Although IE doesn’t offer support for the opacity property, it does offer similar transparency settings via the proprietary filter property:

The Syntax

1	#myElement {

2	opacity: .4; /* other browsers  and IE9+ */

3	filter: alpha(opacity=40); /* IE6+ */

4	filter: progid:DXImageTransform.Microsoft.Alpha(opacity=40); /* IE6+ */

5	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=40)"; /* this works in IE8 only */

6

}

You really only need the second line, which works in all versions of Internet Explorer. But if for some reason you needed the opacity setting to apply only to IE8, and not to IE6/7, then you can use the last line, which the older versions don’t recognize. The third line is just another way to do basically the same thing, but with a more convoluted syntax.
The opacity value at the end of each IE line works basically the same way that the opacity property does, taking a number from 0 to 100 (the opacity property takes a two-digit number from 0 to 1, so “44″ for IE would be “0.44″ for the others). Also, as many have experienced when using opacity (even when using the standard method), the opacity settings will be inherited by all child elements, for which there is no easy workaround.

The Demonstration

This element has a solid blue background color (#0000FF), but is 60% transparent, making it appear light blue in all browsers

This is the same element without the opacity settings.

The Drawbacks

• The filter property is a Microsoft-only property, so your CSS won’t validate
• As is the case for the opacity property, the IE filter causes all child elements to inherit the opacity
• There could be performance issues with the IE filters

Rounded Corners (border-radius)

The border-radius property (more commonly referred to as CSS3 rounded corners) is another popular CSS3 enhancement. This property has allowed developers to avoid the headache of bloated JavaScript or extra positioned elements to achieve the same effect. But once again, Microsoft doesn’t want to cooperate, so IE doesn’t have any support for this property.
Fortunately, at least one person has come up with a very usable workaround that can be used in an IE-only stylesheet. Remiz Rahnas of HTML Remix has created an HTC file called CSS Curved Corner that can be downloaded off Google Code.
The great thing about this piece of code is that it doesn’t require any extra maintenance if you adjust the amount of radius on your rounded corners. You just link to the file in your CSS, and the script will automatically parse your CSS to find the correct radius value from the standard border-radius property.

The Syntax

Here’s what your code might look like:

1	.box-radius {

2	border-radius: 15px;

3	behavior: url(border-radius.htc);

4

}

The way it works is pretty straightforward, as shown above. Ideally, however, you would apply the behavior property in an IE-only stylesheet, using the same selector in your CSS, so the code knows where to get the radius value from.

The Demonstration

Because this technique requires use of an external HTC file, you can view the demo at this location.

The Drawbacks

• The HTC file is 142 lines (minifying or GZipping would help, but it’s still extra bloat)
• The behavior property will make your CSS invalid
• Your server needs to be able to load HTC files for this technique to work
• IE8 seems to have some trouble in some circumstances when the HTC file forces the curved element to have a negative z-index value

Box Shadow

The box-shadow property is another useful CSS3 feature that will even add a curved box shadow naturally to an element that uses the border-radius property. IE doesn’t support box-shadow, but a filter is available that offers a close replication.
It should be noted that the box-shadow property has been removed from the CSS3 Backgrounds and Borders Module, so its future in CSS3 seems to be a little uncertain right now.

The Syntax

1	.box-shadow {

2	-moz-box-shadow: 2px 2px 3px #969696; /* for Firefox 3.5+ */

3	-webkit-box-shadow: 2px 2px 3px #969696; /* for Safari and Chrome */

4	filter: progid:DXImageTransform.Microsoft.Shadow(color='#969696', Direction=145, Strength=3);

5

}

As shown above, in addition to the proprietary WebKit and Mozilla properties, you can add a shadow filter that works in all versions of Internet Explorer.

The Demonstration

This element has a drop shadow that works in Internet Explorer.

The Drawbacks

• The settings for the IE shadow filter do not match those of the other proprietary properties, so in order to make it look the same, you have to fiddle with the values until you get it right, which can cause maintenance headaches
• The filter property doesn’t validate, but neither do the WebKit and Mozilla properties, so this is a drawback in all browsers

Text Shadow

Adding drop shadows to text elements has been practiced in both print and web design for years. On the web, this is normally done with images and occasionally with text duplication combined with positioning. CSS3 allows developers to easily add shadows to text using a simple and flexible text-shadow property.
Unfortunately, there doesn’t seem to be an easy way to add a text shadow in Internet Explorer — even with the use of proprietary filters. To deal with this problem, a Dutch front-end developer named Kilian Valkhof has written a jQuery plugin that implements text shadows in Internet Explorer.

The Syntax

First, in your CSS, you would set the text-shadow property:

1	.text-shadow {

2	text-shadow: #aaa 1px 1px 1px;

3

}

The values specify the shadow color, position on the horizontal axis, position on the vertical axis, and the amount of blur.
After including the jQuery library and the plugin in your document, you can call the plugin with jQuery:

1	// include jQuery library in your page

2	// include link to plugin in your page

3

4	$(document).ready(function(){

5	$(".text-shadow").textShadow();

6

});

The plugin also allows the use of parameters to override the CSS. See the plugin author’s original web page for more details on the parameters.
Although there is a cross-browser jQuery plugin that applies drop shadows, the one I’m demonstrating above actually utilizes the CSS3 value that’s already set in your CSS, so it has the advantage of working along with the standard CSS setting for text shadows, whereas the other plugin needs to be set independently.

The Demonstration

Because this technique requires use of the jQuery library and an external plugin file, you can view the demo at this location.

The Drawbacks

There are some significant drawbacks to this method that make it very unlikely to ever be practical. You’re probably better off creating an image to replace the text for IE instead.

• In order to make the shadow look almost the same in IE, you need to use different settings in an IE-only stylesheet, adding to development and maintenance time
• Requires that you add the jQuery library, in addition to a 61-line plugin file (GZipping or minifying would help)
• The IE version of the shadow never looks exactly the same as the other browsers
• When using the overriding parameters, the plugin seems to be rendered somewhat useless, displaying a big ugly shadow that won’t change with new values
• Unlike the CSS3 version, the plugin doesn’t support multiple shadows
• For some reason, in order to get it to work in IE8, you need to give the element a z-index value

Gradients

Another practical and time-saving technique introduced in CSS3 is the ability to create custom gradients as backgrounds. Although Internet Explorer doesn’t support gradients of the CSS3 variety, it’s pretty easy to implement them for the IE family using proprietary syntax.

The Syntax

To declare a gradient that looks the same in all browsers, including all versions of Internet Explorer, use the CSS shown below (the last two lines are for IE):

1	#gradient {

2	background-image: -moz-linear-gradient(top, #81a8cb, #4477a1); /* Firefox 3.6 */

3	background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #4477a1),color-stop(1, #81a8cb)); /* Safari & Chrome */

4	filter:  progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#81a8cb', endColorstr='#4477a1'); /* IE6 & IE7 */

5	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#81a8cb', endColorstr='#4477a1')"; /* IE8 */

6

}

For the IE filters, the GradientType can be set to “1″ (horizontal) or “0″ (vertical).

The Demonstration

This element has a linear gradient that works in Internet Explorer.

The Drawbacks

Some of the usual drawbacks apply to gradients created with the IE-only filter, along with some other problems.

• Your CSS won’t validate, although that’s also true for the WebKit and Mozilla values
• Different code is needed for IE8, adding to maintenance time
• The WebKit and Mozilla gradients allow for “stops” to be declared; this doesn’t seem to be possible with the IE gradient, limiting its flexibility
• IE’s filter doesn’t seem to have a way to declare “radial” gradients, which WebKit and Mozilla support
• For a gradient to be visible in IE, the element with the gradient must have layout

Transparent Background Colors (RGBA)

CSS3 offers another method to implement transparency, doing so through an alpha channel that’s specified on a background color. Internet Explorer offers no support for this, but this can be worked around.

The Syntax

For the CSS3-compliant browsers, here’s the syntax to set an alpha channel on the background of an element:

1

#rgba p {

2	background: rgba(98, 135, 167, .4);

3

}

With the above CSS, the background color will be set to the RGB values shown, plus the optional “alpha” value of “.4″. To mimic this in Internet Explorer, you can use the proprietary filter property to create a gradient with the same start and end color, along with an alpha transparency value. This would be included in an IE-only stylesheet, which would override the previous setting.

1

#rgba p {

2	filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#886287a7', endColorstr='#886287a7');

3

}

The “gradient” will look exactly the same in IE as in other browsers, duplicating the RGBA transparency effect.

The Demonstration

This first example below will work in browsers that support RGBA colors. The second example will only work in Internet Explorer.

This paragraph has a background color with a 40% opacity setting declared using RGBA (doesn’t work in IE).

This paragraph has an IE-only filter applied to mimic RGBA transparency (only works in IE).

The Drawbacks

• The filter property is not valid CSS
• Requires an extra line of CSS in an IE-only stylesheet
• The element needs to have layout

Note: Initially, I had used a PNG image method to achieve this effect, but apparently it was working only partially in IE7 and IE8, and required a PNG-hack for IE6, so I tried the method given by Liam and Matias in the comments and this seems to work better. The PNG method is another option, but seems to be more troublesome, and has more drawbacks.

Multiple Backgrounds

This is another CSS3 technique that, when widely supported, could prove to be a very practical addition to CSS development. Currently, IE and Opera are the only browsers that don’t support this feature. But interestingly, IE as far back as version 5.5 has allowed the ability to implement multiple backgrounds on the same element using a filter.

The Syntax

You might recall trying to hack a PNG in IE6 and noticing the image you were trying to hack appearing twice, which you had to remove by adding background: none, then applying the filter. Well, using the same principle, IE allows two background images to be declared on the same element.
To use multiple backgrounds in Firefox, Safari, and Chrome, here’s the CSS:

1	#multi-bg {

2	background: url(images/bg-image-1.gif) center center no-repeat, url(images/bg-image-2.gif) top left repeat;

3

}

To apply two backgrounds to the same element in IE, use the following in an IE-only stylesheet:

1	#multi-bg {

2	background: transparent url(images/bg-image-1.gif) top left repeat;

3	filter: progid:DXImageTransform.Microsoft.AlphaImageLoader (src='images/bg-image-2.gif', sizingMethod='crop'); /* IE6-8 */

4	-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/bg-image-2.gif', sizingMethod='crop')"; /* IE8 only */

5

}

The Demonstration

The box below shows multiple backgrounds in Chrome, Firefox, and Safari (you won’t see anything in IE):

The next box shows multiple backgrounds in Internet Explorer 6-8 (you’ll only see a single background in other browsers):

The Drawbacks

• Your CSS will be invalid
• The second background image applied using the filter property will always be in the top left, and cannot repeat, so this method is extremely inflexible and can probably only be used in a limited number of circumstances
• In order to get the element to center (as in other browsers), you have to create an image with the exact amount of whitespace around it, to mimic the centering, as I’ve done in the demonstration above
• The AlphaImageLoader filter causes performance issues, as outlined here

Element Rotation (CSS Tranformations)

CSS3 has introduced a number of transformation and animation capabilities, which some have suggested are out of place in CSS. Nonetheless, there is a way to mimic element rotation in Internet Explorer, albeit in a limited fashion.

The Syntax

To rotate an element 180 degrees (that is, to flip it vertically), here is the CSS3 syntax:

1

#rotate {

2	-webkit-transform: rotate(180deg);

3	-moz-transform: rotate(180deg);

4

}

To create the exact same rotation in Internet Explorer, you use a proprietary filter:

1

#rotate {

2	filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);

3

}

The value for the rotation can be either 1, 2, 3, or 4. Those numbers represent 90, 180, 270, or 360 degrees of rotation respectively.

The Demonstration

The element below should appear upside down in Internet Explorer, having a rotation of 180 degrees set via the filter property. To demonstrate this more emphatically, I’ve applied a 3px solid gray “bottom” border, which should appear at the top of the element.

This element is rotated 180 degrees in Internet Explorer.

The Drawbacks

• Your CSS won’t validate, although that’s also true for the WebKit and Mozilla code
• While the Mozilla and WebKit code allows for rotation changes to increment by a single degree, the IE filter only permits 4 stages of rotation, minimizing its flexibility

Update: As pointed out in the comments, IE does allow the ability to rotate objects with the same flexibility as the CSS3 methods. To explain the method here is too complex, but the CSS3, please project by Paul Irish has implemented this method into its code generator, so you can use that to create the IE-compatible code for CSS3 rotations.

Conclusion

Developers might hate me for compiling this list, seeing as any client could search for “CSS3 in Internet Explorer” and stumble across this page. So be careful what you tell your clients; although IE does not support these things natively, that doesn’t mean they’re impossible to implement.
And remember that anytime you need to override the initial CSS settings for IE, or if you have to use JavaScript, jQuery, or an HTC file, make sure the calls to the external resources are made using IE conditional comments. This will ensure the other browsers aren’t making unnecessary HTTP requests.
In many cases, the best solution for dealing with Internet Explorer is to let it display a less-enhanced experience. I hope, however, the above solutions provide some options for working with CSS3 when a client wants a more accurate cross-browser experience.

Reliable Cross-Browser Testing: Internet Explorer

In a perfect world, cross-browser testing would be straightforward. We would download a legacy version of a browser, run it, and be able to instantly test our pages and scripts without a single care in the world. The reality of cross-browser testing, though, is very different. Issues such as runtime conflicts when running multiple versions of the same browser and inaccurate third-party testing tools mean we can spend hours just evaluating whether a testing set-up is anywhere near reliable.
I’m a user-interface developer at AOL (yes, we’re not dead yet!), and in this multi-part post I’ll take you through the exact set-up we use to accurately test content that will be potentially viewed by up to millions of users with a very diverse set of browsers. This set-up is similar to the one used by some of my colleagues at Opera, Mozilla and Google, so, fingers crossed, we’re doing this optimally.
A quick note before we begin. Setting up accurate testing for Internet Explorer as outlined in this post requires a bit of effort. So, please check your website analytics first to ensure that a sufficient number of IE users visit your website in the first place to warrant this effort.

Internet Explorer 6 To 10

Let’s begin with our old friend, Internet Explorer (IE). As most of us know, running multiple versions of the original Internet Explorer executables on the same system is very difficult due to issues ranging from runtime version conflicts to operating-system incompatibility. In truth, I don’t think Microsoft ever considered a scenario in which developers needed a way to achieve this back when it was first conceiving IE 6, 7 and 8.
This has left developers in a chasm of uncertainty, forced through trial and error to discover a way to accurately test what is (for better or worse) the world’s most widely used set of browsers.
In this section, I’ll take you through some IE testing options that you may be using or have heard of before. I’ll explain why they might not be reliable; and then I’ll present the solutions we currently use at AOL for production websites.
In case you’re interested, our team generally uses IE 7 as a baseline, although we do also test stable, beta and preview or dev-channel versions of Chrome, Firefox, Opera, Safari and, of course, IE 8 to 10.
Our reason for using IE 7 as a baseline comes down to our global website analytics: IE 6, 7 and 8 are the most common browsers used to access our websites. However, we stopped supporting IE 6 as of a few months ago. The reality is that IE 6 has major compatibility issues with modern technologies, and our team has found that we are able to deliver projects up to 20% more quickly when we don’t have to worry about catering a basic experience to it.

Most Third-Party IE Testing Tools Are Unreliable

A Google search for third-party IE testing tools will result in at least ten different options, nine of which are likely to be unreliable. Let’s go through a sample of them, in case you’re using one of them to test against staging or production websites at your work.
The following reviews may sound a little harsh, but the purpose is to stress the importance of using approaches that have been well engineered, tried and tested over time.

IETester

Unfortunately, IETester is probably the most popular third-party tool that I see designers and developers use to test multiple versions of IE. When I first tried it, I too was drawn by the promise of a single application that would solve all of my IE testing woes. However, all that glitters is not gold.

The tool has a number of inconsistencies when testing IE 6, 7 and 8, with none providing a 1:1 experience of the original browsers. Our and many other teams have confirmed not only that the rendered output of IETester varies significantly from any real version of IE, but that pop-up interactions cause failures, Flash and CSS filters don’t work in user mode, conditional CSS comments often fail, and switching between versions makes it very prone to crashing.
In short, it’s unreliable, and this should be enough for any developer to consider alternatives.

Multiple IE

TredoSoft’s Multiple IE is another tool that often shows up when searching for an IE testing solution. Unfortunately, it too suffers from a number of issues, including inaccurate rendering. One common complaint is that people experience IE 5.5 rendering bugs even when they’re just testing IE 6; this certainly is not something we want to deal with at a time when many of us are trying to ditch IE 6 completely.
Multiple IE isn’t updated regularly either, and if the long thread of user issues experienced with it since its release doesn’t put you off, then consider that the tool’s IE textboxes actually break in a number of circumstances.

To the best of my knowledge, both IETester and Multiple IE rely on an exploit known as DLL redirection in order to bypass issues with DLL naming conflicts, allowing the tools to attempt to run standalone copies of IE. I would recommend avoiding such tools, because implementing a completely sandboxed environment for IE that is as accurate as running the originals independently is very difficult.

Expression Web SuperPreview

Next up is Microsoft’s Expression Web SuperPreview, which claims to simplify the process of testing and debugging layouts across multiple versions of Web browsers.

Unfortunately, you won’t be able to test complete user interaction, JavaScript, DOM manipulation, animation or much else with this tool. We live in an age when the Web can be very dynamic and, in some cases, highly interactive. A tool like this might work for baseline testing, but not for accurate cross-browser testing.

BrowserLabs, Browsershots, BrowserCam

I personally use Adobe’s BrowserLabs — or sometimes Browsershots, if a static layout test is absolutely necessary. But again, neither of these options allow you to test interactions with your pages. The same goes for BrowserCam. These services simply weren’t designed for this purpose, but we still regularly see designers and developers using them as if they were.
I’m not in any way saying to flat out avoid these services, but rather that they’re inadequate for complete cross-browser testing. Designers and developers need to know exactly what a user sees when they interact with their website. No visitor will be using a static page renderer, so why rely on one yourself?

Windows Virtual PC

One other solution you’ll probably come across is Microsoft’s Virtual PC, with time-bombed images for IE6 to 8.
For a brief time this was considered to be the answer to cries from developers for a better solution. Unfortunately, it is by far the most inadequate (and demanding) solution to testing that I’ve seen proposed in the past few years. At least 12 GB of disk space is required to install all of the images, and the images regularly expire during the year.
A cross-browser testing environment for legacy browsers should have reasonable system requirements and, for the most part, not require regular manual updating in order to continue using it. Because the Virtual PC option fails these criteria, I can’t recommend using it either.

Browser And Document Modes

We’ve looked at third-party tools, but what about Microsoft’s current solutions to these problems?
Both IE 9 and IE 10 PP2 support switchable document and browser modes via the F12 Developer Tools for cross-version compatibility testing. To be specific, browser-version testing here is made possible using a kind of emulation.

“Document mode” determines what features a page has access to and what can be adjusted based on the page’s doc type, X-UA-compatible meta tag and headers. For example, the standards document mode allows the page to take advantage of IE’s implementation of ECMAScript 5 (ES5), while the IE 7 and 8 standards modes offer an alternative experience.
“Browser mode,” on the other hand, emulates different IE browser version behaviors and can be changed directly from the IE Developer Tools. Emulation is achieved in a few different ways, but it includes altering both the document mode and the user-agent string. In case you’re wondering, the UA string is adjusted here to ensure that code that relies on UA sniffing functions as though the correct version of the browser were being used.

It is worth noting that IE 9 shipped with a newer JavaScript engine, called Chakra. While the browser itself supports a number of compatibility modes, because the JavaScript engine itself differs significantly from what shipped with IE 6, 7 and 8, there are acknowledged differences between the experience in IE 9 and testing in a standalone browser.
That aside, there are, unfortunately, a number of quirks in the way that both document mode and browser mode function. Our team has run into scenarios where IE returns the wrong user-agent string to the server; and, as with the third-party tools, there have been several instances of inaccuracies with the expected rendering when tested against the original browsers.
Finally (and rather strangely), these modes have a number of issues of their own that are not present in IE 6, 7 or 8, making it even more difficult to establish whether the issues experienced are specific to a browser version or just the mode being used.
For these reasons, I would urge developers not to rely strictly on document or browser mode for their cross-version testing needs.

Accurate IE Testing Solutions

Option 1: Virtual Machines + IECollection

We’ve reviewed a number of solutions that don’t provide an accurate means of testing multiple versions of IE. So, what does work? The answer lies in using dedicated virtual machines (VMs) and a tool called IE Collection.

Out of the box, Utilu’s IE Collection offers the following:

• A tested collection of standalone versions of IE, including versions 1 through 9;
• Confirmed support for accurate rendering when compared against the original IE executables;
• Confirmed support (to date) for the correct IE JavaScript engine implementations that shipped with the originals;
• Confirmed support for the correct UA strings being detectable (not that you should be UA-string testing in the first place — however, if needed, it’s there);
• Support for both the 32-bit and 64-bit versions of Windows XP, 2003, Vista and 7;
• Access to the IE Developer Toolbar, which comes with the standard IE Collection set-up; this is compatible with IE 5 and above, but you also have the option to install Firebug Lite if you prefer that.

Although the majority of IE versions are supported and function reliably within the collection, there are known issues with versions of IE 7 when used under Windows Vista or Windows 7 (as noted on Utilu’s website). I’ll discuss how we handle this limitation shortly, but let’s first briefly go over virtual machines.

A virtual machine (VM) is a sandboxed “guest” operating system that run within a normal “host” operating system. It effectively enables you to install and run a dedicated copy of almost any other operating system on your current one and to share a configurable set of memory and disk resources between the two. For example, a Windows 7 VM could easily be run on Mac OS X, as could an Ubuntu VM be run on Windows, and so on.
You’ll need two things to get started using VMs: a virtualization tool to create VMs on your OS, and a CD or image of the operating system that you wish to run as a virtual machine. Your company should be able to furnish you with Windows licenses relatively easily (… famous last words). If you’re a college student, you could probably get licenses for Windows XP SP3, Vista and 7 for free through the MSDN Academic Alliance program.
You could set up a number of different configurations to test Windows and IE, but if you’re using IE Collection, I would generally recommend the following:

• Windows 7 for IE 6, 8, 9, 10;
• Windows XP (SP3) for IE 7.

You shouldn’t need to support anything below IE 6 nowadays, but IE 4 to 5.5 also work fine on XP SP3.
At AOL, we use a combination of VirtualBox, Parallels and VMware for our virtualization needs. I prefer Sun’s VirtualBox because it has the following advantages:

• It’s free, providing a lower barrier to entry for developers who cannot afford commercial licenses for Parallels or VMware;
• In my experience, it tends to perform more optimally than Parallels or VMware under the same configuration settings;
• It has a marginally better UI than the alternatives.

That said, VMware is considered better if you’re working with a standalone server. At the end of the day, all three options are equally valid, and both Parallels and VMware come with trial versions that you can easily evaluate. Choose whichever option best suits your needs.
Pro tip: Remember to configure your VM to use the minimim amount of memory needed to test, unless you are using a dedicated testing box. By default, not all virtualization tools are configured to do this. This will simply ensure that the rest of your OS runs more smoothly.
Here are the three steps to setting this up:

1. If you’re a Mac user, I recommend using a 32-bit Windows 7 Pro or Ultimate image (or installation CD), with a minimum of 17 GB of disk space allocated for the installation. 512 MB of virtualized RAM (which can be adjusted in the settings panel) should work fine for testing on a non-dedicated testing machine, but use more if feasible. You can create this as a new VM using VirtualBox, which I have configured to run at a resolution of between 800 × 600 and 1024 × 768 pixels. Windows users have two options. If you’re already running a version of Windows 7, skip to step 2, where we’ll begin installing IE Collection. If you’re running a different version of Windows and would like to run a virtualized copy of Windows 7 on top of it, then follow the steps above for Mac users. Mac and Windows users should boot up their VM or desktop Windows installation before proceeding to step 2.
2. Next, download IE Collection from Utilu’s website, and then install Windows 7 on either your VM or your primary system, depending on your set-up. This will give you access to IE 6, 8 and 9. I usually install IE 10 for testing purposes separately, but bear in mind that it is only in the platform preview phase at the time of writing. Ideally, install only the bare essentials to test on any VM in order to avoid excessive start-up times.
3. Mac and Windows users: to address the issue of IE 7 not working on Windows 7, you’ll have to create another virtual machine with Windows XP installed (ideally with SP3). Because no reliability issues have been reported for running either IE Collection’s IE 7 or the original IE 7 on this OS, your bases should be covered here. As stated in my previous instructions, obtain a Windows XP image or installation CD, and create a new VM using VirtualBox. Boot it up, install IE7 through the link above, and you should be good to go.

That’s it really! Some developers prefer to run IE 6 and 7 on XP (step 3) rather than on Windows 7 or Vista, because XP accounts for the majority of users who have yet to upgrade to IE 8 or 9. This, too, is completely valid; the set-up is flexible enough to support a little personal preference.
Next, for the sake of being thorough, let’s look at some alternatives to the set-up I’ve recommended above.

Option 2: Dedicated VMs for Each Version of IE

Pragmatic developers might wish to maintain a dedicated VM for each version of IE being tested. On these VMs, rather than using any third-party tools, they would install the original, official IEs instead.

The reasoning behind this is that it potentially minimizes the risk of individual browser configurations or overrides from interfering with one another, and it ensures that you get only the exact version of IE that you wish to test (and, in turn, the corresponding JavaScript engine in that version).
If you’re setting up dedicated VMs for individual releases of IE, I recommend the following set-up:

• Windows XP (SP3) for IE 6,
• Windows Vista (SP2) for IE 7,
• Windows Vista (SP2) for IE 8,
• Windows 7 for IE 9 and 10.

Knowing now about dedicated VMs, you might be wondering why we don’t use this set-up at AOL. I can only speak for my team, but we moved away from this approach because running three to four VMs on the same system and still using it efficiently for other tasks can become unmanageable.
With a minimum configuration of 512 MB of RAM per VM, we would be looking at around 2 GB of RAM (if not more) just for testing purposes. This set-up might work if you currently have 8 GB or more of system memory. But if not, there’s still hope.
We could always get a dedicated box just for testing purposes, and run all of our virtual machines directly on there instead. I recently acquired a second box at work for this very purpose. But at the end of the day, both options 1 and 2 are set-ups you can rely on.

Option 3: VNC or RDP + Dedicated Testing Boxes

A few companies (such as ZURB) prefer to use a form of remote desktop access to allow designers and developers to log into a dedicated testing box or set of boxes for cross-browser testing, over a network. The benefit of this is reduced demand on memory for each client. And this can be implemented in a few ways; VNC and RDP are the first that come to mind.
Virtual network computing (VNC) is a platform-independent desktop sharing system that allows you to remotely control another computer. It transmits both keyboard and mouse events from one system to another, relaying screen updates back in the other direction over a network. Similarly, RDP allows users to access applications over a network, but it is a proprietary protocol developed by Microsoft. If you happen to be running Mac OS X, VNC is already built in, but a number of VNC clients are also available in the wild, such as RealVNC. On the RDP side of things, Mac users can use Apple’s own Remote Desktop and Remote Desktop Connection by Microsoft.
You might be wondering what the differences are between VNC and RDP. RDP is semantic and is more aware of controls, fonts and other graphical primitives, while VNC is a little “dumber” in this regard. VNC, though, permits a session to be shared on the target machine, which might be useful for multi-user demos; whereas RDP does not, as far as I’m aware.
With the decreased memory requirements, you might then wonder why we don’t opt to use remote desktops for testing at AOL. The primary reason is that, in some cases, testing over a network can result in packets (effectively, frames) being dropped, which can affect our ability to test highly interactive applications or websites. Also, websites that make use of rich-media experiences based on canvas, SVG or otherwise aren’t reliably tested over networks for this reason. But don’t let our experience put you off. I know of teams in other companies that haven’t run into these issues, and remote testing might be suitable for some networks more than others.

Option 4: Remote Testing Through a Third-Party Service

If your team is unable to purchase or rent dedicated boxes for remote testing due to cost, there are third-party services you can use which which readily host host multiple versions of Windows, along with historic versions of IE and other browsers out of the box for a low subscription fee.
BrowserStack.com and Browserling are two such options. You might be surprised to know that both actually support local testing of your servers and files through ssh tunneling and as long as your company are comfortable with content being tested in this manner, it’s an adequate and affordable way of getting reliable cross-browser testing into your business.
If I had to personally recommend one of the services over the other, it would definitely be BrowserStack. They offer a wider range of browser versions and OS versions than Browserling and also include debugging and developer tools as a part of their service.
There is however one downside to the services recommended above: at the time of writing, neither currently appear to support the Firefox nightlies/builds for FF7,8,9, Opera.next nor the dev/beta/canary builds of Google Chrome.
I personally like the flexibility to test how my projects might render and function in upcoming browsers as this provides you with a level of comfort about a release – eg. if FF7 gets released next week, I’d rather be able to patch projects before everyone starts updating rather than after. That said, this isn’t a concern thats shared by a lot of developers or designers, so feel free to try out BrowserStack or Browserling if Options 1-3 aren’t for you.

Another Alternative For Developers Wishing To Avoid Purchasing Multiple Licenses

Some developers may be familiar with Microsofts virtual machine disk images which I mentioned earlier. It can be quite a challenging task getting these images to work with anything other than Microsofts VirtualPC, however a recent project called IEVMS (thanks to Paul Irish for the heads up) attempts to solve this problem. IEVMS offers a set of scripts that facilitate using the images with VirtualBox on Linux or OSX and with a single command it’s possible to have IE6 – IE9 running in separate virtual machines.
The project also offers a clean snapshot mode, potentially enabling developers to roll-back these VMs so that its possible to have them working indefinitely. This project does (at the time of writing) suffer from a few minor bugs that are being worked out, but is certainly worth looking at if it sounds more appealing than the alternatives. Bear in mind that this script will still need to download the 10-12GB of disk images required for the VMs and I’m not sure if IEVMS breaks the EULA, so ensure this won’t be an issue before launching the scripts.

Conclusion

I hope this guide has come in handy. Please feel free to share your own stories and experiences of cross-version testing IE, because they may help other readers decide which option to try out first.
In part 2 of this post, we’ll look at cross-browser testing modern browsers. See you then!