CSS3 Solutions for Internet Explorer

Advertisement

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 support1 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 mind2. This ensures that content is accessible while non-supportive browsers fall back to a less-enhanced experience for the user.

IE

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

#myElement {
	opacity: .4; /* other browsers  and IE9+ */
	filter: alpha(opacity=40); /* IE6+ */
	filter: progid:DXImageTransform.Microsoft.Alpha(opacity=40); /* IE6+ */
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=40)"; /* this works in IE8 only */
}

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 Rahnas3 of HTML Remix4 has created an HTC file5 called CSS Curved Corner6 that can be downloaded off Google Code7.

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:

.box-radius {
	border-radius: 15px;
	behavior: url(border-radius.htc);
}

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 location8.

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 Module9, so its future in CSS3 seems to be a little uncertain right now.

The Syntax

.box-shadow {
	-moz-box-shadow: 2px 2px 3px #969696; /* for Firefox 3.5+ */
	-webkit-box-shadow: 2px 2px 3px #969696; /* for Safari and Chrome */
	filter: progid:DXImageTransform.Microsoft.Shadow(color='#969696', Direction=145, Strength=3);
}

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 Valkhof10 has written a jQuery plugin11 that implements text shadows in Internet Explorer.

The Syntax

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

.text-shadow {
	text-shadow: #aaa 1px 1px 1px;
}

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:

// include jQuery library in your page
// include link to plugin in your page

$(document).ready(function(){
	$(".text-shadow").textShadow();
});

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 shadows12, 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 location13.

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

#gradient {
	background-image: -moz-linear-gradient(top, #81a8cb, #4477a1); /* Firefox 3.6 */
	background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #4477a1),color-stop(1, #81a8cb)); /* Safari & Chrome */
	filter:  progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#81a8cb', endColorstr='#4477a1'); /* IE6 & IE7 */
	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#81a8cb', endColorstr='#4477a1')"; /* IE8 */
}

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 layout14

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:

#rgba p {
	background: rgba(98, 135, 167, .4);
}

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.

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

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 Liam15 and Matias16 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:

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

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

#multi-bg {
	background: transparent url(images/bg-image-1.gif) top left repeat;
	filter: progid:DXImageTransform.Microsoft.AlphaImageLoader (src='images/bg-image-2.gif', sizingMethod='crop'); /* IE6-8 */
	-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/bg-image-2.gif', sizingMethod='crop')"; /* IE8 only */
}

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 here17

Element Rotation (CSS Tranformations)

CSS3 has introduced a number of transformation and animation capabilities, which some have suggested are out of place18 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:

#rotate {
	-webkit-transform: rotate(180deg);
	-moz-transform: rotate(180deg);
}

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

#rotate {
	filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
}

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 comments19, 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, please20 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.

Footnotes

  1. 1 http://msdn.microsoft.com/en-us/library/cc351024(VS.85).aspx
  2. 2 http://dev.opera.com/articles/view/progressive-enhancement-with-css-3-a-be/
  3. 3 http://www.htmlremix.com/about
  4. 4 http://www.htmlremix.com/
  5. 5 http://en.wikipedia.org/wiki/HTML_Components
  6. 6 http://www.htmlremix.com/css/curved-corner-border-radius-cross-browser
  7. 7 http://code.google.com/p/curved-corner/
  8. 8 http://www.impressivewebs.com/css3-rounded-corners-in-internet-explorer/
  9. 9 http://www.w3.org/TR/css3-background/#the-box-shadow
  10. 10 http://kilianvalkhof.com/
  11. 11 http://kilianvalkhof.com/2008/javascript/text-shadow-in-ie-with-jquery/
  12. 12 http://plugins.jquery.com/project/DropShadow
  13. 13 http://www.impressivewebs.com/css3-text-shadow-in-internet-explorer/
  14. 14 http://reference.sitepoint.com/css/haslayout
  15. 15 #comment-456362
  16. 16 #comment-456590
  17. 17 http://developer.yahoo.com/performance/rules.html#no_filters
  18. 18 http://snook.ca/archives/javascript/css_animations_in_safari/
  19. 19 #comment-457537
  20. 20 http://css3please.com

↑ Back to top Tweet itShare on Facebook

Louis Lazaris is a freelance web developer and author based in Toronto, Canada. He blogs about front-end code on Impressive Webs and curates Web Tools Weekly, a weekly newsletter for front-end developers.

Advertising
  1. 1

    Post is very helpful any single js solution for all css3 properties for IE.

    0
  2. 202

    Great stories, maintain them coming :) This is the 1st time i have commented, b¨´t i have been lurking for a whilst.

    0
  3. 403

    Attitude change of developers is needed.. Show the differences instead of fixing Microsoft browser problems, it is a problem of MS not yours! MS is not god. I also drop the hacks for IE8 and lower, putting a little message on top of the document that says that te browser doesn’t support modern standards, with a link to information that shows and explain the differences (with examples). No nice shades and other ‘fancy’ things in IE8 or lower, but still working. Stop the hack bullshit, people must see that there is ‘another world’. Upgrade to IE9 (when possible) or better use another browser, it is FREE for god sake! We must go on, skip the MS bullshit, show the differences to users. Better for us, better for the customer, better for the internet, better for all. Concentrate on new things instead.

    Don’t be afraid to loose customers, that is microsoft commercial talk/bullshit. We as developers can change the IE direction by stop supporting it. Users may ask why it is not working, that’s a good thing. Don’t be a slave of the commercial free stuff!

    And very important for you as developer, do not frustrate yourself and skip this piece of crap. Don’t wait for the next better supertrouper awesome release of MS. Also IE10 will not bring satisfaction, forget it and let your visitors know that IE does not support YOUR website (instead of that you not supporting IE).

    0
  4. 604

    Thanks! this was the fix I needed for a gradient background in ie.

    0
  5. 805

    Thank you very much for your post. It’s really useful.

    0
  6. 1006

    gr8 ! Post is very helpful

    Thanx

    Bhola Sharma

    0
  7. 1207

    Hi people.
    I have an issue with IE8 and multiple backgrounds.
    What should I do with this code:
    background: url(‘../images/sabao_x_top.gif’) repeat-x top left,
    url(‘../images/sabao_x_foot.gif’) repeat-x bottom left;

    How do I “translate” it for IE to show him the 2 backgrounds?
    Thankz people.

    0
  8. 1408

    Use background-image: -o-linear-gradient(top,rgb(100,100,100),rgb(200,200,200));
    =)

    0
  9. 1609

    It looks you can’t make a gradient, based on RGBA-method colors to give it a transparent view.

    0
  10. 1810

    Regarding Transparent BG:

    i’ve found that using a bg image, where the image is 1×1 pixels with transparency is a better solution, since using the filter style affects also the child elements.

    tested on ie8

    0
  11. 2011

    Good article louis, We can use css3 properties with out filtering and htc script in IE low version browsers ? if is it possible…

    0
  12. 2212

    very helpful

    0
  13. 2413

    Nice article. I’ve been looking for a way to do these sorts of things in IE if a customer *really* insists that they need to work in IE but personally, I always tend to convince people that you should design for proper browsers and not harm the user experience of people that user proper browsers just to cater for the minority of users that are still stuck in the dark ages (whether through their own fault or the fault of their lazy IT guys who lock down the system and only let them use IE7). I mean, as long as it’s usable (readable, interactive, functional), why go the extra mile to add rounded corners, gradients, alphas, bells, whistles, etc? If it makes it slow, fat and the css doesn’t validate, is it worth it?

    0
  14. 2614

    The last line is the best ;)
    No better way to make people upgrade their browsers then to serve up a “less enhanced experience.”

    0
  15. 2815

    Nice! this really helped :)

    0
  16. 3016

    If you are using wordpress, you can try this plugin http://wordpress.org/extend/plugins/ie-css3-support/

    It implements css markup that support CSS3 “border-radius( Rounded box corners )”, “box-shadow( Dropdown/Inner Shadow )” and “linear-gradient( Gradient background )” in IE versions 6 to 9

    0
  17. 3217

    thanks.. this really helps..

    0
  18. 3418

    Hi,
    I am using filter for applying css3 in IE-8 to set background-size but when i set background size then background position position does not work
    Please help me to set background position with background size in IE-8

    Thanks
    Bharat

    0
  19. 3619

    If you’re looking for border-radius, box-shadow or linear-gradient in IE, you should take a look here http://css3pie.com/ – great tool for those tree options, otherwise:

    http://www.dowebsitesneedtolookexactlythesameineverybrowser.com :O)

    Cheers!

    0
  20. 3820

    IE9 will use the default border-radius, so just make sure you include that in all your styles calling a border radius. Then your site will be ready for IE9.

    -moz-border-radius is for Firefox, -webkit-border-radius is for Safari and Chrome.

    Furthermore: don’t forget to declare your IE coding is ie9:

    Some lazy developers have . If that tag exists, border-radius will never work in IE.

    and you can use this method for border radius:

    border-radius: 20px 20px 20px 20px;
    /*top right down left*/

    -moz-border-radius: 20px 20px 20px 20px;

    -webkit-border-radius: 20px 20px 20px 20px;

    0
  21. 4021

    The box-shadow, gradient and rotation don’t appear in IE10 on Windows 7.

    0
  22. 4222

    Hello Louis,

    this post is awesome. I really love to read this post.

    0
  23. 4423

    Thanks ,,,,,,,
    That’s what I am searching for ……..
    Once again thanks a lot for this precious knowledge.

    0
  24. 4624

    That was indeed a helpful article.How to go about translation in ie6 and get a perfect circle instead of rounded edges??

    0
  25. 4825

    Hello,

    I have a query related to css3 in IE7 & IE8. I have used pie.htc file for this and it is working but the main issue is that after some day these file stop working. I have to replace ‘pie’ file with new one and after some day same problem again generate and so on.

    So please please please, suggest me what I have to do to resolve this problem.
    Its sucks me…..

    0
  26. 5026

    Thanks author and all, very nice article and comments useful.

    0
  27. 5227

    after seeing too much draw backs in every style above and felt depressed with them

    0
  28. 5428

    But so many people using IE 6, while this htc can’t work for linear-gradient transparency that I tried. In Indonesia for the lowest version of IE is 6 that so people used in majority.

    0
  29. 5629

    I cant seem to make the full website have a background AND a div have a background…

    0

↑ Back to top