What Does The Smiley Face ":)" Mean in CSS

What does the smiley face :) mean in CSS?

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.

Sample Image

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

Is using the smiley (☺) in @font-face still relevant?

EDIT - Ran into some more info that may interest: https://stackoverflow.com/a/4520467/1455709

Android 2.2 devices will suffer from local() usage, your @font-face wont work at all.

I can confirm that on Android 2.3.6 (default browser) local() will break your @font-face declaration.

Android 4.0 (default browser) works fine with local().

Unsure of everything in between. So again, I think it's down to your user base, or the effort you want to go to with multiple stylesheets to ensure your font works everywhere.

Well, they are only generating the code needed to display your font on all browsers. It's your decision as to whether you want to take the "risk" as to whether the user has a font by that name installed locally.

Depends on your audience I would say.

Does anyone really install fonts onto their local machine anymore? A lot of people on this site might, designers defiantly will, but the general public? Probably not.
What's the chance that the font your using has the same name as another different font? Small.
What's the chance the user has that particular other font installed? Very small.

If you want to ensure that the user downloads and uses your particular font, use it.

If you want to use Windows fonts (you're probably not allowed) and want them visible on Macs, then you wouldn't want to use the smiley face, so as to save every Windows user from downloading a font they already have (that actually is the same).

If you want to use a custom font called 'Verdana' you will defiantly want to use a smiley face. That, or make the font-family unique... I guess with a smiley face... But that would look messy, so use the local attribute.

CSS: Bulletproof @font-face: Smiley variation

The smiley is used as the name of a font that cannot possibly exist (or is, at least, extremely unlikely) so that a local font that happens to have the same name as the desired fony will not be used

Why is there a smiley face and white space on the mobile version of my site?

For white spacing, you need to add the following css for responsive view

.js #mobile-menu{
  margin-right: 0;
  width: auto;
}

Also for bottom smiley image, you need to find and remove following code from HTML. Its came in your desktop view also. Once you removed that image your bottom spacing issue will also resolved.

https://pixel.wp.com/g.gif?host=blendbee.com&rand=0.3194744260981679&v=ext&j=1%3A3.0.2&blog=68911511&post=4473&tz=-7&ref=http%3A//stackoverflow.com/questions/24765633/why-is-there-a-smiley-face-and-white-space-on-the-mobile-version-of-my-site

CSS @font-face - what does src: local('☺') mean?

if you read the notes in font-squirrel's font-face generator, you'll see that it was a gotcha by paul irish.

Here is the excerpt from his blog post:

And.. regarding @font-face syntax

I now recommend the bulletproof smiley variation over the original bulletproof syntax.
@font-face {
  font-family: 'Graublau Web';
  src: url('GraublauWeb.eot');
  src: local('☺'),
       url('GraublauWeb.woff') format('woff'), url('GraublauWeb.ttf') format('truetype');
}
From the bulletproof post:

Yes, it's a smiley face. The OpenType spec indicates any two-byte unicode characters won't work in a font name on Mac at all, so that lessens the likelihood that someone actually released a font with such a name.

There are a few reasons why smiley is a better solution:

Webkit+Font Management software can
mess up local references, like
turning glyphs into A blocks.

On OS X, Font Management software may
alter system settings to show a
dialog when trying to access a
local() font that's accessible
outside of Library/Fonts. More detail
on my bulletproof post.
Font Explorer X is
also known to mess up other stuff in
Firefox.

Although it's unlikely, you could
reference a local() font which is
completely different than what you
think it is. (Typophile post on
different fonts, same name) At the
very least its a risk, and you're
ceding control of the type to both
the browser and host machine. This
risk may not be worth the benefit of
avoiding the font download.

These are all pretty edge case issues, but it's worth considering.

@font-face where does the 'smiley' (src: local('the_smiley_image') come from?

Found this on another question so I can past it here and here it is:

src: local("☺")

Given no other answer I will use this.

What does this symbol mean in CSS?

Universal selector *

*: What does "*" mean in CSS?

Combinators

Child >: What does the ">" (greater-than sign) CSS selector mean?
Following-sibling ~: What does the "~" (tilde/squiggle/twiddle) CSS selector mean?
Next-sibling +: What does the "+" (plus sign) CSS selector mean?
~ vs +: Difference between CSS + selector and ~ selector

Pseudo-classes

:focus, :active: What is the difference between :focus and :active?
:root: What's the difference between CSS3's :root pseudo class and html?

Attribute selectors

[att|=val], [att^=val]: What is the difference between pipe (|) and caret (^) attribute selectors?

Namespaces

Namespace separator |: What does *|* this mean in CSS?
@namespace rule: What is the use of @namespace in CSS?

Shadow DOM

/deep/ combinator, ::shadow pseudo-element: What do /deep/ and ::shadow mean in a CSS selector?

Important declarations

!important: What are the implications of using "!important" in CSS?

Hacks

*: What does a star-preceded property mean in CSS?
:): What does the smiley face ":)" mean in CSS?

What does the $ sign mean in css and how validate it?

It's just an invalid character to use in a class name, nothing more. CSS3 allows for UTF-8 bases characters in class names, with some exceptions:

~ ! @ $ % ^ & * ( ) + = , . / ' ; : " ? > < [ ] \ { } | ` #
Which characters are valid in CSS class names/selectors?

What Does The Smiley Face ":)" Mean in CSS