Help Logical Shorthands in CSS

There’s a little bit of a blind spot when working with CSS logical properties regarding shorthands. Miriam explains:

Logical properties are an effective way to optimize our websites prematurely, with none actual effort.

However what if we wish to set a number of properties without delay? That is the place shorthands like margin and padding turn into helpful. However they’re at present restricted to setting bodily dimension. Logical properties are nice, however they nonetheless really feel like a second-class function of the language.

There are a number of 2-value shorthands which were carried out, like margin-block for setting each the -block-start and -block-endmargins. I discover these extraordinarily helpful and concise. However the present 4-value shorthands really feel caught prior to now. It’s shocking {that a} measurement shorthand can’t set the inline-size, and the inset shorthand doesn’t embody inset-block-start. Is there any approach to replace these shorthand properties in order that they can be utilized to set logical dimensions?

She ends with the cash query, whether or not we will do something about it. We’re at present ready of getting to decide on between supporting flow-relative phrases like block-start and inline-start with longhand properties and the ergonomic advantages of writing shorthand properties which are evaluated as bodily phrases like prime, backside, left, and proper. These of us writing CSS for some time probably have the muscle reminiscence to adapt accordingly, but it surely’s in any other case a choice that has actual penalties, significantly for multi-lingual websites.

Be aware that Miriam says that is one thing the CSS Working Group has been engaged on since 2017. And there’s a bit momentum to select it up and do one thing about it. The very first thing you are able to do is assist Miriam’s work — all the pieces she does with the CSS Working Group (and it’s lots) is a labor of affection and depends on sponsorships, so chipping in is one approach to push issues ahead.

The opposite factor you are able to do is chime into Miriam’s proposal that she revealed in 2021. I believe it’s a stable thought. We will’t merely swap from bodily to flow-relative phrases in shorthand properties with out triggering compatibility points, so having some form of higher-level instruction for CSS on the prime of the stylesheet, maybe as an at-rule that specifies which “mode” we’re in.

<coordinate-mode> = [ logical | physical ] or [ relative | absolute ] or ...

@mode <coordinate-mode>; /* should come after @import and earlier than any type guidelines */

@mode <coordinate-mode> { <stylesheet> }

selector {
  property: worth  !<coordinate-mode>;
}

Maybe naming apart, it appears fairly cheap, eh?

---

Help Logical Shorthands in CSS initially revealed on CSS-Methods, which is a part of the DigitalOcean household. It’s best to get the publication.