Cascading Style Sheets/Hacks and Filters/Caio Hack

From Wikibooks, open books for an open world
< Cascading Style Sheets‎ | Hacks and Filters
Jump to: navigation, search

Caio Hack is a simple CSS comments-based hack used in 'inline' and 'external' CSS declarations to hide information from Netscape 4. This hack is named after Brazilian Caio Chassot, the person who accidentally discovered this peculiar behaviour in the Netscape browser.

The problem with Netscape 4.x[edit]

The Netscape 4.x browser has had a reputation of having an extremely buggy CSS capability and support and as a result people discovered quirky functionalities within the CSS interpretor and used them as exploits in cross-browser CSS compatibility.

How it works[edit]

The Caio Hack makes use of a rather peculiar behaviour in the browser's CSS comments' interpreter. Consider the following code:

.foo1
{
  color: green;
  background-color: yellow;
}
.foo2
{
  color: red;
}
.foo3
{
  color: blue;
}

To hide, for instance, the selector foo2, we would need to delimit it in the special comments as below:

.foo1
{
  color: green;
  background-color: yellow;
}
/*/*/
.foo2
{
  color: red;<code></code>
}
/* */
.foo3
{
  color: blue;
}

Not just selectors, but individual properties can also be hidden from the NS4 engine.

.foo1
{
  color: green;
  /*/*/ 
  background-color: yellow; 
  /* */
}
.foo2
{
  color: red;
}
.foo3
{
  color: blue;
}