Michelle Barker with my favourite sorta weblog submit: brief, sensible, and leaves you with a helpful nugget to your time. Right here, she will get into logical property shorthands in CSS, significantly those who set lengths simply on a single axis, say solely the block (vertical) axis or simply the inline (horizontal) axis.
I say “block” and ”inline” as a result of, so far as logical properties are involved, the x-axis might simply as nicely behave like a vertical axis relying on the present writing-mode.
So, the place we’ve at all times had padding, margin, and border shorthands that may help a multi-value syntax, none of them permit us to declare lengths on a particular axis with out additionally setting a size on the opposite axis.
For instance:
/* This provides us margin on the inline axis */
margin: 0 3rem;
…however we needed to set the opposite axis with the intention to get there. With logical properties, nonetheless, we now have further shorthands for every axis which means we are able to cue up the margin-inline shorthand to work particularly on the inline axis:
margin-inline: 3rem;
Michelle mentions my favourite logical property shorthand in passing. What number of occasions do you place one thing to this kind of tune:
.position-me {
place: absolute;
high: 0;
proper: 0;
backside: 0;
left: 0;
}
We are able to get these 4 strains into in with inset: 0. Or we might goal the block and inline axis straight with inset-block and inset-inline, respectively.
Whereas we’re speaking shorthands, I at all times prefer to put a phrase of warning about ”unintended” CSS resets. Simply one of many frequent CSS errors I make.
To Shared Hyperlink — Permalink on CSS-Methods
Logical Properties for Helpful Shorthands initially printed on CSS-Methods. It is best to get the publication.
Subscribe to MarketingSolution.
Receive web development discounts & web design tutorials.
Now! Lets GROW Together!