A Practical Application for Pure-CSS Icons: Emoticons

13 September 2010

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:

Check it out

Without further ado, we proudly present the CSS Emoticons jQuery plugin

About the author:

Steve Schwartz // Owner of Alfa Jango, CTO of Genomenon, co-founder of Carcode (acquired by Edmunds.com in 2014), engineer, developer, open-source enthusiast, guitarist, and racecar driverist.

Comments are loading...

We're Hiring!