0

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?

BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
The One and Only ChemistryBlob
  • 7,864
  • 10
  • 36
  • 69
  • 1
    Never thought I'd say this, but WHATWG is not W3C, and just like W3C hates being mistaken for W3Schools, WHATWG hates just as much to be confused with W3C. Also, the WHATWG spec you link to describes non-standard features - if you're trying to find out if device-width is part of the standard, why are you looking there? – BoltClock Jul 13 '16 at 15:33
  • Just came across it when googling "device-width" for a different issue I had with our company CSS - use of @-ms-viewport {width: device-width;} – The One and Only ChemistryBlob Jul 13 '16 at 15:42
  • Also I chose the "Living Standard" from the MDN page - could of chosen this one: https://drafts.csswg.org/mediaqueries-3/#media0 – The One and Only ChemistryBlob Jul 13 '16 at 15:45

1 Answers1

1

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.

BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356