Hide CSS from browsers

• 1. CSS tricks relying on lack of CSS support in browsers.
• 2. Browser sniffing using JavaScript object detection.
• 3. MSIE Conditional Comments.

Here are examples of various methods which let you hide CSS from buggy browsers. Please send comments and report errors to Christian Jacobsson,

1. CSS tricks relying on lack of CSS support in browsers.

Due to limited CSS support many browsers ignore CSS under certain circumstances, which can be exploited. Below are just a few examples I find useful, many more can be found at http://w3development.de/css/hide_css_from_browsers/ and http://www.richinstyle.com/masterclass/crossbrowser.html. None of the tricks in this section should rely on invalid HTML or CSS.

• Advantage: at least the @import tricks can be added in a single external style sheet instead of in every HTML page.
• Disadvantage: you can't always be sure in which older browser version a feature ceased to be unsupported. When hiding CSS from bugs in newer browsers you can't be sure if the hiding technique will work in future browser versions.

2. Browser sniffing using JavaScript object detection.

Since different browsers support different JavaScript objects, these objects can be used to identify a browser brand and -version. More suitable objects are listed at http://www.javascriptkit.com/javatutors/objdetect3.shtml (which also explains some theory behind object detection in general). Note that object detection is not the same as sniffing for User Agent strings, which is said to be unreliable since many browsers fake their UA strings (see http://webtips.dan.info/brand-x/useragent.html and http://www.blooberry.com/indexdot/html/topics/uastring-navobj.htm). However note that Opera supports different JavaScript objects depending on which browser it identifies itself as (see note below).

• Advantage: Example A features good backward- and forward compatibility: older browsers don't support document.getElementById while newer browsers have less CSS bugs.
• Disadvantages: this technique will not work in browsers with JavaScript disabled. You must also add the script on all HTML pages. You can minimize future maintenance work by linking to a script in an external .js file (which in turn links to an external style sheet) instead of writing out the whole script and style sheet on every page.

<script type="text/javascript">
<!-- 
if(document.getElementById) 
document.write('
<style type="text\/css"> 
p {margin: 0;} 
<\/style>');
//-->
</script>

Red text: keep all this on 
one line in real javascript

<script type="text/javascript">
<!-- 
if(!(document.getElementById&&!document.all)) 
document.write('
<style type="text\/css"> 
p {margin: 0;} 
<\/style>');
//-->
</script>

Red text: keep all this on 
one line in real javascript

3. MSIE Conditional Comments.

Microsoft Internet Explorer 5.0 and later recognizes "Conditional Comments", i.e. content that is written between SGML comments (like <!-- and -->) and therefore should be ignored by other browsers. See also http://msdn.microsoft.com/library/default.asp?url=/workshop/author/dhtml/overview/ccomment_ovw.asp and http://www.blooberry.com/indexdot/html/tagpages/c/conditblock.htm.

• Advantage: lets you determine exactly what you want to give various IE versions above IE5.
• Disadvantages: you must add it into every HTML page. While Example A below is valid HTML (but perhaps not valid SGML), HTML validators should complain about Example B.

<<Back