Modules > Responsive Design > only Keyword

only Keyword

Last class we learned a simple format for media queries:

@media screen and (max-width: 480px) {
  aside {
    display: none;
  }
}

This will ensure that the asides are hidden from all screens that have a width of less than 481px.

There's nothing wrong with this query, but it's worth pointing out that you'll often see the same thing in a slightly different way:

@media only screen (max-width: 480px) {
  aside {
    display: none;
  }
}

The different here is the only keyword in the media query.

The only keyword is intended to ensure that older browsers that don't understand the entire media query line will ignore the whole thing rather than just rendering some version they understand.

TL;DR

Use the only keyword in you media queries.

That's supposed to go at the beginning, right?

For a more comprehensive explanation, see this Stack Overflow question.

Modules > Responsive Design > only Keyword