Let’s get logical
I was refactoring some CSS on The Session over the weekend. I thought it would be good to switch over to using logical properties exclusively. I did this partly to make the site more easily translatable into languages with different writing modes, but mostly as an exercise to help train me in thinking with logical properties by default.
All in all, it went pretty smoothly. You can kick the tyres by opening up dev tools on The Session and adding a
writing-mode declaration to the
For the most part, the switchover was smooth. It mostly involved swapping out property names with
border-radius properties tripped me up a little. You have to use shorthand like
border-block-start-inline-end-radius (that doesn’t exist). So you have to keep the order of the properties in mind:
Speaking of shorthand, I also had to kiss some shorthand declarations goodbye. Let’s say I use this shorthand for something like
margin: 1em 1.5em 2em 0.5em;
Those values get applied to
margin-left, not the logical equivalents (
inline-start). So separate declarations are needed instead:
Same goes for shorthand like this:
margin: 1em 2em;
That needs to be written as two declarations:
Now I’ve said it before and I’ll say it again: it feels really weird that you can’t use logical properties in media queries. Although as I said:
Now you could rightly argue that in this instance we’re talking about the physical dimensions of the viewport. So maybe width and height make more sense than inline and block.
But along comes the new kid on the block (or inline), container queries, ready to roll with
container-type values like
inline-size. I hope it’s just a matter of time until we can use logical properties in all our conditional queries.
The other place where there’s still a cognitive mismatch is in transforms and animations. We’ve got a
translateX() function but no
translate-inline(). We’ve got
translateY() but no
Oh, and one other thing: the
aspect-ratio property takes values in the form of
inline/block. That makes sense if you’re dealing with images, videos, or other embedded content but it makes it really tricky to use
aspect-ratio on elements that contain text. I mean, it works fine as long as the text is in a language using a top-to-bottom writing mode, but not for any other languages.