322

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?

8
  • 17
    Looks like a typo to me. The developer trying to be fun, or maybe a way for him to mark areas of the code that he or she will look for?
    – Lee
    Aug 22, 2014 at 9:57
  • 2
    @stijn still might be some odd vendor specific code...
    – Mark
    Aug 22, 2014 at 10:01
  • 22
    @series0ne I take it you've never seen the Internet Explorer asterisk hack.
    – Etheryte
    Aug 22, 2014 at 10:06
  • 12
    If this is indeed a browser hack, you'll want to add a comment in the CSS file explaining this.
    – user247702
    Aug 22, 2014 at 11:02
  • 32
    My guess: Code author typed :) thinking the focus was on the IM client. When it wasn't they clicked into the IM client and proceeded from there, never realizing they'd typed a smiley in the last place their cursor was sitting, which was the CSS file.
    – Nathan
    Aug 22, 2014 at 22:42

2 Answers 2

280

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.

enter image description here

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

8
  • 2
    i knew about "_" and "*" before the selector, but not this one you said. Aug 22, 2014 at 10:14
  • 2
    @vlrprbttst Those are conventional characters used for the ease. However it concludes all non-alphanumeric values.
    – revo
    Aug 22, 2014 at 10:40
  • @revo * and _ are not just conventional, the IE CSS parsers change from version to version and you can use different similar hacks to target different versions of IE. I think those are just the most generic for "all IE". (we use a different method of targeting IEs, and have never needed the hacks, so I don't have the specifics memorized)
    – Izkata
    Aug 22, 2014 at 17:04
  • 1
    I may be stupid enough to miss something here, but why can he do it using 2 characters? It says "add a non-alphanumeric", not "add one or more...". Or does the : mean something else? Otherwise, can't I put *********************font-size: "150%";, etc.?
    – Max
    Aug 23, 2014 at 15:46
  • 1
    Just to throw an extra part to this answer. The answer is great and correct, but missing this the fact that this is not best practice. As a general rule, you should do your best to give the best experience in all browsers that your user base is using. Not to mention, in my opinion, you shouldn't support browsers that the company that made them don't support anymore.
    – AlienDev
    Aug 26, 2014 at 13:39
172

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)

Example 1 - IE8

IE7 (applies the rule)

Example 1 - IE7

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.

3
  • Yeah, from IE8 and upward IE considers itself to be CSS compliant and is bit by bit breaking all their IE specific css fixes. (so hence we need to resort to javascript solutions) Aug 22, 2014 at 14:30
  • 6
    @ikkuh To be fair, IE11 is a fairly decent and compliant browser. There's a reason they dropped support for IE conditional comments in it.
    – ajp15243
    Aug 22, 2014 at 18:49
  • 2
    @apj15243 Yeah they have come a long way and hope they will keep on going, truth is that I still need conditional support for it, and that is not only IE11, but also 10,9 and 8. So let's wish for an auto-update as well, there is no reason to not run IE11 on XP other than commercial reasons. But thats a different discussion. Aug 22, 2014 at 19:00

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.