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 |
|
Description | IE interprets syntax 1 as equivalent to |
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 |
|
Description | For some reason Opera does not recognize the attribute selector when the attribute specified is The |
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 [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 |
|
Description | Opera does not yet recognize the |
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 |
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 |
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 |
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 |
|
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 |
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