How to Use Different CSS Style Sheets For Different Browsers

And How to Hide CSS Code from Older Browsers


How to Use Different CSS Style Sheets For Different Browsers (and How to Hide CSS Code from Older Browsers)

by Christopher Heng, thesitewizard.com

In an ideal world, you only need one set of CSS style sheets for your website, and those styles will work with every browser currently being used. This, as every webmaster soon finds out when he/she uses CSS, is a pipe dream. The modern browsers all have uneven levels of implementation of the CSS standards. As though this isn't bad enough, their implementations are often buggy — and they don't share the same bugs! And when you have solved that tricky bit, you find that your site has certain visitors (often your best customers) who, for various reasons, are using older browsers that have only rudimentary support for CSS.

What most (if not all) CSS-using webmasters want is a way to specify that a certain style sheet is to be used by such and such a browser and not others, as well as to hide other style sheets from older browsers.

The Good and Bad News

The bad news is that there is no standard documented method to include or exclude style sheets from being used by every browser still being used on the Internet.

All is not lost however. The good news is that there are a number of tricks, workarounds and even non-standard but documented methods available that you can use to have your style sheet included by some browsers and not others. The workarounds often rely on known bugs in certain versions of specific browsers.

On the other hand, even with these workarounds and tricks, you will probably find that there are certain browsers that you want to code for but do not have any reliable means to detect and work around. However, with the help of the tips listed here, you should be able to design a CSS-based website that works with the most commonly used browsers

Preliminary Tips for Coding

Before you start coding your site using CSS for specific browsers, here are some tips that hopefully will make your life easier.

  1. Design From Scratch

    Most webmasters who have had to convert their existing non-CSS website to CSS say that they find it easier to design their site from scratch in CSS than to try to find a way to reproduce their old layout in CSS.

    Another reason for designing from scratch is that CSS allows you to do many things not possible using the old paradigms. Rethinking your entire design allows you to take advantage of the new possibilities.

    (Note: if yours is a brand new website, then this paragraph obviously doesn't apply to you.)

  2. Code to Follow the CSS Standards First

    Many web designers have found that it is far easier to develop their CSS code for a standards-compliant browser (which nowadays include all modern browsers: Internet Explorer ("IE") 8 and above, Firefox, Opera, Safari and Chrome) and then only later add the workarounds to make their code work for IE 6 and 7, than to start with IE6 and IE7 and try to make it work for a modern browser.

    It is also logical to write for a more standards-compliant browser first: old browsers like IE 6 and 7 are rapidly disappearing from the Internet so much so that many sites (including a number of Google's services) don't even bother to support them. There will definitely come a day when those browsers vanish completely from the world, and when it does, all you have to do is to remove the workarounds which you've created and you're done. If you write your main style sheet with styles that are coded in a non-standard way to deal with the bugs in IE 6 and 7 first, you will end up having to rewrite everything when it happens.

    This is not to say that the modern browsers do not have its own share of CSS bugs. As such, my personal recommendation is to test with at least 2 or 3 of the modern browsers each time you write your code. Note that if you test with the bare minimum of 2 browsers, make sure you choose those that use completely different display technologies (called "rendering engines"). For example, IE 11 uses its own rendering engine, as does Firefox 28. However, Chrome, Safari, Konqueror and versions of Opera later than 12.x all use a rendering engine that is based on code created originally for Konqueror. So if you must test using only 2 browsers, at least choose them from completely different families, like IE and Firefox, or something like that. This way, you can be more confident that your site looks good not because of a bug in the rendering engine, but because your code correctly reflects what needs to be done to produce that effect. You should also periodically validate your CSS code with perhaps the W3 Consortium's free style sheet validator. Only after having done the above, should you add the workarounds for IE 6 and 7.

  3. Use External Style Sheets and Take Advantage of the "Cascading" Aspect of Cascading Style Sheets

    One way to handle the bugs and omissions existing in different browsers is to put all your standards-compliant CSS code in a separate (external) style sheet file that is loaded by every browser.

    Then, when you find that a specific browser requires a workaround, use the methods listed below to load an additional style sheet designed specifically for that particular browser. The beauty of CSS is that you can redefine a different style for the same selector and have the last-defined style override all preceding definitions.

    Placing your main standards-compliant style sheet and the browser-specific style sheets in different external files allow you to simply remove a particular file in the future should that version of the browser cease to be used.

  4. There's No Substitute for Testing

    Even when you have validated your CSS code, you should still test your code manually using different browsers. There is no substitute for this: just because your code is standards-compliant does not mean that the browser will render it the way you want it to.

    You can find information on how you can install multiple versions of different browsers on a single machine from http://www.thesitewizard.com/webdesign/multiplebrowsers.shtml

Including or Excluding Style Sheets for IE 5 to 9

One of the easiest things to do is to specify that a certain style sheet be loaded only by IE 5, 5.5, 6, 7, 8 or 9, or be excluded from them.

Microsoft provides a non-standard extension that allows you to detect those versions of IE, and include or exclude code depending on the version. The extensions, called "conditional comments", only work for those versions of IE and none other. Specifically, they do not work on IE 10 and later, which behave just like other browsers in ignoring those conditional comments.

To cause (say) a CSS file like "iespecific.css" to be loaded by IE 6 and not other browsers, use the following code in the HEAD section of your web page:

<!--[if IE 6]>
<link rel="stylesheet" type="text/css" href="iespecific.css" />
<![endif]-->

Likewise, for any version of IE 5 (including 5.0, 5.01, 5.5, etc), use the following:

<!--[if IE 5]>
<link rel="stylesheet" type="text/css" href="iespecific.css" />
<![endif]-->

Detecting minor versions of IE 5 is a bit more tricky. The moment you specify a minor version, you are expected to get the whole version number correct. For example, to detect the release build of IE 5.5, you will need the following code:

<!--[if IE 5.5000]>
<link rel="stylesheet" type="text/css" href="iespecific.css" />
<![endif]-->

The test will fail if your visitor has a version of IE 5.5 that not have that exact version number (for example, if he/she has updated IE 5.5 with one of the service packs).

To make life easier for webmasters who need to test for a whole range of IE versions, you can use the comparison operators "lt" (less than), "lte" (less than or equal), "gt" (greater than), and "gte" (greater than or equal).

For example, to test for all versions of IE (that support the conditional comments) greater than or equal to version 6, you can use

<!--[if gte IE 6]>
<link rel="stylesheet" type="text/css" href="iespecific.css" />
<![endif]-->

The above code examples work because a normal browser sees the entire block as an HTML comment since they are enclosed within "<!--" and "-->". IE 5 to IE 9 will however attempt to parse the block to see if it has instructions specific to it. As mentioned before, IE 10 will behave like a normal browser and ignore the comment.

You can also exclude a certain style sheet using this method. For example, to exclude the CSS file "not-ie.css" from IE 6, use:

<![if !(IE 6)]>
<link rel="stylesheet" type="text/css" href="not-ie.css" />
<![endif]>

Notice the "!" operator immediately preceding "IE". This is the "NOT" operator, causing the statements following to be used only if the expression "IE 6" is not matched by the browser.

Again, the above code works because a normal browser will interpret "<![if !(IE 6)]>" and "<[endif]>" as HTML tags that it does not recognise, and ignore them. This code, however, will not validate as correct in a HTML validator, since it does not use valid HTML tags.

Note that you can also test for IE without specifying a version number. For example, the following loads the style sheet only if the browser is not IE 5 to 9:

<![if !IE]>
<link rel="stylesheet" type="text/css" href="not-ie.css" />
<![endif]>

Microsoft's documentation for this non-standard feature can be found at http://msdn2.microsoft.com/en-us/library/ms537512.aspx

Update: The information in this box applies to old browsers that are no longer in use today, and as such, can be ignored. It is preserved for historical interest only.

How to Hide CSS from IE 5 and Below for Windows

If you place a comment immediately after a selector in a style sheet, IE 5 and earlier on Windows will ignore that selector.

In the following example, "Large text anyone?" will not be enlarged in IE 5 and earlier.

<style type="text/css"><!--
  p.largetext/* */ { font-size: 200% ; }
--></style>
...(etc)...
<p class="largetext">
  Large text anyone?
</p>

Although some web designers claim that this trick will also hide the style for the selector on IE 4.01 for Macintosh, I found that IE 4.01 on a 68k Mac displays the text correctly.

In general, IE for Macintosh uses a different source code base from IE for Windows. Hence bugs in the Windows versions do not imply bugs in the Macintosh variety and vice versa.

Hiding Styles from IE 3 for Windows

If you use the @import rule to load an external style sheet as in the following example, IE 3 for Windows will not load it.

<style type="text/css"><!--
  @import url(not-oldbrowser.css);
--></style>

One side effect of this is that Netscape 4 will also not load the referenced style sheet. According to some webmasters, certain versions of IE 4 for Windows is affected in the same way if the style sheet is located in a different directory from the calling HTML file. Since I no longer have IE 4, I'm unable to test this claim.

How to Hide Cascading Style Sheets from Netscape 4

Apart from IE, the other browser that you will probably want to specifically code for, to work around bugs, is Netscape 4. It is probably the only old browser from the early-CSS era that is still being used today (to the anguish and frustration of most CSS-using web designers). Other browsers from that era (such as IE 4 and earlier) are thankfully so rare that most webmasters (like me) pretend they don't exist.

Like other browsers of that period, Netscape 4 is replete with bugs in its CSS implementation. Fortunately, it is easy to exclude styles from Netscape 4. There are a few well-tested methods to do this, all of which take advantage of bugs in the browser's CSS implementation. They are known to work in all Netscape 4.X versions up to and including 4.80, which is the most recent 4.X version at the time I write this.

I will list the two most commonly used methods. They are so widely used on the Internet that I doubt AOL/Netscape will slip in a bug-fix for these in one of their security fixes (assuming they even bother to maintain the 4.X series anymore).

a. Using the @import Rule

As mentioned earlier, using the @import rule to load an external style sheet will cause that style sheet to be ignored in Netscape 4.

For example, "not-netscape4.css" will not be included in the following rule:

<style type="text/css"><!--
  @import url(not-netscape4.css);
--></style>

The side effect of using this rule is that IE 3 for Windows will also not load the style sheet. This is not necessarily bad, since IE 3's support for CSS is even buggier than Netscape's. It may, however, also exclude your style sheet from certain versions of IE 4 for Windows.

b. Using the Media Attribute in the Link Tag

If you link to your style sheets with a media attribute other than "screen" using a line like the following, Netscape 4 will not load them.

<link rel="stylesheet" type="text/css"
   href="not-netscape4.css" media="all" />

Even the following line will not work in Netscape 4:

<link rel="stylesheet" type="text/css"
  href="not-netscape4.css" media="screen,print" />

Netscape 4 only loads the style sheet if you either omit the media attribute or use "screen" as the value for that attribute.

As far as I can tell, there are no side effects to using this method.

Conclusion

While this list of hacks and workarounds is by no means exhaustive, I found the above to be the most useful and having the least number of side effects. With this bag of tricks in your arsenal, you should be able to create a site that works fairly similarly under the browsers being used today.

Copyright 2003-2014 by Christopher Heng. All rights reserved.
Get more free tips and articles like this, on web design, promotion, revenue and scripting, from http://www.thesitewizard.com/

thesitewizard™ News Feed (RSS Site Feed)  Subscribe to thesitewizard.com newsfeed

Do you find this article useful? You can learn of new articles and scripts that are published on thesitewizard.com by subscribing to the RSS feed. Simply point your RSS feed reader or a browser that supports RSS feeds at http://www.thesitewizard.com/thesitewizard.xml. You can read more about how to subscribe to RSS site feeds from my RSS FAQ.


Please Do Not Reprint This Article

This article is copyrighted. Please do not reproduce this article in whole or part, in any form, without obtaining my written permission.

Related Pages

New Articles

Popular Articles

How to Link to This Page

It will appear on your page as:

How to Use Different CSS Style Sheets For Different Browsers (and How to Hide CSS Code from Older Browsers)





Home
Donate
Contact Us
Link to Us
Topics
Site Map

Getting Started
Web Design
Search Engines
Revenue Making
Domains
Web Hosting
Blogging
JavaScripts
PHP
Perl / CGI
HTML
CSS
.htaccess / Apache
Newsletters
General
Seasonal
Reviews
FAQs
Wizards

 

 
Free webmasters and programmers resources, scripts and tutorials
 
HowtoHaven.com: Free How-To Guides
 
Site Design Tips at thesitewizard.com
Find this site useful?
Please link to us.