Caio Hack

From CSS Discuss

Jump to: navigation, search

The Caio hack is named after Caio Chassot, the person that discovered it.

This Css Hack is used to hide rules from Netscape Four . Make sure you note the side effect that must be worked around for Opera.

The hack is useful for when the Import Hack is unwieldy or undesired... Heck, some people like to use Import for its intended purpose.  ;)

The hack exploits a bug in NN4's parser (what validating hack doesn't?).

There's a very good explanation in Hiding CSS from Netscape 4, but I'll reproduce the essence here.

Use a comment like this to begin hiding from N4.. .


All subsequent CSS will be ignored by it, because it thinks the comment didn't close. Add another comment, and N4 will get back reading the styles from this point on.




.foo1 { color: red } /* Tell NS4 to ignore these styles.... */ /*/*/ .foo2 { color: red } .foo3 { color: red } /* Okay, we can let NS4 see the rest.... */ .foo4 { color: red }


If you are using Netscape 4....

This is red

This is not red

This is not red

This is red

This inline-styled p is not red

Browser support

Netscape 4 seems to be the only affected browser. Opera 5.0 for Mac is partially affected, but it can be easily worked around. It only ignores the rule immediately following /*/*/, so including an empty rule directly after the comments eliminates the problem:

/*/*/a{} .foo {color:red} /* */

Note that writing:

  1. bar {
       border:3px solid #000;
       /* */
  1. baz {
       border:3px solid #000;

Allows Opera 5.0 for Mac to render all the rules of bar and baz, and only hides the two last rules of bar from Netscape 4.

Note: Not true if the first rule is margin or padding (and others? I only tested these.). Then the first rule after the hack is ignored. Can be solved by writing the first rule twice.

The Anti-Caio hack

(This is called Fabrice's Inversion and some betas of Safari were evidently susceptible to it.)

Some theory

The Caio hack seems to work because Netscape 4 is unable to see '/*/*/' as a complete comment. Thus it stays in comment mode while other browsers return to parsing mode. A second, normal complete comment is ignored by those other browsers, but NS4, being in comment mode, latches on to the trailing '*/' and happily returns to parsing mode.

Consider the situation just after the '/*/*/'. Suppose you write this:

/*/*/ /*/

Good browsers see a complete comment and the start of a second comment, ignoring the trailing forward slash. But NS4, being still in comment mode, sees the '/*/' as '*/', ignoring the leading slash!. So after the above '/*/*/ /*/', NS4 is now in parsing mode, while good browsers are in comment mode! Just as in the Caio hack, a normal complete comment at the end of the hack returns those good browsers to parsing mode while not affecting NS4.


.foo1 { color: red } /* Feed these styles only to NS4.... */ /*/*/ /*/ .foo2 { color: red } .foo3 { color: red } /* Okay, we can let the others back in.... */ .foo4 { color: red }


Between these two hacks, one may completely differentiate between Netscape 4 and other browsers within a single sheet. They may also be used for inline styles. When only a small number of changes are required, it's a lot easier to deal with than separate linked and @imported sheets.

Personal tools