Using JavaScript for enhancing CSS support in Internet Explorer
I wrote this post a while back. The content can still be relevant but the information I've linked to may not be available.
One of the subjects that I have been keeping an eye on recently is the use of JavaScript to enhance support for more advanced CSS methods in Internet Explorer (IE). We all know that, despite some big improvements, Internet Explorer 8 does not support some of the newer CSS properties used by Firefox and Safari, which tend to lead the way in this respect.
If you want to use CSS3 methods, you are left with the decision whether to provide these for more modern browsers and leave IE out of the loop, or not use these newer methods at all. The first option is sometimes called progressive enrichment and it’s what I have chosen to do on this blog with the border-radius property. Whether you choose one or other of these options will depend on the browsers that your website visitors use and/or your attitude to the use of new methods. However, there is another option and that is to use JavaScript to enhance the CSS support in IE. Here are a couple of methods.
Firstly, Keith Clark has developed a script called ie-css3.js that rewrites your style sheet and renames styles so that newer CSS pseudo selectors are supported by all recent versions of IE. For example, the method enables the use of selectors like :nth-child, :last-child, and :first-child in Internet Explorer. Great stuff!
Note: The :first-child pseudo selector is supported in IE7 and IE8 but not in IE6.
Next, Dean Edwards’ IE7.js and IE8.js scripts solve many HTML and CSS issues with IE. There’s an explanation here and a list of selectors and properties that are supported. This script really means that you can treat IE the same as other browser in your style sheet. Additionally, by using conditional comments, you can target the JavaScript at IE browsers.
Both these methods use JavaScript in clever ways to provide greater support for new (and not so new) CSS methods in IE. It’s possible to explore the latest CSS properties with or without these scripts but their usage combined with modern CSS will provide your Internet Explorer users with an enriched website experience that is closer to other browsers.
Related: For an alternative approach, Modernizr determines the availability of CSS features and provides a way to use conditional statements/styles in your CSS.
Note: If you are concerned that a significant number of your website visitors will have JavaScript support turned off, use these methods with care. I’m not too concerned about this myself but I will always check my pages with JS disabled.
Comments
18 Jan 2010 13:37:01
I’m wary of using JS to influence the styling of a site; doesn’t that fly in the face of separating out structure/style/behaviour?
18 Jan 2010 14:34:23
@Matt Hill: Good point. The separation is something I have thought about recently because of the use of CSS3 transforms which you might view as influencing the behavior of a web page. My overall view is that there is some cross-over between structure, presentation and behavior. Just think about the :hover and :focus selectors in CSS for example. Surely, these could be considered as a response to a user action, therefore might be considered ‘behavior’. At the same time, many DOM scripting methods change mark-up and styling information on-the-fly. In these cases, JS is influencing mark-up and presentation.
19 Jan 2010 09:17:11
Having recently attempted to use CSS3 properties in a website this article is certainly very relevant. The options out for CSS3 are fantastic, making websites much richer and more attractive. However upon incorporating some of these properties (mainly the rounded corners property) it was disappointing to discover that IE (all versions) does not support CSS3 in any way.
I may incorporate Javascript into website I now wish to use CSS3 on, as clearly there is no support for IE at the moment. It will certainly be interesting to see how effective this fix is, and whether it will fix other properties currently not supported by IE.
With the recent developments concerning security in Internet Explorer, I wonder if we will see Microsoft now make an effort to reassure the public of its reliability, and start to develop the browser against excellent competition such as Firefox and Chrome. These have already forced Microsoft to develop the browsing experience with IE, I wonder if they will now force them to develop its coding to the standards used by Safari, Chrome and Firefox.
20 May 2010 03:05:44
Hi, your png transparency is not working when we use another png file. When we use same name which already in your file then it works. what’s this? please resolve the problem
Thanks Ravi Kumar
20 May 2010 08:51:48
@Ravi: I don’t understand your comment/question. What .png file are you referring to and how does it relate to the above article?
The article links to specific methods by other developers. If your question is about these methods, please ask the original developers. Thanks
Comments are OFF for this post.