Why CSS Logical Properties Aren’t Ready for Use!

CSS Logical Support in Theory

caniuse CSS Logical Properties support

What isn’t Supported in the CSS Logical Properties?

CSS Shorthands

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

/* 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

  • 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

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

More of My Content

(Me talking at ConFrontJS 2019, Warsaw, Poland)

--

--

--

CSS & HTML Expert

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Using different Git accounts in the same computer

How to realize Defect Prevention with Predictive Maintenance in Azure

AWS Traffic Mirroring

Reviewing the Lastest Set of Features Added to asadm

Troubleshooting that C# memory leak

Flippity Uses AnyChart in Word Cloud Visualization Tool

Concurrency in Dart -Part III

Kubernetes and it’s use cases

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Elad Shechter

Elad Shechter

CSS & HTML Expert

More from Medium

CSS Layouts & floats

Chapter 18: CSS Web Fonts and Colors

CSS: Pseudo Classes

Stylify vs Master UI/Styles: next-generation Tailwind-like CSS libraries