Help Logical Shorthands in CSS | CSS-Methods

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 upfront, with none actual effort.

However what if we need to set a number of properties without delay? That is the place shorthands like margin and padding change into helpful. However they’re at the moment 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 couple of 2-value shorthands which have been 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} dimension shorthand can’t set the inline-size, and the inset shorthand doesn’t embrace inset-block-start. Is there any technique 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 are able to do something about it. We’re at the moment able 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 can be evaluated as bodily phrases like prime, backside, left, and proper. These of us writing CSS for some time possible have the muscle reminiscence to adapt accordingly, however it’s in any other case a call that has actual penalties, notably 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 little 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 — every little thing she does with the CSS Working Group (and it’s quite a bit) is a labor of affection and depends on sponsorships, so chipping in is one technique to push issues ahead.

The opposite factor you are able to do is chime into Miriam’s proposal that she printed 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 model guidelines */

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

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

Maybe naming apart, it appears fairly cheap, eh?

Direct Hyperlink →