More logical properties
Last year I published a post on Smashing Magazine introducing Logical Properties and Values, flow-relative mappings for the physical properties and values we use on the web. For example, instead of
width you might use
inline-size, and the dimension would then be correct whether you were in a horizontal or vertical writing mode. Take a look at the article Understanding Logical Properties and Values for more detail. You could also have a look at some of the work I have been doing over at MDN to document and create guides for using Logical Properties and Values.
SInce I wrote the Smashing Magazine article browser support for these features has improved, with the majority of basic mappings supported by Firefox and Chrome. Also in the specification are some new shorthands. Using logical values means we get a property which sets both block or both inline values at once, for example
padding-inline. Both Chrome (behind a flag) and Firefox (in Nightly) have implementations of these, which you could see in the below CodePen if using one of those browsers.
Also, in Firefox Nightly, are the longhands for logical border-radius properties:
If you have Firefox Nightly, take a look at this CodePen.
These properties and values are helpful if you are developing sites for multiple writing modes but should also be useful if you are using writing modes creatively. It’s nice to see the browser implementations adding more support for the spec.