Using Logical Properties Inside Media Query Isn't Working

Question

I'm trying to use max-inline-size (the new logical properties) inside media query, but it doesn't seem to work.

The idea that in English it will be max-width:1000px; and in Japanese it will max-height:1000px

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

CodePen Example

its replacing of width/height depends the text block direction according to writing-mode property — Elad Shechter, Dec 03 '18 at 11:28
...this is a **highly** experimental property *not yet adopted by the CSSWG....it's still in Editor's Draft status — Paulie_D, Dec 03 '18 at 11:28
It's Supported almost in all browsers https://caniuse.com/#feat=css-logical-props — Elad Shechter, Dec 03 '18 at 11:29

score 1 · Answer 1 · answered Dec 03 '18 at 11:30

1

max-inline-size is not in the Media Features.

Use max-height :The maximum height of the display area, such as a browser window or max-width :The maximum width of the display area, such as a browser window

Example:

@media (max-width:1000px){
  .main-content{
    background:Red;
    grid-template-columns:auto;
  }
}

answered Dec 03 '18 at 11:30

mdev

349
1
5

The all Idea is that if will be dynamic, one time max-width and other time max-height. not good for me – Elad Shechter Dec 03 '18 at 11:31

score 1 · Answer 2 · answered Dec 03 '18 at 11:57

As mentioned, logical properties are properties, not media features, and therefore cannot be used in a media query. Writing mode is a property of an element on a page, not the browser or media the page is being viewed on. You appear to be looking for an element query, which doesn't exist in CSS.

Using Logical Properties Inside Media Query Isn't Working

2 Answers2