What the CSS?
I’m the developer behind Finch and one of my daily tasks is to work on a universal css parser — that means I deal with wild css and html code on a daily basis. This is a brief shortlist with some of the catches that made my code to fail, but turned out to be totally valid code.
.🍔
Yep — css class names can contain emoji ✨ According to the CSS Specification, it's totally fine to name your mobile menu as an actual burger.
Be aware that this fun has a side effect — the same emoji can be rendered with quite a different meaning on different devices and someone reading your code could get the wrong message.
Tip: There is a great write-up by Dillon de Voor on How to deal with emoji parsing in javascript.
.use.all.the.classes
My personal record is discovering 86 different classes attached to a single <body> tag on a fairly popular website.
Technically, there is no limit on the length of tag attributes, but because you can does not mean you should. Not only this illness has its own name, but turns out it also makes javascript selectors a lot slower.
Luckily, humans do this rarely by hand. When I hit a new record in class stacking — the code comes either from a website builder or ui framework.
.50%
By the CSS grammar specification CSS class names cannot start with a number or non ASCII characters. UNLESS they are escaped 😬
It's totally ok to write class="75%" if you define it as .\37 5\%{} in CSS. Heck, even a single ! can be a css class. Who knew?
Thanks to author of Chrome Web Scraper plugin for catching this. We work at the same co-working space and tend to have Friday css selector battles ⚔️
.âš”ï
It's 2017 and we still need to talk about charsets 😔
A charset specifies the character encoding used in a file. As CSS files are files, the same rule applies. If the encoding is not defined— what charset is used in your CSS file is just a guess. In cases where your css contains emoji and other fancy characters — your css may not render correctly.
Tip: With CSS it's simple — just add @charset "UTF-8"; in the very beginning of the css file or send it together with an Content-type: text/css; charset=utf-8 header.
This is all I have for the list now. I have struggled to parse css files 10Mb in size, or files containing 70 different media queries, but that's just plain silly and, luckily, really rare.
Have I missed something interesting?
