UTF-8 characters and emojis in CSS as classes and IDs
Yes, we can use UTF-8 characters as class and ID names, but it will also increase CSS file sizes.
By. Jacob
Edited: 2021-03-11 23:52
Raw UTF-8 characters (even emojis) is allowed and valid in CSS classes and IDs; I just had some fun testing this out myself—and it worked!
This is a fun and cool way to show off your coding skills; or just a way to further obscure your HTML and CSS—you do probably not want to use it for anything else, since it tends to require copying and pasting of the individual emoji characters.
All we have to do in order to use raw UTF-8 characters, is to deliver the CSS file with the UTF-8 charset; this can be done by sending the Content-Type header:
content-type: text/css; charset=utf-8
Below is a fun example:
<style>
.💩 {background:brown;width:5rem;height:3.5rem;}
</style>
<div class="💩">Poop 💩</div>
This would result in something like:
UTF-8 takes more space than ISO 8859-1
Since UTF-8 characters (not the encoding itself) takes up more space than basic latin characters, we might not want to use it for our CSS when file-size is of concern. We can still use latin characters in a UTF-8 encoded file without effecting file-size—we should just avoid using the characters that take up more space.
At first, this might seem like a good way to limit your CSS file size even further, after all, a single character is better than two characters—at least on paper. However, some emoji's actually take up double the space. A latin character like "a" only takes up one byte, while an emoji like "😁" takes up two bytes. This means you will effectively be doubling the size.
For example 4 x a takes up 4 bytes, while 4 x 😁 takes up 8 bytes; for this reason, you may want to avoid using UTF-8 emojis in your CSS files.
When minimizing CSS files, the goal is make the files smaller—not to make them larger!
I still find the idea of including emojis in my CSS entertaining; in fact, I even tested out using the zero width space in my CSS, and interestingly it actually worked, This means you can create CSS that is practically unreadable without first converting the invisible characters.
Using the UTF-8 character set
In order for this to work, both the CSS file and the server needs to be configured to use the UTF-8 character set.
You can change the file-encoding from your editor, such as Visual Studio Code, kate, Eclipse, and many other source code editors.
To make sure that your server is delivering your CSS file with the UTF-8 character set, you can open up developer tools in your browser (CTRL + SHIFT + I) and examine the response headers on the CSS file in the network tab.
If you are using Apache, you change the content type of JavaScript, HTML, and CSS files by adding the following to your website's configuration file:
AddCharset utf-8 .html .js .css
Tell us what you think: