Bite-sized CSS & HTML nuggets

Shorter media queries

As tweeted by Mathias Bynens a few months ago:

Most of the time, there’s no need to limit your media queries to screen media only.

Indeed, usually your media queries should apply to all media types, so instead of this:

@media screen and (min-width: 500px) { ... }

You can do this:

@media all and (min-width: 500px) { ... }

Even better, the spec says the all keyword can even be left out – it’s the implied default – leaving you with this:

@media (min-width: 500px) { ... }

Never miss an opportunity to shave a few bytes off your code and type a few characters less!