New CSS Logical Properties!

The Next Step of CSS Evolution

Intro

The way of thinking in CSS Logical Properties

Box-Model Physical Properties (Old Method)
Logical Properties (New Method)

Inline axis

Block axis

Japanese Website

The New Box Model Properties

Logical Dimension

The Box Model Properties — Old vs New Properties

CSS Positions

/* OLD TECHNIQUE */
.popup{
position:fixed;
top:0;
bottom:0;
left:0;
right:0;
}
/* NEW TECHNIQUE */.popup{
position:fixed;
inset-block-start:0; /*top - in English*/
inset-block-end:0; /*bottom - in English*/
inset-inline-start:0; /*left - in English*/
inset-inline-end:0; /*right - in English*/
}
.popup{
position:fixed;
inset:0 0 0 0; /*top, right, bottom, left - in English*/
}

CSS Floats

Text-align

More Stuff

CSS Grid & CSS Flexbox

Understanding the Workflow with Logical Properties

Applying Alignment According to Language

Writing-mode property (block axis)

  • writing-mode: horizontal-tb; = Top to Bottom flow, like in English (default value)
  • writing-mode: vertical-rl; = Right to Left Flow, for Japanese.
  • writing-mode: vertical-lr; = Left to Right Flow, for Mongolian.
html{
writing-mode: vertical-rl;
}

Direction property (inline axis)

html{
direction: rtl;
}

Browsers Support

  • All The Box Model properties margin/padding/border and the new width/height(inline-size, block-size) properties work in all main browsers except for Edge.
  • text-align new values work in all main browsers except for Edge.
  • Floats/Positions/Resize — values/properties work only in Firefox.

Issues With the Logical Properties

html{
flow-mode:physical;
/*or*/
flow-mode:logical;
}
.box{
/*will be interpreted according to the HTML flow-mode value*/
margin:10px 5px 6px 3px;
padding:5px 10px 2px 7px;
}

Issue With Responsive Design

/*Not Working*/
@media (max-inline-size:1000px){
.main-content{
background:red;
grid-template-columns:auto;
}
}

Changes to be Considered

Final Words

(Me talking at ConFrontJS 2019, Warsaw, Poland)

My Talk on CSS Logical Properties — New!

--

--

CSS & HTML Architect

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