I want logical property support in media queries
Submitted by Elad Shechter
Permalink https://webwewant.fyi/wants/114/
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.