Support Logical Shorthands in CSS
Can we get this process unstuck?
The CSS Working Group recently resolved to add a size shorthand for setting both the width and height of an element. Many people asked about using it to set the ‘logical’ inline-size and block-size properties instead. But ‘logical shorthands’ have been stalled in the working group for years. Can we get them unstuck?
CSS began to add
logical properties and values
in 2017-2018,
allowing us to replace
static physical terms like top and bottom
with flow-relative terms like inline-start or block-end.
The longhand properties are likely familiar by now –
from padding-inline-start to inline-size and block-size.
There are a few situations where physical values make sense. If we’re applying drop shadows on a multi-language page, we don’t need each language to have its own light source casting shadows in different directions. But the majority of web design starts from the flow of text – and it’s helpful to define styles that will adapt when that flow changes:
See the Pen Logical properties form direction by @miriamsuzanne on CodePen.
This is an essential feature for multi-lingual sites. Before logical properties, it was common to have a preprocessor generate ‘flipped’ versions of all our stylesheets. But these days it’s also useful for sites without any built-in translation at all. Many modern browsers and plugins will translate our sites automatically. Logical properties are a great way to optimize our sites in advance, without any real effort.
But what if we want to set
multiple properties at once?
This is where shorthands
like margin and padding become useful.
But they are currently limited
to setting physical dimension.
Logical properties are great,
but they still feel like a second-class
feature of the language.
There are a few 2-value shorthands
that have been implemented,
like margin-block for setting both
the -block-start and -block-end margins.
I find those extremely useful and concise.
But the existing 4-value shorthands feel stuck in the past.
It’s surprising that a size shorthand
can’t set the inline-size,
and the inset shorthand doesn’t include inset-block-start.
Is there any way to update those shorthand properties
so that they can be used to set logical dimensions?
- A GitHub issue has been open since 2017, to discuss the problem.
- In 2021, Elika Etimad, Jen Simmons, and I proposed a multi-step path forward, to progressively move towards logical properties as a simple default in CSS.
- Every year at TPAC, the Internationalization Working Group asks us to make progress and provide updates.
- Every year we disappoint them.
The current situation is that we have several viable paths forward, but someone has to do the research about which and how many properties and values will be impacted by our choice.
I would love to do that work, but none of the browsers seem interested in funding it. I don’t think this is a big-budget project, but it still takes time and resources to get something like this over the finish line.
Are you (or your company) interested in logical shorthands? Are you willing to chip in to help move things forward? We’ve added a donation option to our Open Collective, allowing you to support this feature specifically.
Support our work on logical shorthands in CSS
Thanks in advance! As we start on this, I’ll post more about the possible solutions and their tradeoffs. Subscribe to our newsletter so you don’t miss out!