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 a good 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 change into helpful. However they’re presently restricted to setting bodily dimension. Logical properties are nice, however they nonetheless really feel like a second-class characteristic of the language.

There are a number of 2-value shorthands which have been applied, like margin-block for setting each the -block-start and -block-endmargins. I discover these extraordinarily helpful and concise. However the current 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 presently 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, nevertheless it’s in any other case a call that has actual penalties, notably for multi-lingual websites.

Word that Miriam says that is one thing the CSS Working Group has been engaged on since 2017. And there’s somewhat momentum to select it up and do one thing about it. The very first thing you are able to do is help Miriam’s work — every little thing she does with the CSS Working Group (and it’s so much) 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 revealed in 2021. I feel it’s a strong concept. We are able to’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.

 = [ logical | physical ] or [ relative | absolute ] or ...

@mode ; /* should come after @import and earlier than any model guidelines */

@mode  {  }

selector {
  property: worth  !;
}

Maybe naming apart, it appears fairly cheap, eh?

Direct Hyperlink →