A Practical Application for Pure-CSS Icons: Emoticons

CSS3 is great and there is no shortage of amazing showcases highlighting what you can do with a little CSS3 and a lot of time. One popular theme for showing off the capabilities of CSS3 has been creating pure-CSS icons that you'd swear are images (like these or these).

Why other pure-CSS icons are not practical

Complex pure-CSS icons are not practical for use in production websites. They are difficult to maintain and are often only possible with an un-semantic mess of markup. Not to mention, we already have the perfect tool for graphic representations: images. (For more on this, see Faruk Ateş's post on the subject.)

Why pure-CSS emoticons ARE practical

Think about it, the great thing about emoticons is that they are textual representations that are inherently and immediately recognizable as faces expressing the emotions they represent.

Traditionally, if you wanted to display emoticons graphically on a web page, you used a script (typically javascript) to find and replace text-emoticons with small smiley-faced images that correspond to each emoticon. But if textual emoticons already resemble these faces, isn't it overkill to completely replace them with images that resemble these faces just slightly more?

Further, inserting images now breaks the ability for visitors to copy and paste the text elsewhere. Well, technically they can still copy and paste, but it completely skips the emoticon images, instead of allowing them to simply copy the original text as written. I.e. The following text:

gets copied and pasted as this:

That makes sense  I'll update the post.

Notice, the smiley is omitted, potentially altering the context of the original text.

UPDATE: Many browsers will copy the alt attribute text of the image if it is set properly. However, webkit-based browsers, such as Safari and Chrome, do not do this. Thanks for the tip, Faruk Ateş (via email).

Enter our new jQuery plugin / stylesheet. It keeps the text emoticons completely intact, and just gives them a little anthropomorphic nudge with CSS. Now, using pure-CSS emoticons, this:

gets copied and pasted as this:

That makes sense :-) I'll update the post. 

Benefits of pure-CSS emoticons

There are several reasons to use pure-CSS emoticons over the traditional image-replacement method:

• Keeps text markup semantic (plugin only wraps textual emoticons in a single `<span>` element).
• Retains original text, as typed, for copy/paste and page indexing.
• Automatically sizes to fit the text. No need for multiple emoticon image sets of varying sizes.
• Does not break the line-height of paragraphs like most of the image-replacement methods.

Check it out

---