Bruno Silvano Bruno Silvano - 10 months ago 76
CSS Question

Using undefined CSS media queries

I was researching about CSS media queries best practices and found the Foundation's definition.

As you can see, the first media query has no min/max-size definition:

@media only screen { } /* Define mobile styles */

Why do they use this media query as it defines no break-point? Is this a best practice or should be avoided?


Answer Source

That particular media query applies to all screens, of any size, orientation, aspect ratio or pixel density.
screen is a media type. Whatever you put inside that media query will only apply to screen and will not apply to content of other media_types.

Here is the list of currently recognized values for media_type. Most of them have been deprecated. The ones you should use (as they are probably here to stay) are:

  • all (implicit if none specified)
  • screen
  • print
  • speech

The guys at Foundation probably should change the comment after that query to a more explicit one. Instead of /* Define mobile styles */ they should have probably used /* General styles, including mobile */.

Look at the structure of their media queries and you will notice it is a mobile-first CSS framework. As in: you define the general styles (including mobile) first and than apply exceptions for ever increasingly wider screens.