A property like
margin-left seems fairly logical, but as Manuel Rego Casasnovas says:
Imagine that you have some right-to-left (RTL) content on your website your left might be probably the physical right, so if you are usually setting
margin-left: 100pxfor some elements, you might want to replace that with
Direction, writing mode, and even flexbox all have the power to flip things around and make properties less logical and more difficult to maintain than you’d hope. Now we’ll have
margin-inline-start for that. The full list is:
Manuel gets into all the browser support details.
Rachel Andrew also explains the logic:
… these values have moved away from the underlying assumption that content on the web maps to the physical dimensions of the screen, with the first word of a sentence being top left of the box it is in. The order of lines in grid-area makes complete sense if you had never encountered the existing way that we set these values in a shorthand.
Here’s the logical properties and how they map to existing properties in a default left to right nothing-else-happening sort of way.
Direct Link to Article — Permalink
The post CSS Logical Properties appeared first on CSS-Tricks.