O'Reilly

Unicode CSS Classes

By on  

CSS class name structure and consistency is really important; some developers camelcase classnames, others use dashes, and others use underscores.  One thing I've learned when toying around by HTML and CSS class names is that you can actually use unicode symbols and icons as classnames.  Check this out!

The HTML and CSS

There's only one way to add a classname with HTML so you'll do it that way, of course:

<!-- place this within the document head -->
<meta charset="UTF-8" />

<!-- error message -->
<div class="ಠ_ಠ">You do not have access to this page.</div>

<!-- success message -->
<div class="❤">Your changes have been saved successfully!</div>

...and there's only one way to declare styles for a given class:

.ಠ_ಠ {
	border: 1px solid #f00;
	background: pink;
}

.❤ {
	background: lightgreen;
	border: 1px solid green;
}

Wild that you can use unicode classnames for elements, right?  Of course I don't recommend doing so, but you can if you'd like to!

Treehouse Learning

Upcoming Events

Recent Features

  • Animated 3D Flipping Menu with CSS

    CSS animations aren't just for basic fades or sliding elements anymore -- CSS animations are capable of much more.  I've showed you how you can create an exploding logo (applied with JavaScript, but all animation is CSS), an animated Photo Stack, a sweet...

  • Introducing MooTools Templated

    One major problem with creating UI components with the MooTools JavaScript framework is that there isn't a great way of allowing customization of template and ease of node creation. As of today, there are two ways of creating: new Element Madness The first way to create UI-driven...

Incredible Demos

  • MooTools 1.2 Tooltips: Customize Your Tips

    I've never met a person that is "ehhhh" about XHTML/javascript tooltips; people seem to love them or hate them. I'm on the love side of things. Tooltips give you a bit more information about something than just the element itself (usually...

  • Create a Clearable TextBox with the Dojo Toolkit

    Usability is a key feature when creating user interfaces;  it's all in the details.  I was recently using my iPhone and it dawned on my how awesome the "x" icon is in its input elements.  No holding the delete key down.  No pressing it a...

Discussion

  1. David, this is awesome :). Could you please highlight the cons of using this and why you wouldn’t recommend it?

    • I think the main issue would be that they would be more difficult to maintain due to not everyone knowing the shortcuts to type ❤ for example. Plus support may be patchy in earlier browsers.

  2. Simon

    To my big suprise while heart-shaped-symbol class is styled properly (and displayed properly as heart-shaped-symbol in the console), heart-shaped-symbol is not rendered properly in div content on Chrome 26, encoding utf-8.

    It’s especially weird when I’m looking at this page, as I see as heart-shaped-symbol, and class definition .❤ is rendered as empty square.

    Any idea what this is happening?

  3. MaxArt

    Actually I knew about this possibility when I had to deal with a   in a class name (yes, the empty space). This is totally awesome but, unfortunately, not professional looking at all :)

    I may change my mind on the last part, though…

  4. Mathias Bynens has written about this some time ago, check it out: http://mathiasbynens.be/notes/html5-id-class He also wrote about how to escape these characters in CSS: http://mathiasbynens.be/notes/css-escapes

  5. Steve

    FYI your HTML comments in the samples are malformed. “!” is missing.

  6. I’ve done a lot of testing of Unicode support across browsers, and there’s a massive amount of variation.
    The results are all available at unicode.johnholtripley.co.uk

  7. Aniket

    How to type these unicode characters?

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!