CSS Logical Properties - Web Platform Feature of the Week
Unveiling CSS logical properties for a more inclusive, streamlined web development experience!
Left. Right. Top. Bottom. Width. Height.
Those are probably all familiar to you, but perhaps you never referred to them using a collective name. Well, those are referred to as physical properties, are what CSS was originally designed with, and are well-known by all web developers.
However, they have some shortcomings.
If nothing else, the web is known for its diversity. Diversity of people and opinions, but also, locations, languages, devices, viewport sizes, and a slew of other variables. With the incredible reach we enjoy, web reach, if you will, comes all these challenges, but also opportunities.
When we consider writing modes, there are left-to-right (LTR - English, Italian) and right-to-left (RTL - Hebrew, Arabic). But if you dig a little more, it is really horizontal LTR and RTL. If one considers Chinese, Japanese, and Korean, then they introduce a vertical writing mode where each new line is added to the left. Mongolian is also vertical, but new lines are added to the right. You could say these writing modes are vertical RTL and LTR.
All of this then highlights the problem with these physical properties. They do not account for all of these differences. Now, many people will push back and say that it is not a problem for them because all their users use LTR. Perhaps, but it is hard to tell unless you dig into your site or app analytics, and even then it might be misleading. Also, people have access to in-browser translation tools and can therefore choose to translate your site at will into a language they are more comfortable with.
A reason people often give for not explicitly adding support for at least RTL writing modes is the maintenance and code bloat it adds without any “real” benefit.
What if I told you there is a way to get the best of all worlds without the added maintenance burden or code bloat? You would be pretty excited, right?
There is, and these are collectively known as CSS logical properties. Wow, took me a while to get to the punch line, am I right!? These are also not part of a CSS-future you need to wait for, but, surprisingly, have been around for quite some time.
It is tricky to demonstrate the benefit of using CSS logical properties through a purely text medium, and so, I have included a video that I believe will seal the deal and have you start updating your projects to logical properties today.
Take a deep dive into logical properties and review the browser support on MDN Web Docs.
And that is it for this week’s feature. I am curious though. Was this new to you? If you were aware of it, but not using these exclusively (where possible), why not? Are you planning on using it now that you know?
Let me know in the comments on YouTube!
On the “where possible” topic. There are not equivalent logical properties for everything we would want in CSS yet. If you want to support the work that is being done to improve this mamoth task, consider donating to Miriam Suzanne on Open Collective. You can read more about the work she has done and plan to do next on the Open Collective page.
Find value in the work I do? You can support the work by buying me a coffee. Thank you! ✌️