This is an ongoing project to compile and document various invaluable CSS techniques being currently used by web authors for HTML and XHTML. These are real world techniques for real world problems, addressing both legacy browsers and the current crop of very standards compliant browsers such as Mozilla.

The techniques herein were culled from a number sources including web authoring discussion lists and web sites. As much as possible the author or source is indicated.

Conventions Used

A double question mark enclosed in brackets [??] indicates uncertainty in that particular information.

Browser Abbreviation
Microsoft Internet Explorer IE
Mozilla MOZ
Netscape NS
Opera OP
Name
Formal or de facto name of the technique rendered boldface
Author / Source Author and/or source when available
Synopsis A short description of what the technique is about
Target Browsers Browsers which the technique impacts
Syntax 
HTML / XHTML markup and/or CSS rules. Displayed in maroon colored monospace font.
Description Detailed description of the technique
Examples Examples with pertinent explanations
Warnings Precautions when using the technique. Warnings are displayed in red.
Remarks Miscellany such as further resources

The Compendium

Name
Mother of HTML Hack
Author / Source under experimentation by Edwardson Tan
Synopsis An IE specific selector
Target Browsers IE5.x/Win, IE6/Win
Syntax 
  1. * html

  2. * * body

  3. * html body
Description

IE interprets syntax 1 as equivalent to html (no universal selector), syntax 2 as equivalent to * body, and syntax 3 as equivalent to html body. Since syntax 1, 2 and 3 are all valid while being semantically incorrect with regard to valid HTML and XHTML documents we can take advantage of this IE bug and use the above selectors to declare CSS that only IE will implement.
Examples
Warnings
Remarks
Name
Author / Source under experimentation by Edwardson
Synopsis
Target Browsers IE5.5
Syntax 
<selector>
{
   <property>: /**/<value>
}
Description

IE will ignore any declaration when a comment, even an empty one, is inserted between the CSS property and the value.

Fortunately, NS4.x ignores the comment
Examples 
div
{
   width: 
}
Warnings On IE6 this will only work with some CSS properties and if there is blank space between comment and value. Therefore, to ensure that only IE5.5 is targetted set value flush against the closing comment tag
Remarks
Name
Author / Source under experimentation by Edwardson
Synopsis Hiding rules from Opera using attribute selector
Target Browsers Opera
Syntax 
  1. html[xmlns] <selector>
{
   <declarations>
}
  2. or alternately if there are no namespace attributes outside the root element: 
    [xmlns] <selector>
{
   <declarations>
}
Description

For some reason Opera does not recognize the attribute selector when the attribute specified is xmlns. Because of this lapse we can use an attribute selector set to xmlns to hide CSS rules from Opera (and IE). MOZ and NS6.x and higher do understand this particular attribute selector and will properly read the CSS rule.

The xmlns attribute must be present in the root element if this technique is to be useful. Moreover, if the shorthand method is used (syntax 2) then there must not be any xmlns attributes in any element except the root element.
Examples

Given the following markup:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
   <head>
      <title></title>
   </head>
   <body>
	    <p>This is some text with a certain color. Now we would like 
	    the <a href="somelink.html">LINK</a> to have the same color 
	    as this text, and in addition to have an underline to distinguish 
	    it.</p>
   </body>
</html>

we may wish to style links that inherit the color of the text it is embedded in. But since Opera (and IE) does not understand inherit we can hide it from that browser as follows:

[xmlns] a:link
{
   color: inherit;
}
Warnings

This method is only for XHTML markup. Make certain that the namespace is correct.

Keep in mind that specificity of this selector is high because of the attribute.
Remarks
Name
Owen Hack
Author / Source Owen Briggs
Synopsis Selector that hides rules from Opera
Target Browsers OP, IE/win
Syntax 
  1. html>head:first-child+body <selector>
{
   <declarations>
}
  2. Shorthand: 
    :first-child+body <selector>
{
   <declarations>
}
Description

Opera does not yet recognize the first-child pseudo class and therefore ignores any CSS rule that contains that selector.

Examples
Warnings
Remarks
Name
Author / Source under experimentation by Edwardson
Synopsis
Target Browsers Opera
Syntax 
<property>: <value><space>\<space>;
Description

Adding a backslash after the declaration and before the semicolon hides the declaration from all browsers except OP (and to a limited extent NS4.x). This will not work on all declarations. For example applying it to font-size

Examples 
color: red \ ;

Only OP will be able to correctly implement this declaration. IE and MOZ will ignore it.

Warnings This hack will only work on certain CSS properties.
Remarks
Name
Author / Source
Synopsis Using CSS child selector to hide CSS properties from IE
Target Browsers IE5.x, IE6
Syntax 
html>body /* selectors */ 
{
   /* properties */
}
Description

IE5.x and IE6 do not understand the CSS child combinator > and so ignores the entire selector and the properties specified for that selector. This makes it an effective way to hide a group of CSS settings from IE. Browsers that do comprehend the child selector syntax will process the CSS rule.
Examples 
div.positioned
{
   width: 25%;
   padding: 0 2%
}

html>body div.positioned
{
   width: 21%;
}

The first CSS rule is understood by most CSS-aware browsers including IE. The second rule, however, contains a child selector which IE does not understand and, therefore, ignores the whole rule. In this particular example this IE bug is taken advantage of to work around another IE bug, namely, its incorrect implementation of the width property. CSS2 specification states that width refers to the content width excluding the padding values. IE incorrectly includes them. Therefore, in order for a page to look the same in IE and in browsers that correctly implement the width property we have to set two separate rules, one for each browser. If we want to have a total width of 25% including 2% padding each for left and right, we have to subtract 4% to get the content width. Hence, the second rule above with a child selector which standards compliant browsers understand.
Warnings The CSS rule with a child selector may precede or succeed the rule which IE understands if the selector's specificity is higher. If it is lower the rule must succeed the rule for IE, else, other browsers will get the incorrect values (in the example above,. a width value of 25% instead of 21%). See CSS2 Specs: Cascading Order.
Remarks
Name
Author / Source
Synopsis sing CSS sibling selector to hide CSS properties from IE
Target Browsers IE5.x, IE6
Syntax 
  1. head+body <selector>
  2. or alternately 
    *+body <selector>
Description

Examples
Warnings
Remarks
Name
Author / Source
Synopsis Using CSS escape character to hide selectors and/or properties from IE5.x
Target Browsers IE5.x
Syntax place a backslash character before any character except a, b, c, d, i f, A, B, C, D, E, F, and any digit
Description

The backslash is the escape character in CSS. Placing one before any of the characters a to f or A to F will escape it into a hexadecimal number. Other characters when escaped do not take on a special meaning.

Because IE5.x does not recongize the backslash escape character

Examples
Warnings IE6 recognizes the backslash escape character.
Remarks
Name
Tantek Çelik Hack
Author / Source Tantek Çelik
Synopsis
Target Browsers IE5.x
Syntax 
/* selector */
{
   width: /* width value for IE5.x */;
   /* IE5.x sees properties written here */
   voice-family: "\"}\"";
   voice-family: inherit;
   /* IE5.x does not see properties that follow */
	 width: /* width value for standards compliant browsers */
}

html>body /* selectors */ 
{
   width: /* width value for OP5 */
}
Description

Examples
Warnings
Remarks
Name
Simplified Box Model Hack
Author / Source
Synopsis Using escape character on property instead of property values as is done in the Box Model Hack
Target Browsers IE5.x
Syntax
Description

Examples
Warnings The backslash escape character will trigger NS4.x to ignore the entire stylesheet.
Remarks
Name
Caio Chassot Hack
Author / Source Caio Chassot
Synopsis Technique to hide CSS rules from NS4.x
Target Browsers NS4.x
Syntax 
/* place CSS rules after the next comment */
/*/*/

/* any regular CSS comment ends the Caio Hack */
Description

NS4.x will ignore all CSS rules enclosed within /*/*/ and /* */
Examples
Warnings
Remarks
Name
Conditional HTML Comments for NS4.x
Author / Source http://www.dynamicdrive.com/newsletter/issue9.htm#2
Synopsis JavaScript conditional statement inside HTML comment to hide markup from non-NS4.x browsers
Target Browsers NS4.x
Syntax 
<!--&{a javacscript conditional expression};
HTML markup here is parsed if conditional expression evaluates true
-->
Description

Examples 
<!--&{document.layers!=null};
   <p style="color red">
      You are using Netscape Navigator 4.x. 
      This page may not render as completely
      as the author intends it.
   </p>
-->

NS4.x will treat all the text within the conditional comment as markup. In this case it will display the text inside the paragraph in red. Other browsers do not understand the conditional comment and treats it like an ordinary comment, ignoring everything inside it.
Warnings

Do not include comments inside the conditional comment. Nested comments are forbidden in HTML and XHTML.
Remarks
Name
Conditional HTML comment for IE
Author / Source http://msdn.microsoft.com/workshop/author/dhtml/overview/ccomment_ovw.asp
Synopsis
Target Browsers
Syntax 
<!--[if ]>
HTML markup here is parsed if conditional expression evaluates true
<![endif]-->
Description

Examples
Warnings
Remarks

Glossary of Web Authoring Terms

Combinator
A reserved character in CSS that defines the relationship between type selectors. The combinators in CSS2 are whitespace (blank space) for the descendant combinator, > (angle bracket) for child combinator, and + (plus sign) sibling combinator.
see CSS2 Specs: Selectors
Selector