Search code examples
cssmedia-queriesdevice-width

Is prefixing a media query with *, such as *-device-width, a valid query for the @media rule?

Some of our company's sites use @media rules where the query uses device-width, e.g.

@media (max-device-width:800px) {} //various rules

I was searching through our company sites' CSS to find any outdated rules when I came across this link. The authors assert asterisk-prefixing such as with *-device-width is possible for media queries, and since it's a Google link this assertion must be correct :p

I cannot test this with my current setup. I tried applying this rule on W3Schools and their setup but it did not seem to work (though valid queries did work). The MDN page for @media here does not make any mention of the validity of this query. Neither do WHATWG docs such as this one nor W3C docs such as this one.

Is asterisk-prefixing such as *-device-width valid for a media query, such that the rule applies to both max-device-width AND min-device-width?

Solution

  • Is asterisk-prefixing such as *-device-width valid for a media query, such that the rule applies to both max-device-width AND min-device-width?

    No, it's not. The way to refer to a media feature by itself is to simply omit any prefixes. So in this case it's device-width. See section 4 of Media Queries 3 and section 2.4 of Media Queries 4.

    I have no idea why the authors of that Google document refer to *-device-width when they could have simply said device-width — if I were to hazard a guess it's probably because device-width is used elsewhere — but in any case, the asterisk is not a valid prefix.