Logical Properties in Dimension Queries

I got here throughout a put up from Elad Shechter lamenting not having the ability to use logical properties in media queries. As he appropriately notes, the next received’t work:

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

Media queries now assist a brand new vary syntax. As a substitute of writing min-width or max-width, we will use the “better than” or “lower than” operators (> and <), or “better than or equal to”/“lower than or equal to” (>= and <=). So we might write the above instance a special means:

/* Kinds are utilized when the inline-size is lower than or equal to 1000px */
@media (width <= 1000px) {
  .main-content {
    max-inline-size: 800px;
    margin: 0 auto;
  }
}

This feels extra in line with different programming languages, and lends itself nicely to extra concise code when coping with a number of measurement situations:

@media (min-width: 500px) and (max-width: 1000px) {...}

/* turns into: */
@media (500px <= width <= 1000px) {...}

It offers us a alternative by way of how one can write it too. These two media situations each imply that the kinds needs to be utilized when the width is bigger than 500px. We are able to write it both means:

@media (500px < width) {...}

@media (width > 500px) {...}

To me, this syntax feels higher suited to logical properties, and also you can use logical properties in container queries. These each work:

@container (min-inline-size: 500px) {...}

/* turns into: */
@container (inline-size >= 500px) {...}

So why not in media queries? It looks as if an oversight, however I’m additionally inclined to suppose that within the not too distant future we would not want media queries for querying measurement. We might simply make the :root a container and question that as a substitute:

:root {
  container-type: inline-size;
}

@container (500px < inline-size < 1000px) {
  physique {
    background: blue;
  }
}

Besides…

We are able to’t question the block-size (equal to the peak in horizontal writing modes) with container queries. The next received’t work:

:root {
  container-type: block-size;
}

@container (block-size > 500px) {
  physique {
    background: blue;
  }
}

Talking personally, it’s very uncommon that I would like to question the viewport peak. CSS has viewport items in fact, that are nice for sizing issues relative to, nicely, the viewport. But it surely’s not completely remarkable. So we might have size-based media queries for a while but, and having the ability to use logical properties with them would definitely be helpful!