What does the smiley face ":)" mean in CSS?

Question

I spotted this CSS code in a project:

html, body { :)width: 640px;}

I have been around with CSS for a long time now but I never saw this ":)" code before. Does it mean anything or is it just a typo?

Answer 1

From an article at javascriptkit.com, that's applied for IE 7 and earlier versions:

if you add a non-alphanumeric character such as an asterisk (*) immediately before a property name, the property will be applied in IE and not in other browsers.

Also there's a hack for <= IE 8:

div {
  color: blue;      /* All browsers */
  color: purple\9;  /* IE8 and earlier */
 *color: pink;      /* IE7 and earlier */
}

However that's not a good idea, they don't validate. You always feel free to work with Conditional comments for targeting specific versions of IE:

<!--[if lte IE 8]><link rel="stylesheet" href="ie-8.css"><![endif]-->
<!--[if lte IE 7]><link rel="stylesheet" href="ie-7.css"><![endif]-->
<!--[if lte IE 6]><link rel="stylesheet" href="ie-6.css"><![endif]-->

But for those wanna see the hack in real, please open up this page in the latest version of IE you have. Then go to developer mode by doing a F12. In Emulation section (ctrl+8) change document mode to 7 and see what happens.

The property used in the page is :)font-size: 50px;.