Notes on Using Logical Properties and Values
- Published on:
- Logical CSS, CSS 37, Notes
- Current music:
- The Album Leaf — Eastern Glow
- Current drink:
- Yunnan Tea
Adam Argyle asked today:
is it time to forget about physical properties like margin-top and left?
I have some thoughts occasionally on this, and decided to write them down as a list: maybe I’ll update it later with other related things, we’ll see. At the bottom of this post, I’ll also list several useful resources — don’t forget to check them out!
If you’re new to logical properties and values in CSS, it might be overwhelming to start using them: so much to learn! I will suggest starting slow, do not attempt to learn everything at the same time.
For myself, I found the best way to get used to how logical keywords work was to first start using only logical shorthands:
padding-inlineand so on. They’re tremendously useful on their own! Through the years, I often wanted to have these kinds of shortcuts like
margin-x, and these logical shortcuts fulfil this. By starting using them, you will cover some of your use cases, and will get used to differentiating
inlinedirections as a muscle memory, without thinking.
One way to think of the
inlinedirections would be to imagine two lists: one where all elements have
display: block, and another where all elements have
display: inline. By default, block elements go vertically, and inline go horizontally — the same way the logical directions work as well.
After starting to distinguish between the block and inline directions, understanding
endshould be, hopefully, much easier! When looking at these keywords, the only thing we need to think about is the positions of the elements or content inside of them: what goes earlier, what goes later? The axis will be handles by
inline, and I found that separating the parts in this way helps a lot.
While I’m mentioning trying different properties separately and getting to learn them slowly, I won’t recommend learning them this way in production. Very often, logical keywords should be all-or-nothing: by mixing them, it might be possible to break things in unexpected ways. It is always a good idea to test how things will actually work by flipping the
writing-mode, and seeing what happens. It is easy to make content inaccessible when you expect things to align: when one element flips its direction, and another does not — like when positioning something absolutely.
Speaking of absolute positioning: after margins, paddings, and borders it might be time to look at more “complex” (in terms of naming) properties:
inset-group of properties as a logical alternative for
-sizegroup of properties as an alternative for
insetthe shorthands are very handy: the
insetitself, with the
inset:0being the staple in a lot of CSS I write, and the
inset-inlinejoining the other directional shorthands that make it easier to learn the directions.
inline-size, and their
max-variations, on the other hand, do not bring any new capabilities, but it is important to learn them when you need to match them with other logical properties.
The names of some logical properties might be rather frightening:
border-start-end-radius, what? The way to remember which is which in this case is to remember how the two-value shorthands for
paddingwork (even though they’re physical): the first value in such shorthand is for the vertical direction, and the second is for the horizontal. If those were logical, with the default mapping of vertical – block and horizontal – inline, then for
border-radiuslogical properties it is the same: the first keyword is for the block direction, the second is for the inline! So, in
startis in the block direction, and
endis in the inline one.
On the other hand, some other cases, especially when only the values are involved, are easier:
text-align: endare simple to remember.
We need to always check out the support of the keywords we’d want to try using with logical values. While the basic margins and paddings are well-supported, other properties could either be just arriving to the browsers (
clearare supported in Chrome only from October 2023), or not well-supported (
overflow-inlineare available only for Firefox at the moment of writing this article). It is better to always check for the support yourself, and, if you have to support older browsers, provide fallbacks.
While it might be a good idea to approach CSS with logical keywords first, there are cases where we could want to use physical properties and values. For example, when we want to match something with the positions on an image, which won’t change based on the writing mode. And not everything is yet available in logical forms: transforms, backgrounds, some other cases — when there is a need to match our styles with the physical-only cases, sometimes there is no other choice than to use the physical properties and values alongside, to not create a mismatch.
However, as it is often with CSS, there are workarounds, like when using a
:dir()pseudo-class (warning: started being available in Chromium-based browsers only from December 2023) and overriding things that are physical-only based on the direction.
Final thing: the above are just my thoughts on this, and I’m far from being an expert on this topic! There are many other resources and people who are much more familiar with it, and with other writing systems, who could provide more insights. I highly recommend checking out the following links (starting from references, and then listed in published order).
- “CSS Logical Properties and Values Level 1” specification.
- “CSS logical properties and values” — MDN page containing a list of most logical properties and values.
- “CSS Logical Properties” by Adrian Roselli
- “CSS for internationalisation” by Chen Hui Jing.
- “Digging Into CSS Logical Properties” by Ahmad Shadeed.
- “Logical Properties for Useful Shorthands” by Michelle Barker.
- “Let’s get logical” by Jeremy Keith
- “A long-term plan for logical properties?” by Miriam Suzanne
If you’ll have any thoughts, corrections or additions — please let me know!