321

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?

Salman A
  • 229,425
  • 77
  • 398
  • 489
Mark
  • 3,321
  • 2
  • 25
  • 49
  • 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 '14 at 09:57
  • 2
    @stijn still might be some odd vendor specific code... – Mark Aug 22 '14 at 10:01
  • 22
    @series0ne I take it you've never seen the Internet Explorer asterisk hack. – Etheryte Aug 22 '14 at 10:06
  • 1
    @series0ne: This looks like a parser hack. Parse errors are usually unintentional. Usually. – BoltClock Aug 22 '14 at 10:40
  • 11
    If this is indeed a browser hack, you'll want to add a comment in the CSS file explaining this. – user247702 Aug 22 '14 at 11:02
  • “I'd like to meet the vendor that thinks it's acceptable to break free from W3C guidelines and conventions surrounding CSS.” That is backwards. The W3C documents what vendors do, after the fact. If this smiley face had a purpose and the browser vendors were all using it, W3C would add it to standard CSS. – Simon White Aug 22 '14 at 11:05
  • 1
    @series0ne Have you ever [validated Bootstrap](http://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Fmaxcdn.bootstrapcdn.com%2Fbootstrap%2F3.2.0%2Fcss%2Fbootstrap.min.css&profile=css3&usermedium=all&warning=1&vextwarning=&lang=en)? You can meet the vendor at Twitter's HQ. – Ben Aug 22 '14 at 14:37
  • 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 '14 at 22:42
  • happened to me more than once, thats what i thought aswell. – b1nary Sep 16 '14 at 11:00

2 Answers2

279

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

revo
  • 43,830
  • 14
  • 67
  • 109
  • 2
    i knew about "_" and "*" before the selector, but not this one you said. – valerio0999 Aug 22 '14 at 10:14
  • 2
    @vlrprbttst Those are conventional characters used for the ease. However it concludes all non-alphanumeric values. – revo Aug 22 '14 at 10:40
  • 1
    I am marking this answer as correct though salman-a was also correct but a tiny bit slower. I was aware of this hack but always used a "*". The one who did this page is a joker ;). – Mark Aug 22 '14 at 11:13
  • @tinytiger: I was the first to answer, actually. The screenshots took time though. – Salman A Aug 22 '14 at 14:02
  • @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 '14 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 '14 at 15:46
  • @Max You can, indeed, do that. It's not a good idea, obviously. Using a smiley is not great either IMO. Modern browsers treat those characters as invalid, IE7 tries to ignore them and render anyway. It's about abusing a strange feature of IE7 rather than something to do with modern browsers. – Gray Aug 25 '14 at 14:06
  • 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 '14 at 13:39
  • 1
    since it targeted IE7 it should be :( instead of :) – Jaguar Aug 27 '14 at 09:26
  • @AlienDev, you've made two contradictory statements. "you should...give the best experience in all browsers that your user base is using" and "...IMO, you shouldn't support browsers that the company... doesn't support anymore." Just because they aren't supported doesn't mean your user base isn't using them. – Yes I use MUMPS Aug 27 '14 at 13:52
  • http://forooma.com/test.html link appears to refer to a domain that no longer exists. That, or my ISP is blocking access to it. – jpmc26 Jan 02 '17 at 12:46
171

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.

Community
  • 1
  • 1
Salman A
  • 229,425
  • 77
  • 398
  • 489
  • 62
    GAH Hot dog stand flashback – Mike G Aug 22 '14 at 13:05
  • 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) – Flip Vernooij Aug 22 '14 at 14:30
  • 39
    All sites should use a hot dog stand theme for all – Pete TNT Aug 22 '14 at 16:51
  • 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 '14 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. – Flip Vernooij Aug 22 '14 at 19:00