Cascading Style Sheets/Hacks and Filters/Caio Hack

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.xEdit

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 worksEdit

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;
}
Last modified on 22 June 2011, at 15:03