Unicode CSS Classes
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!
![Convert XML to JSON with JavaScript]()
If you follow me on Twitter, you know that I've been working on a super top secret mobile application using Appcelerator Titanium. The experience has been great: using JavaScript to create easy to write, easy to test, native mobile apps has been fun. My...
![9 More Mind-Blowing WebGL Demos]()
With Firefox OS, asm.js, and the push for browser performance improvements, canvas and WebGL technologies are opening a world of possibilities. I featured 9 Mind-Blowing Canvas Demos and then took it up a level with 9 Mind-Blowing WebGL Demos, but I want to outdo...
![jQuery Random Link Color Animations]()
We all know that we can set a link's :hover color, but what if we want to add a bit more dynamism and flair? jQuery allows you to not only animate to a specified color, but also allows you to animate to a random color.
The...
![9 Mind-Blowing Canvas Demos]()
The <canvas> element has been a revelation for the visual experts among our ranks. Canvas provides the means for incredible and efficient animations with the added bonus of no Flash; these developers can flash their awesome JavaScript skills instead. Here are nine unbelievable canvas demos that...
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.
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?
Works for me on Mac / current Chrome.
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…
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
FYI your HTML comments in the samples are malformed. “!” is missing.
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
How to type these unicode characters?
FYI this has been added to the css-modules project (https://github.com/css-modules/css-modules/issues/119). While it’s not recommended to use unicode characters for development, it seems like a useful way to minify and obfuscate class names for production builds if you’re looking to save a few bytes.
On a tangent, I usually don’t like to put special characters in my HTML but instead use HTML entities. I feel like text editors choke sometimes and/or encoding gets messed up sometimes when viewing. Is this just my paranoid dev side trying to be tidy or is this a real problem?