A Brief Note on Container Queries and RWD

Well, while making the first steps in writing my next lecture about responsive design, I came upon a Tweeter discussion last week. Ethan Marcotte, author/mastermind behind RWD, talked about container queries and his support for them. Very interesting read.

Ethan Marcotte “On container queries.”

I’ve heard about container queries before during the last year or two. But I decided to read this article with much more intent because of topic relevance.

To describe container queries, you need to think about web apps/sites as a system. Changes via media queries are macro, that is, applied to the whole system. It’s what we been doing for years. We build the base (preferable mobile first but any sort of initial state we want) and apply changes at certain breakpoints. So when we write the following media queries:

@media (global conditions/breakpoints #1) {

… some changes here...

}

@media (global conditions/breakpoints #2) {

… some changes here...

}

etc..

what we are doing is

Global Media Queries (Ottawa Model)

Even though these changes are to certain areas such as footer/header/etc.., these are applied as if the whole app is one big container.

But with container queries, we are applying changes at the micro level. Instead of the previous example, we are applying changes to local containers. The queries will be influenced by the container conditions, not by the overall viewport. So now instead of the previous model, we have the following:

Container Media Queries (Ottawa Model)

and with each part

Container Media Queries - Expanded (Ottawa Model)

we are applying changes on the local level/containers. These media queries are not global and [could] be different from other containers. You could have a combination of global and local conditions in this system as well (don’t know if this would happen but you never know):

Container/Global Media Queries (Ottawa Model)

As for the talk/lecture, nothing had really changed. The main focus of the talk is the “why’s” of what we do in terms of RWD. However, it is obviously something to think about further.

1 Comment

  1. thanks for posting! Can’t wait to have a peek 😀

    By Tommy Hodgins on

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *