I want logical property support in media queries

[aarongustafson]

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.

---

https://webwewant.fyi/wants/114/