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)

html{
writing-mode: vertical-rl;
}

Direction property (inline axis)

html{
direction: rtl;
}

Browsers Support

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 Expert