CSS Content special character : Hex vs normal character

Question

Example 'BLACK STAR' ★ (U+2605)

.a:after {
   content: "\2605";
   position:absolute;
}

.b:after {
   content: "★";
   position:absolute;
}

Demo : http://jsfiddle.net/l2aelba/vBjxX/

Why someone/most recommended to use HEX like \2605 in CSS value ? Both get a same result.

Answer 1

It is always better to use the actual values instead of hard-coding special characters like your bottom example as there's a possibility they won't show up correctly due to the encoding of the CSS file itself.

Answer 2

You don't need to remember ridiculous keyboard shortcuts to add a unicode number, for one.

Remember, this hexadecimal number represents a distinct and standardised character in unicode. Inserting the actual character leaves you at the mercy of the character-set, and indeed the font, being used to display the css.

More significantly, many icon fonts, Font Awesome being a good example, are mapped to use one of the Private Use Areas of Unicode. Font Awesome characters are within the first Private Use Area.

By it's definition in the standard, there are no standardised characters within the Private Use Areas. This means that there is no character to display, so the only tangible representation in a stylesheet is a numerical reference to it's place in unicode.

Why are these icons mapped so far out? A big reason is that some screen readers will read out any characters used in css content. This may seem wrong, but it does happen, and it needs to be defended against. Private Use Area characters will not be read out.

Personally, my approach is to use keyboard characters as they are, and use unicode numbers for everything else. Even still, if a Chinese person wants to use my code, do I know that they have easy access to all the same characters on their own keyboard? They will have numbers though.