Skip to content

Files

Latest commit

 

History

History
30 lines (25 loc) · 1 KB

114.md

File metadata and controls

30 lines (25 loc) · 1 KB
title date submitter number tags discussion
I want logical property support in media queries
2020-02-19 23:42:48 UTC
Elad Shechter
114
css

The new properties of sizing are lacking support in @media rules (min-inline-size, max-inline-size, min-block-size, max-block-size) :

/* Not Working */
@media (max-inline-size: 1000px){
  .main-content{
    max-inline-size: 800px;
    margin: 0 auto;
  }
}

We need it to create responsive websites which work on all types of languages.

For Example, in Japanese the flow of the website is right to left (writing-mode: vertical-rl) instead of the regular flow from top to bottom. This means that for Japanese websites the responsive of the website is on the height and not on the width.

For the usage of logical properties to be practical, this is a must.

Here is a CodePen that demonstrates the described case.