Aug 24, 2020

9 min read

Why CSS Logical Properties Aren’t Ready for Use!

CSS Logical Support in Theory

The can-i-use website might lead us to think that browsers already support these properties and that they are ready for use:

caniuse CSS Logical Properties support

What isn’t Supported in the CSS Logical Properties?

Because there are many topics that I want to cover in this article, I divided it into four categories, in decreasing order of importance: CSS Shorthand, Lack of Support, Responsive Design in Vertical Text Websites, and My Suggestions.

CSS Shorthands

When we use properties such as padding/margin, we usually write them using their shorthand form of two or more values. Since those properties have been part of CSS since the time when there were only physical properties (physical directions — top/right/bottom/left), there is no way for the browser to know if you want those values to refer to physical or logical directions.

margin: 20px 40px; /* vertical | horizontal */
margin: 10px 20px 30px 40px; /* top | right | bottom | left */
margin: logical 20px 40px; /* block | inline */margin: logical 10px 20px 30px 40px; 
/* block-start | inline-end | block-end | inline-start */
html{ flow-mode: logical; } /* logical | physical (default) */.box{
margin: 10px 20px 30px 40px;
/* block-start | inline-end | block-end | inline-start */
}
html{ flow-mode: logical; }
.box{
margin: 10px 20px 30px 40px;
/* block-start | inline-end | block-end | inline-start */
padding: physical 20px 25px 30px 35px;
/* top | right | bottom | left */
}

Lack of Support

In this category, we have CSS properties that have been updated but have very poor support. Most of them are supported only in the Firefox browser.

/* physical */
.cover{
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
/* logical (new) */
.cover{
position: fixed;
inset-block-start: 0;
inset-inline-end: 0;
inset-block-end: 0;
inset-inline-start:0;
}
/* logical (new) */
.cover{
position: fixed;
inset: 0 0 0 0;
/* block-start | inline-end | block-end | inline-start */
/* if all equal you can write */
inset: 0;
/* many more options...*/
}
float: inline-start; 
float: inline-end;

Responsive Design in Vertical Text Websites

Everyone knows that responsive websites are styled according to the width of the browser window. But this isn’t always true when dealing with far-east languages.

  • vertical-rl (for traditional Chinese/Japanese and more)
  • vertical-lr (for traditional Mongolian and more).
The traditional Japanese way of writing
My Suggestion on the Web We Want Site

My Suggestions

Because I live in a country whose language is not written in the usual direction (direction: ltr), I can think of additional ways to bring the CSS Logical Properties to other features in CSS. These are some of my ideas:

translateBlock replacing the usage of translateX
translateInline replacing the usage of translateY
rotateBlock replacing the usage of rotate/rotateZ
transform-origin can accept new logical values: block-start/block-end and inline-start/inline-end
  • Global usage — with my suggestion of flow-mode: logical
  • Local usage — the logical keyword at the beginning of the value, like w3c suggestion.
box-shadow with flow-mode: logical (offset-inline and offset-block)
text-shadow with flow-mode: logical (offset-inline and offset-block)
filter: drop-shadow with flow-mode: logical (offset-inline and offset-block)
background-position: right top;
background-position: inline-end block-start;
<img src="" logical>
A logical attribute idea for content images
  • line-height works like line-width in vertically written languages. It’s time to update this property to a new name: line-size.
  • border-width is even more problematic because it behaves like a border-height when you look at the top/bottom border on regular websites, and the meaning of it was always the size of the border. It’s best to call it border-size.
What those property names should be called

Final Words

CSS Logical Properties enable us to write CSS rules that apply to all the human languages’ reading directions at once, without having to create separate styles depending on the direction of a language.

More of My Content

I create a lot of CSS related content. Be sure to follow me on Twitter, Linkedin, and Medium.

(Me talking at ConFrontJS 2019, Warsaw, Poland)