CSS Hacks

by jp on June 20, 2004

I found nice collection of css hacks. Of course real css programmer wont need these but anyway here it is. :)

Text below found from

café phespirit

CSS Hack 1 : hiding CSS from NN4

Example code – to hide a horizontal rule width setting of 100% from NN4:

/*/*/a{}

hr { width : 100%; }

/* */

By preceding single or multiple style(s) with  /*/*/a{}  and terminating the style(s) with  /* */  all content in between will be invisible to NN4. Hacks for other browsers can be used inside this hack.

CSS Hack 2 : hiding CSS from IE4/5

Example code – to set a paragraph font-size of x-small for IE4/5 and a font-size small for IE6:

p
    {
    font-size : x-small;
    voice-family : “”}”";
    voice-family : inherit;
    font-size : small;
    }

Microsoft Internet Explorer versions 4 and 5 cannot detect styles after  voice-family : “”}”";  due to a bug in their implementation of voice-family. This example initially sets the font-size to a keyword value of x-small for all browsers, then terminates the style settings for IE4/5, recovers the voice-family style for IE6 (along with other browsers which do not have this bug) and finally resets the font-size to small.

[NOTE: this hack is not used in the phespirit.info stylesheet]

CSS Hack 3 : hiding CSS from IE4/5/6

Example code – to hide a horizontal rule width setting of 100% from IE4/5/6:

html>body hr { width : 100%; }

Microsoft Internet Explorer versions, up to and including version 6, are unable to recognise style rules which include a child selector (two or more selectors separated by a “>” symbol) in the definition. This example checks for horizontal rule elements which are the descendant of a body element which in turn is the child of the html element.

CSS Hack 4 : hiding CSS from Opera

Example code – to hide a horizontal rule width setting of 100% from Opera:

head:first-child+body hr { width : 100%; }

Opera is unable to recognise style rules which include the  :first-child  pseudo-element in the definition. This example checks for horizontal rule elements which are the descendant of a body element which in turn is the first child (i.e. immediately follows) a head element.

CSS Hack 5 : hiding CSS from IE4/5/6 and Opera

Example code – to hide a horizontal rule width setting of 100% from IE4/5/6 and Opera:

html>head:first-child+body hr { width : 100%; }

By combining hack 3 and hack 4 , CSS can be hidden both from versions of Microsoft Internet Explorer up to and including version 6, and from versions of Opera up to and including version 6.

CSS Font-Size Hack : setting equivalent font-size keywords for NN4, IE4/5/6, Opera and NN6/7

Example code – to set a paragraph font size equivalent to HTML size=2 in all browsers:

p
    {
    font-size : small;
    }

/*/*/a{}

body p
    {
    font-size : x-small;
    }

html>head:first-child+body p
    {
    font-size : small;
    }

/* */

The paragraph font-size is set three times in this example. It is initially set as small for NN4, after which all subsequent code is hidden within hack 1 . It is then reset to x-small for IE4/5/6 and Opera, using the more-specific  body p  descendant selector method. It is then reset to small again, this time for NN6/7, using hack 5 , which contains even more specific methods.

NOTE: in this example IE6 requires either that no DTD be applied or that the DTD applied is:
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”>

Example table – equivalences for CSS keyword font-size in various Microsoft Windows browsers:

Browser HTML size 1 HTML size 2 HTML size 4
Netscape 4.78 see note (i) below x-small; small; medium; bold;
Netscape 6.20 x-small; small; large;
Netscape 7.00 x-small; small; large;
Microsoft Internet Explorer 5.50 xx-small; x-small; medium;
Microsoft Internet Explorer 6.00 (case 1) xx-small; x-small; medium;
Microsoft Internet Explorer 6.00 (case 2) x-small; small; large;
Opera 6.04 xx-small; x-small; medium;

Notes:

  1. There is no exact keyword equivalent to HTML size 4 for Netscape 4.78; phespirit.css uses keyword medium together with font-weight bold in preference to keyword large with font-weight normal.

  2. Microsoft Internet Explorer 6.00 (case 1) assumes either that no DTD has been applied or, as in the case of phespirit.css , that the DTD used is:  <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”>

  3. Microsoft Internet Explorer 6.00 (case 2) assumes that any other DTD has been applied.