Unicode for CSS Class Names
In doing some research, I discovered that you could use Unicode for CSS class names. Okay, nothing earth shattering by any means. But think of the ideograms that exist within and how applicable they might actually be.
Take for example a common rounded corner HTML setup:
<div class="container">
<div class="left-top">
<div class="right-top">
<div class="left-bottom">
<div class="right-bottom">
content
</div>
</div>
</div>
</div>Now let's try using some fancy Unicode characters to give the same meaning:
<div class="□">
<div class="┌">
<div class="┐">
<div class="└">
<div class="┘">
content
</div>
</div>
</div>
</div>I've used a number of the box drawing entities, namely U+250C, U+2510, U+2514, U+2518 and the square is U+25A1.
Then, to mark up our styles:
.□ { /* container styles */ }
.┌ { /* top-left styles */ }
.┐ { /* top-right styles */ }
.└ { /* bottom-left styles */ }
.┘ { /* bottom-right styles */ }In any case, I'm just having fun with the idea. You're probably better off to stick to those standard letters and numbers for your class names.
Conversation
That's definitely cool, but not a good idea from an HTML perspective. Classes should be semantic and are sometimes used in that way (especially with microformats), so it's important to keep them as plain text. Nice find though.
Wow, that's really useful. ;) No seriously, nice find..
That is a very interesting technique however I do agree with Montoya that it may not actually be a good idea to use. Although you can shorten class names it only makes them harder to write and follow.
First, I don't see the needs of so many
divs. Second, both examples are semantically rubbish. Aclassoridname should always say something about the contents, not about how it will be displayed using CSS.Nonetheless, this can only be useful, like sending special characters like <samp>é</samp> or <samp>ü</samp> within the (semantic)
classoridname."A class or id name should always say something about the contents, not about how it will be displayed using CSS."
Dont you think it is the developer to decide that ?
Ha! I like it :)
Nice find. As said above; they're not easy to type and therefore not very easy to maintain, but it provides an option for throwing in some geeky humor every now and then.
Interesting approach, but the loss of semantics and the problem that at least the example is presentational anyway don't make it very commendable, I fear. There probably are just a few characters that provide some "semantics", and combined with probably desired ID/class name consistency, this may result in a real obstacle to make it "good practice" at all.
@arjan: it's a common approach to rounded corners. And what I should have added was that because the example is presentational, using special characters could help to highlight that very fact.
@Jens: there's no loss of semantics since it's a presentational example to begin with. "I'm just having fun with the idea" should've made that clear that I'm not trying to make this a de facto standard.
I think it's funny and a nice find! My main question is whether or not all the browsers can work with it.. Either way, keep it up, these are interesting things to find. We all talk about semantics this and that, but if we don't explore the non-semantic ways as well as the semantic ones we wont ever find anything new outside of the box!
</end rant>
Oh yeah?
And to all you standardistas: that's going to be the new microformat for marking-up top-level navigation for blind users — expect the draft published by tomorrow.
LOL, very nice observation! :) Regarding semantics: Adding the divs to the DOM using javascript could still be an option no matter the class names. Even if it's just for playing with, I think it solves bothe the problem of left-top vs top-left and possible translations of them in foreign languages.
I haven't tried it yet, but doesn't this mean you can use international character sets as CSS id/class names? If so, I would've thought this is very useful!
clever! I love seeing people think outside the (unicode)box.
Muha, neat!
Those are *square*-corners you're using for *rounded*-corner classes -- hardly very semantic! Shame on you. /sarcasm
@Michael Thompson: Good work on the triangle! ;)
@Tim: IDs can't use Unicode. Only class names.
@Tim McCormack: Ack! You've got me! ;)
It seems only logical that you could use unicode characters. though, it wouldn't surprise me if it wasn't supported, what surprised me is that it doesn't work for ID's, what's up with that?
oh, and just to tease and counter Arjan. I think your class names are visually very semantic ;)
How many people will ever see this? I'm glad I did, neat stuff Jonathan!
good idea !!!
An interesting use for this would be to use Unicode characters as a way to ensure you avoid conflicts within pages that may pull in multiple style sheets. Fro example, if you create widgets to be embedded on other sites, and you want to guarantee that your styles apply, you could use a class name with Unicode for your outermost container. This isn't any different than creating a very specific and unique ID, but it opens up another option.
Cool discovery Jonathan!
What will you think of next? Ha. It all looks very strange - but it's interesting nonetheless.
@Tim, just tried this style-rule:
with this HTML:
and it works just great :) In my opinion you're right, this could be very useful for certain developers using different character sets.
By the way: I've got no clue what's in my className, I just copied it from a random Japanese website :D
@Harmen Janssen: According to Google, you've just declared the Sega Corporation to be a 100 pixel red square. :-P
Brilliant! Its simple but I never thought to use Unicode characters. Thanks.
Never thought of doing that...Interesting to say the least but I doubt it would be used in production. ;-)
That's a very interesting use... quite ingenious, really.
Just the other day I was discussing zero-width space characters as function names in PHP, so you could do something that looks like ('foo'). But Unicode support for function names isn't coming to PHP 6, if then, so I guess we're stuck with conventional names ;).
Definitely a creative take on class names, but not really very semantic. Especially since class names aren't for the exclusive use of CSS. That being said, .wrapper .wrapper .wrapper .wrapper isn't really of much use to anyone either. :-)
I love the potential. This will introduce problems if you don't prep. The type="text/css" gets sent as ASCII and not Unicode. But you can fix that. Here's one way.
The problem is Javascript and working with className in some cases and I don't know how other browser( ... and IE ) will handle it in the future.
That's really freaking clever, Snook. Dang. Not that I will ever use it. But cool find. What made you even decide to try that?
@John Lascurettes: you can use escape sequences which I had have debated going into a deep discussion about but felt that I'm not really promoting the method, just highlighting something fun. In my example, I could have easily done
.\250C {}and achieved the same result.@Ben Hirsch: I was doing some research for some writing I'm doing and in verifying what the acceptable characters were (not easy to find!) I discovered that you can do Unicode. I decided to put together something quick to test the theory. :)
That's quite a creative find Jonathan. ...and the discussion here is just as entertaining as the post.
I noticed that some time ago, accidentally. I had typed class="résumé" in my markup, noticed it later and thought "what was I thinking!?", corrected it to "resume", saw that it didn't work anymore, checked the style block and noticed that I had made the same mistake there (and thus, that Unicode for class names worked).
The only use I see for this feature is to use extended latin characters, to have proper accents.
Anything beyond that and you run into mundane issues like seeing the lovely Unicode corners turn into little squares when you edit source on another computer that does not have the fonts. Imagine you work collaboratively on some files and an inexperienced team member, who does not have the fonts, mistakes the little squares for glitches and removes them, unbeknowst to the rest of the team?
Also, the other issue is simple writability and maintainability: wtf was the keyboard magical mantra to invoke those characters, again? :)
Anyway, nice find. Just, downright useless and potentially harmful in the real world…
This article should be titled "How to get yourself fired." Great find though. Wouldn't use it at work though...
On second thought, maybe it should be called "Job Security 101"...
Why is this surprising? Unicode can be used in HTML and JavaScript, why not CSS? Just remember to use the same character encoding, or you need to specify the charset in the link/style/script element.
I do NOT agree that it is not semantic, as character encoding has nothing to do with the meaning of the class name. For example, one can use non-semantic class name in Latin character, like "style01".
However, personally I won't use non-latin characters in source codes, unless if it is an language file (locale strings). Unicode can be used in Java, but I've never seen any Java program written in unicode...
@David Walsh: getting fired for using ideograms for class names seems a little extreme. Remind me never to work where you work. :)
@minghong: not all HTML attributes accept Unicode. IDs for example, can't. And they're not arguing that Unicode is unsemantic but rather that my example in particular might be.
Snook - you rock.
I think maybe someone has too much time on his hands.... ;)
But then again - if no one ever worked with weird things where would we be? I guess I'll have to try this out on some code monkey some time just to see their face....
Brilliant, useless, & intriguing. Just right for inspiring something really useful.
snook that's not bad
this is cool! and little bit funny :D I will try to use this, it is very sweet!
This is real cool, I was doing some research and I stumbled upon this.
Though the thing I can't understand is, if you can use these funny little symbols as the first character in a classname, why can't you use a regular number?
"In CSS2, identifiers (including element names, classes, and IDs in selectors) can contain only the characters [A-Za-z0-9] and ISO 10646 characters 161 and higher, plus the hyphen (-); they cannot start with a hyphen or a digit. They can also contain escaped characters and any ISO 10646 character as a numeric code (see next item)."
Anyways, I might actually try this out if it'll work with Javascript :) .addClass(â–¡)
This is sick. :)) and fun.