Search code examples
cssmedia-queries

Why are "media types" in media queries used?

I keep seeing tons of examples of media queries that look like this:

@media screen and (min-width: 700px) and (orientation: landscape)

or

@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 480px)
  and (-webkit-min-device-pixel-ratio: 2)

Now, I understand HOW keywords like "screen" and "print" and "speech" are used, but I don't get the point. Maybe using "print" for some changes to save ink (though I imagine that's an edge case since backgrounds don't print by default), but why would you ever need to specify "speech"? Why do examples of media queries so often specify "screen"?

Solution

  • This specification from W3C suggest that media queries could also be used for HTML, XHTML, XML. Perhaps, queries with speech media type were mainly used for importing text to speech software into varieties of document types.

    This is the only source that I could find describing the speech media type But it does not really provide a great example of how it is used.

    As for why the examples often used screen media type, simply because it is the most often used. Previous versions of media queries had many media types, but are now removed as they have few uses or serve the same purpose with the current media types.

    In the future, they may alter their specification, removing those not very useful media types or adding more of it to suit future technologies.

    Update: I found a GitHub thread discussing about speech media type. It basically says that speech is mainly for user agent that deals with speech. E.g. Siri or Alexa.