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 Link

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 Link

#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 Link

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 Link

  • 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) Link

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 Link

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 Link

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

The Drawbacks Link

  • 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 Link

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 Link

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

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

The Drawbacks Link

  • 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 Link

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 Link

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 Link

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

The Drawbacks Link

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 Link

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 Link

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 Link

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

The Drawbacks Link

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

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 Link

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 Link

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 Link

  • 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 Link

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 Link

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 Link

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 Link

  • 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) Link

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 Link

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 Link

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 Link

  • 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 Link

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 Link

  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.

Advertisement
  1. 1

    Great post, and quite helpful if you have clients that want things streamlined across all browsers. Unless it’s key to the design, I think it’s probably not worth the hassle. The site will still work, and will look decent, which is what matters. Your methods will definitely take less work than using images and JavaScript, but since some of them have heavy draw backs, is it necessarily worth it?
    Also:
    http://dowebsitesneedtolookexactlythesameineverybrowser.com/

    5
  2. 2

    Who else hate Microsoft? Of course, everyone may use “filters”, everyone may write in VML, but… but why we have to write same application twice? It is ridiculous! You are talking, that you are writing websites for users, not for browsers. What are doing users? They use IE, becouse it works! What is doing Microsoft? Nothing. Becouse IE is still in use. Guys, please, break this vicious circle. I know, that clients want working website. But when you are coding your own web application – fuck IE. Fuck it hard.

    12
  3. 3

    So what you’re saying is that there is no reason to start using CSS 3 because you’re going to have to do work arounds anyways. How IE8 doesn’t support basic styles like border-radius, text shadows or fucking RGBA blows my mind!!!

    FUCK OFF MICROSOFT!!!

    4
  4. 4

    100% disagree! This is not a solution to CSS3 in IE. Using this coding method is essentially developing the browser! We are web developers not browser developers. If the users of your website are using an outdated browser that doesn’t support CSS3 selectors, then we shouldn’t have to hack and essentially develop the browser for Microsoft!

    Andy Clark recently explained the reasons why we should not use this technique during the Carsonfield CSS3 Web Conference!

    -1
  5. 5

    It’s amazing how people won’t use or don’t know there is other browsers than IE.
    It’s such a horrible browser to design for and is slow to use.
    What will it take for Microsoft to drop IE, and let users of there operating system pick their own browser of choice instead of forcing there crapping browser on you.

    Recently a client of mine brought an e-commece software package which won’t work in IE8, even thought he has a warning about IE8 and a link to download Firefox, visitors of the site site using IE8 refuse to download firefox, and have said until he fixes the site to work with IE8 they won’t be back.

    2
  6. 6

    Please, don’t waste time for IE. It’s just like the early times of color television. People who had color TV, got color. The others just kept on seeing black and white and did not complain. When they also wanted to have color, they knew that they had to buy a color TV. With browsers it is not even a question of paying for a new TV set. My God, Firefox, Chrome, Opera etc are just for free! You want color? Just get a decent browser for free! I really don’t see any client not be able to understand this simple fact. IE6 and IE7 and IE8 and I even fear for IE9, simply are all lower quality browsers.

    3
  7. 7

    amazing! this is a big help.

    4
  8. 8

    Nice article, especially the last sentence:)

    5
  9. 9

    Post is Very nice…! and helpful.

    The sad part is still there is problem with Internet explorer….?
    In olden days web developers had to fight with IE 6 and now the new enemy with upgraded version….? :(
    what’s the difference then?

    2
  10. 10

    Great article, it helps a lot man!
    Thanks very much indeed!

    0
  11. 11

    Lots of things to play with here! thanks!

    0
  12. 12

    Nice article even if the proposed solution for the rounded corners is not, in my opinion, the best.

    0
  13. 13

    Very informative post, thanks Louis. Yet more tools for the kit!

    0
  14. 14

    gradient css does not work in opera..

    0
  15. 15

    very handy solutions!

    0
  16. 16

    very usefull article – I still hope the demand for designingn websites optimized for IE7 and lower will die soon :D

    2
  17. 17

    thanks for the article, nice and easy.

    0
  18. 18

    Wow Thanks for completely ignoring Opera… </sarcasm>

    -3
  19. 19

    You seem to have forgotten the major drawback of using Microsoft filters: Anti-aliasing (Cleartype) is not applied to any text inside an element which has a filter applied. As a result, it looks even worse than usual on Windows machines.

    1
  20. 20

    It would be interesting to have a poll to see how many desginers actively use CSS3 nowadays and what kind of sites you design. Its not even an option for me, as I create corporate websites. Major audience for me still uses IE. And CSS3 has too many drawbacks in IE.

    0
  21. 21

    Wow, what a sensible response. Sarcasm!

    Do your research. There are some organisations that don’t have that choice.

    Great article, really enjoyed it!

    2
  22. 22

    There is another new css3 HTC which emulates box shadow, text shadow and border-radius. Mention it next time if you can! I have not used it yet but found it very interesting. Link: http://fetchak.com/ie-css3/

    Edit: It is based on Remiz Rahnaz script.

    0
  23. 23

    You can use the gradient filter to produce rgba results.

    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#33ffffff,endColorstr=#33ffffff); /*AARRGGBB*/

    Alpha, Red, Green, Blue

    you need to convert the alpha into hex from the 0-255 scale

    2
  24. 24

    100% agree

    0
  25. 25

    This is the main reason why I haven’t played around with CSS3 much. Most of my clients don’t even realize there are other browsers besides IE they can use.

    2
  26. 26

    Beautiful, i want more of these “hands on” articles!

    0
  27. 27

    The results of the recent ‘State of Web Development’ survey show how many developers are using CSS3: http://www.webdirections.org/sotw10/

    Personally the majority of my clients all use IE, yet this has, in no way, stopped me from using CSS3 selectors!

    It is up to us as the web development community to move things forward!

    1
  28. 28

    In all honesty, I simply cannot be bothered with all that. Fortunately I do not have clients that care too much about Internet Explorer, and am I grateful for that! But to include that level of ‘extra work’ I would consider charging a lot more because, depending on the site it is a lot more work.

    In my own projects I am perfectly happy for the progressive enhancement to shine through for anything other than Innternet Explorer. As long as the layout works I don’t really care whether it has curved or straight borders where such can’t be helped.

    But great article and I think it will certainly help a lot of people that find themselves in that position.

    However, I would like to stress my complete and utter shock and annoyance at your note that the CSS3 borders and background module *might* not support box-shadow. That hurts, really deep :-(

    0
  29. 29

    In what way is using IE’s filter a load of extra work?! How is it “developing the browser”?!

    Yeah, this isn’t the best way we’d like to work, but it’s better then the solutions we used to use.

    0
  30. 30

    Thanks for the great article. On text rotation, I tried implementing this myself a while ago, and (this may be my own ignorance, or a limitation of the css3 spec) I noticed that it always rotates around a center axis. While that may not be so bad, I then had trouble moving rotated text left or right. I forget the exact issue, but if I wanted a tall thin box of text rotated 90 degrees (rather than a square box) and placed preciseley, it seemed exceedingly difficult.

    0
  31. 31

    the box-shadow spec is only being rewritten, and possibly renamed, not completely removed.

    0
  32. 32

    Reüel van der Steege

    April 28, 2010 6:01 am

    Great article, thanks! I’m becoming more and more interested in CSS3 and this article helps a lot to work around common MSIE problems.

    1
  33. 33

    The Dojo Toolkit will support the transform and transform-origin properties on IE too, using the dojo.style function: http://archive.dojotoolkit.org/nightly/dojotoolkit/demos/css3/demo.html (click on the “rotate” box)

    0
  34. 34

    just opened this page in IE6, everything works like a charm. Still a lot of drawbacks unfortunatelly.

    Thanks for sharing!

    P.S. by the way “Post Comment” button it looks ugly and doesn’t show the text.

    0
  35. 35

    Im using IE 8 to test those css solutions but only Multiple Backgrounds works at me.

    0
  36. 36

    Thanks for the clarification on the spec. Hope it’s not a major change.

    When you’ve written A LOT of CSS and A LOT of it contains CSS3 to make things look a little nicer, going and adding all of that extra bloat is no easy task. And for the sake of some using getting an extra bit of flair I just don’t feel the benefits out-weigh all that work.

    Personal opinion, and something I’m not implementing myself, but kudos to those that have the patience needed for testing and creating images that could be changed in the future…

    -1
  37. 37

    whose responsible this?

    1
  38. 38

    Louis – good help for beginner. please make it, this type article more and more.

    1
  39. 39

    Lennard Schutter

    April 28, 2010 6:26 am

    Very nice!

    -1
  40. 40

    Yes, you can use such tricks. But these solutions (with htc-files or filters) are very very slow and resource-greedy (memory, CPU usage, time). IE will hang until image from AlphaImageLoader filter loaded. HTC-files are not being cached—IE generates http-request always when user loading a page. And ClearType font smoothing doesn’t work with filters. Users will see crude text.
    So, considering this, it is highly not recommended to use such methods if you don’t really need them.

    2
  41. 41

    Great article!

    1
  42. 42

    No methods seems to get proper validation :( IE , get out of the way – Just suicide :)

    1
  43. 43

    Friction between Microsoft and W3C.

    1
  44. 44

    This really isn’t worth the hassle, CSS3 is for modern standards compliant web browsers, IE isn’t one of these, don’t waste your time.

    0
  45. 45

    don’t use images for alpha opacity ( I posted a filter to do that earlier).
    add these when you are building your site to begin with not at the end.

    I agree, going back through a project would be tiedious, but you could write a script to parse your css and add the IE fixes automatically. hm, that’s actually not a bad idea…*goes of and ponders*

    1
  46. 46

    GreLI: My feelings are the same, however I think it should be thought through slightly more. If the situation allows, go ahead and make IE slow. If you’re required to support IE6 like I am sometimes, for design heavy sites, these are relatively good solutions. They make it “look” right, but impact performance for the user, which in the long run is a good thing. It may make another 10% see a reason to switch away to something that better supports CSS3. I’m thinking about it terms of that. Sometimes I work with designers that understand that it doesn’t have to look exactly the same in all browsers (eg. border-radius), but sometimes I don’t have that luxury, and I’ll happily impact the performance in those cases so users of IE don’t get as nice an experience.

    1
  47. 47

    Basically this means you should use progressive enhancement. Javascript and filters will have a negative impact on user experience.

    But — thanks for the round up. Still appreciated!

    0
  48. 48

    “CSS3 is probably the hottest trend in web design right now”

    How do you figure? I’d love to see a Smashing Poll to see how many front-end devs are actually *really* using CSS3 in “real world” work and to what sort of degree. I’m not talking about just throwing in some rounded corners for the “better” browsers and letting the rest get squared corners, I’m talking really using CSS3. Doesn’t seem that feasible to me at this point.

    -1
  49. 49

    Everyone should be using CSS3 … the effects it produces just shouldn’t be crucial to the design.

    1
  50. 50

    1px repeating backgrounds add a lot of load. You’re actually better off using a 10px repeating background even though the file size is slightly increased.

    0

↑ Back to top