Should I always add `screen` to `@media` query? Everything appears to work with or without `screen` condition

Question

I'm learning responsive design and I've been messing around media queries.

Does anyone know if I absolutely need to use @media screen? When writing queries to make my design responsive everything works WITH or WITHOUT screen.

Answer 1

For 99.9% of cases out there, screen is all that's ever used to view your site, so could be left out - when not specified, all is implied. However, there are other possibilities out there.

Think visually impaired users, for example. Some visually impaired web surfers use screen readers, which do not visit your site as screen. There are also tactile web browsers that present information from sites as Braille. Again, not a screen.

As mentioned before, these are certainly anomalous users; however, depending on the traffic you expect on your site, it's encouraged as best practice to include the screen in your @media queries when designing for a screen display.

Other media options are:

• braille
• embossed
• handheld
• print
• projection
• speech
• tty
• tv

Update (June 2017)

As of Media Queries 4, much of this was simplified—all but a few of the above are deprecated. Currently supported are the following:

• all
• print
• screen
• speech

See the @media page on the Mozilla Developer Network for details, and thanks to @romellem for pointing out these changes!