CSS Hacks

CSS hacks have a long and colorful history. For a bit of historical perspective, some of the most popular CSS hacks are explained below. This is not an exhaustive list, and there’s really no need to remember all the hacks and variations in detail, but you should be aware that they exist. For example, if you happen to inherit a site and discover some obscure CSS notation in an old style sheet, you’ll be able to identify it and understand its purpose. If you can’t find a particular hack in this list, look them up as required from the many resources around the Web, including Dynamic Site Solutions and Centricle.com.

The Backslash and Underscore Hacks

Numerous characters trigger non-compliant behaviors in different browsers. Both of the hacks we’ll discuss in this section constitute legal CSS, but rely on specific browser bugs in order to work.

The first application we’ll look at is the backslash hack, in which a backslash character is inserted into a property name. The backslash indicates a character escape in CSS escape notation and browsers that comply with the CSS specification should ignore the character in this context. However, Internet Explorer 5.5 and earlier versions will ignore the whole declaration when they meet a character escape in the middle of a property name. Here’s an example:

.test {
  height: 500px;
  he\ight: 400px;
}

Modern browsers will apply a height of 400px, but Internet Explorer 5.5 and earlier versions will retain the value of 500px, since they’ll ignore the latter declaration.

Note: Positioning the Backslash

For this hack to work properly, the backslash must be positioned in the middle of the property, not at the beginning. Also, it shouldn’t appear before the letters a to f, or A to F, or numerals 0 to 9—if it does, those characters will be treated as hexadecimal numbers according to CSS escape notation rules.

The second application we’ll review is the underscore property hack, in which an underscore character is inserted at the beginning of a property name. This is valid CSS, and modern browsers will simply ignore the declaration because the property is unknown. However, Internet Explorer 6 and earlier versions ignore the underscore and apply the declaration. For example, in the following CSS, most modern browsers will ignore the second declaration, but Internet Explorer 6 and earlier versions will apply it:

.test {
  position: fixed;
  _position: absolute;
}

The Voice-family Hack

The most famous, and perhaps oldest, CSS hack is the voice-family hack, also known as the box model hack because it was specifically designed to work around the disparity in the implementation of the box model in Internet Explorer 5.x and other standards-compliant browsers. It’s also known as the Tantek Hack—named after its inventor, Tantek Çelik. It’s an ugly and complicated hack that’s virtually impossible to remember off the top of your head. Here’s what the complete hack looks like:

.test {
  width: 500px;
  padding: 50px;
  voice-family: "\"}\"";
  voice-family: inherit;
  width: 400px;
}
html>body .test{
 width: 400px;
}

The hack worked thanks to a flaw in the CSS parser in Internet Explorer 5.x, and it effectively cut the declaration block short at the curly brace in the middle of this section of code: "\"}\"".

This flaw effectively made Internet Explorer 5.x see something like this:

.test {
width: 500px;
padding: 50px;
voice-family: "\"}

The browser ignored the width: 400px; declaration, and retained the 500px width value. Most other browsers will apply the 400px width instead.

Unfortunately, Opera 5, which was in use at the time, exhibited the same parsing bug as IE5 and IE5.5, so an extra rule needed to be added using the child selector. Opera 5 supported the child selector and applied the declaration:

html>body .test{
  width: 400px;
}

As I mentioned, it’s an ugly hack, but it was necessary at the time. Eventually, it was surpassed by the simpler star selector hack.

The Commented Backslash Hack

This hack targets a CSS parsing bug in Internet Explorer 5 Mac. To hide rules from IE5 for Mac, simply place a backslash before the close of a comment:

/* begin hiding from IE5 Mac \*/
.test {
  color: red;
}
/* end */

IE5 for Mac won’t see the close of the comment, so it’ll ignore everything between the backslash and the end of the next comment.

You can also achieve precisely the opposite effect with the following CSS:

/* apply ONLY to IE5 Mac \*//*/
.test {
  color: red;
}
/* end */

The High Pass Filter

The High Pass Filter was developed by Tantek Çelik in order to hide a style sheet from browsers that supported the @import method but didn’t provide a decent level of support for CSS1. The hack looks like this:

  @import "null.css?\"\{";
  @import "highpass.css";

This actually constitutes valid CSS. The first statement attempts to import a file from the URI null.css?"{, which is an empty file, while the second statement imports the desired style sheet. Internet Explorer 6 and up, Internet Explorer 5 for Mac, Netscape 6 and up, and Opera 5 and up could read these two statements correctly, but older browsers got caught up on the escape characters and failed to load any style sheets.

User-contributed notes

ID:
#10
Contributed:
by Paul O'B
Date:
Fri, 16 May 2008 21:38:42 GMT

The underscore hack indeed will not validate and is an ugly hack that should be avoided at all costs. (I don't know how it crept in here as it wasn't in the original draft :))

Related Products