Is space allowed around the slash in CSS font shorthand?
Let’s say you’re writing a CSS pretty printer and you come across the /
symbol: what do you do? You add space around it. Except in font: 16px/1.2 serif;
, because no one ever seems to do it there. This leads me to think: is space around /
even allowed in the font shorthand and does it actually work?
Testing shows that 16px/2
is the same as 16px / 2
and the spacing seems to work in all major browsers (Safari 17.1, Firefox 119, Chrome 119). The spec also does not seem to mention anything around whitespace, so we’re good there too. So why do we write it like this?
I could not find any sources or style guides that dictate the use (or lack) of space of /
in shorthands, so if you do, please let me know! I guess the lack of space around the slash in the font
shorthand is just an age-old preference and not commonly applied to other places.
What does this mean for our CSS formatter? Well, I’ve grown so used to not using spaces in the font
shorthand that I’ve written a single if-statement to not add whitespace in that particular scenario. Other cases, like calc(2em / 2)
and background: no-repeat center / cover url('image.png');
still get the extra space.
Popular posts
Making Analyze CSS render 6 times faster
A deep-dive in how the Analyze CSS page renders 6 times faster by applying 2 basic principles.
CSS complexity: it's complicated
There's lots of places in CSS to have complexity, but we tend to focus on selectors most of the time. Let's have a look at other places too.