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!

Track.js Error Reporting

Recent Features

  • Serving Fonts from CDN

    For maximum performance, we all know we must put our assets on CDN (another domain).  Along with those assets are custom web fonts.  Unfortunately custom web fonts via CDN (or any cross-domain font request) don't work in Firefox or Internet Explorer (correctly so, by spec) though...

  • CSS 3D Folding Animation

    Google Plus provides loads of inspiration for front-end developers, especially when it comes to the CSS and JavaScript wonders they create. Last year I duplicated their incredible PhotoStack effect with both MooTools and pure CSS; this time I'm going to duplicate...

Incredible Demos

  • Use Elements as Background Images with -moz-element

    We all know that each browser vendor takes the liberty of implementing their own CSS and JavaScript features, and I'm thankful for that. Mozilla and WebKit have come out with some interesting proprietary CSS properties, and since we all know that cementing standards...

  • Duplicate DeSandro&#8217;s CSS Effect

    I recently stumbled upon David DeSandro's website when I saw a tweet stating that someone had stolen/hotlinked his website design and code, and he decided to do the only logical thing to retaliate:  use some simple JavaScript goodness to inject unicorns into their page....

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!

Recently on David Walsh Blog

  • OSCON Portland:  Conference  Discount!

    O'Reilly puts on the best web industry conferences in the world.  These conferences include Fluent Conference, Velocity Conference, and the upcoming OSCON in Portland, Oregon from July 20-24.  Open Source Convention (OSCON) is a conference that focuses specifically on open source developers and the tools and possibilities...

  • Follow Redirects with cURL

    I love playing around with cURL. There's something about loading websites via command line that makes me feel like some type of smug hacker, just like tweeting from command line does. I recently cURL'd the Google homepage and saw the following: I found it weird that Google...

  • Developers Have WordPress, Amateurs Have Squarespace, Professional Designers Have the NEW Webydo!

    Web design platforms have traditionally come in one of two varieties. There are the solutions like WordPress and Drupal that are incredibly powerful, but an understanding of web development and coding is required to be able to use those platforms effectively. On the other side of the...

  • Chris Coyierâs Favorite CodePen Demos II

    Hey everyone! Before we get started, I just want to say it’s damn hard to pick this few favorites on CodePen. Not because, as a co-founder of CodePen, I feel like a dad picking which kid he likes best (RUDE). But because there is just so...

  • GSAP + SVG For Power Users: Motion Along A Path

    Now that the GreenSock API is picking up steam, there are many tutorials and Getting Started guides out there to provide good introductions to the library, not to mention GreenSock’s own Forum and Documentation. This article isn’t intended for beginners, but rather a...