RWD Weekly #257 – Media Queries Level 4

Welcome to RWD Weekly edition #257 and the final in the holiday series.

This week we’re taking a look at the Media Query Level 4 Working Draft and how things are changing when it comes to media queries. The document is pretty detailed and rather than cover everything I’m going to focus on a few areas including

• Deprecated items
• Updates to range queries
• Pointer Events
• The missing and most requested item

The specification was last updated in July 2016, and like all W3C specifications these are just indications on how browser vendors should approach the implementation in a standard way, however many browser vendors include additional features themselves which occasionally are picked up across other browsers if they’re good (Service Workers for example).

Sponsor

Do You Build WordPress Sites?

Earn top commissions by promoting the Jetpack products millions of WordPress professionals love.

Deprecated Items

Let’s start with media query methods you should no longer be using:

• device-width
• device-height
• device-aspect-ratio

There is no need to define the device width/height/aspect-ratio anymore because we shouldn’t be targeting device specific widths, instead, we should be focussing on when content or our site layout looks wrong as the time to add a breakpoint.

If you do want to look at targeting specific devices — don’t — you should be looking to target device capabilities.

Updates to range queries

Many of you will be familiar with a query that might look like this…

@media (min-width: 600px) {
// targets any viewport at least 600px wide
}
@media (max-width: 1000px) {
// targets any viewport 1000px wide or less.
}
@media (min-width: 600px) and (max-width: 1000px) {
// targets any viewport that are at least 600px wide but less than 1000px
}

The new approach is a little easier and uses math operators to replace the min-/max- prefix.

For example, (min-height: 600px) is equivalent to (height >= 600px), and (max-width: 1000px) is equivalent to (width <= 1000px). You can even chain these together like so — (600px =< width <= 1000px).

Pointer Events (Interaction Media Features)

There is a great article from Patric Lauke that covers off some misconceptions about Pointer Events.  These are referred to Interaction Media Features in the Draft and the support for these kinds of queries is pretty good outside of Firefox.

You have access to two kinds of queries with a couple variables in each

• pointer: course
• pointer: fine
• hover: hover
• hover: none

@media (pointer:fine) {
/* ok to use small buttons/controls */
}

@media (hover:hover) {
/* ok to use :hover-based menus */
}

@media (pointer:coarse) {
/* make buttons and other “touch targets” bigger */
}

@media (hover:none), (hover:on-demand) {
/* suppress :hover-based menus */
}

You should be aware that these match against the devices primary input mechanism so remember to always build progressively so that no one is left behind.

Free eBook: How to start a WordPress maintenance business
// sponsored

Our 50+ page eBooks covers everything you need to know to start your WordPress maintenance business.

Container Queries

Ethan Marcotte has recently written about Container Queries which is well worth a read as he always does a tremendous job of explaining things in a simple way.

Essentially Container Queries look at a component within a container and the height/width of that container, whereas a media query will look at the width or height of the viewport regardless of where that particular container/component exists — but seriously read Ethan’s overview.

There is a number of Container/Element query resources which Brad has kept up-to-date over on This is Responsive which is enough to get you started, but this Container Query Prollyfill is what I’ve used in my experimentation.

——-

If you want to keep up with what is being done on the Media Query specification be sure to review the Draft and post any updates to the GitHub Issues.

This Friday we’ll be back to our regular programming with headlines, articles, tutorials and the best of the web.

Cheers,

Justin.