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,
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.
Before logical properties, it was common to have a preprocessor generate ‘flipped’ versions of all our stylesheets. This is an essential feature for some sites, but these days it’s a good default for everyone. Modern browsers and extensions will often translate our sites automatically. Logical properties are a great way to optimize our sites in advance, without much 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 without shorthand options
they still feel like a second-class
feature of the language.
There are a few 2-value shorthands –
like margin-block for setting both
the -block-start and -block-end margins –
which are currently logical-only.
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?
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!
There are several proposals, but one major road block
We’re trying to make progress on shorthand syntax for CSS logical properties. But the path forward depends on where we hope to be a decade from now.
It’s not just a shorthand for anchor()
position-area might be my favorite part of the CSS Anchor Positioning spec, with a ton of features packed in to make things just… work. But there’s no magic here, just a few key parts that work well.
Are we responding to the right inputs?
For many years, it has been ‘best practice’ to use relative units (especially em and rem) for sizing text. That’s great! But after playing around with my user preferences, I think we can improve on the common approaches.