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

Answer 2

It looks like a CSS hack to target IE7 and earlier browsers. While this is invalid CSS and browsers should ignore it, IE7 and earlier will parse and honor this rule. Here is an example of this hack in action:

CSS

body {
    background: url(background.png);
    :)background: url(why-you-little.png);
}

IE8 (ignores the rule)

IE7 (applies the rule)

Note that it does not have to be a smiley face; BrowserHacks mentions:

Any combination of these characters:
! $ & * ( ) = % + @ , . / ` [ ] # ~ ? : < > |
[before the property name will work on] Internet Explorer ≤ 7

---

The GAH hot dog stand example is here.