Need front-end help but don't need a full-time employee? I now offer subscription front-end engineering. Ship faster and build better systems. Pause or cancel any time.
Today, I wanted to talk about CSS logical properties, a newer (and arguably better) way to define properties that are directional in nature.
Let's dig in!
The *-top, *-bottom, *-left, and *-right properties
A lot of CSS properties—things like margin, padding, border and more—have directional variants.
Take the margin property, for example. Let's say you wanted a margin of 1em on the top and bottom, 2em on the left and right.
The long-form version of that would look like this…
.component { margin-top: 1em; margin-bottom: 1em; margin-left: 2em; margin-right: 2em; }
And CSS provides a nice shorthand syntax that let's you author that with just the margin property, following a top, right, bottom, left clockwise order.
.component { margin: 1em 2em 1em 2em; }
With the shorthand, if a value is omitted, it copies the value opposite it. As a result, you can further shorten it like this.
.component { margin: 1em 2em; }
These work great when your code is always used in a language that follows the same text flow.
But not all languages are!
How do you handle RTL and vertical languages?
English, my native language, is written left-to-right and top-to-bottom.
But a language like Arabic is written right-to-left. Languages like Chinese and Japanese are traditionally written in vertical columns.
If I applied a directional margin to just one side, like this…
.component:first-child { margin-left: 0; }
… where is the margin removed from? It depends on the language!
In English, the margin is removed from the start of the first element. In Arabic, it would be removed after the first element, which could produce some unexpected visual effects.
In traditional Chinese, it would be removed from between two of the columns (a bit like removing bottom margin on a paragraph).
Historically, you've needed to check for the [dir] attribute to handle stuff like this if you wanted to support various languages…
[dir="ltr"] .component:first-child { margin-left: 0; } [dir="rtl"] .component:first-child { margin-right: 0; }
Super annoying, right? But now, we have CSS logical properties!
CSS Logical Properties
CSS logical properties define property values not be explicit directions like top or left, but by their logical direction: inline or block, and start or end.
-
*-inline properties follow the direction of the text (left and right for English) -
*-block properties intersect it (top and bottom for English) -
*-start properties apply before the element (top or left for English) -
*-end properties apply after the element (right or bottom for English)
Take our example from earlier…
.component { margin-top: 1em; margin-bottom: 1em; margin-left: 2em; margin-right: 2em; }
This could be rewritten with logical properties like this…
.component { margin-block-start: 1em; /* top */ margin-block-end: 1em; /* bottom */ margin-inline-start: 2em; /* left */ margin-inline-end: 2em; /* right */ }
The *-block and *-inline properties also have shorthand versions that follow a {start} {end} convention…
.component { margin-block: 1em 1em; margin-inline: 2em 2em; }
And just like old-school properties, can be further simplified if both values are the same…
.component { margin-block: 1em; margin-inline: 2em; }
A practical example
Remember our previous example where we removed margin from the :first-child element?
[dir="ltr"] .component:first-child { margin-left: 0; } [dir="rtl"] .component:first-child { margin-right: 0; }
With CSS logical properties, we can instead write it like this…
.component:first-child { margin-inline-start: 0; }
Now, regardless of the text direction the margin is applied (or in this case removed) from the correct location!
Learn more about subscription front-end engineering. Ship faster and build better systems.
Cheers,
Chris
Want to share this with others or read it later? View it in a browser.
0 Komentar untuk "[Go Make Things] CSS logical properties"