Valid use of calc in media queries results in an error

[dumptyd]

@media (max-width: calc(400px + 1px)) {
  .btn { width: 100px; }
}

- Parse error: Number, dimension, ratio or identifier is expected

That code can be ran here to reproduce the error: https://csstree.github.io/docs/validator.html

[lahmatiy]

The parsing of media queries are not complete (see https://github.com/csstree/csstree/issues/118). This is not an easy question and I am still wondering what to do about it.

However, that's quite a surprise to me that calc() is allowed in media query. As I can see, browsers don't support it and I have not seen in any CSS spec that this is allowed. Are you sure that's valid?

[abdo643-HULK]

It is allowed and most browsers support it. https://stackoverflow.com/questions/23667208/calc-not-working-within-media-queries

[lahmatiy]

@abdo643-HULK Wow, didn't know that. Thank you for the link 🙏

[Mrten]

Stumbled over this, but the stackoverflow answer has been changed:

ANSWER EDITED AGAIN 21.03.2022:

In the current version of the spec, using calc (or var) in media queries is NOT supported by the spec (as TylerH pointed out below).```

[epmatsw]

And interesting problem. https://chromestatus.com/feature/5643732019838976 indicates that Chrome at least wants this to be supported.

[romainmenke]

The stackoverflow answer is incorrect. This is definitely required to work by the relevant specifications.

https://stackoverflow.com/a/74961202/4263818