Media queries have become a part of the web developer’s everyday toolkit. In the time since the iPhone first brought true web browsing to mobile devices, they have gone from obscure tool used for print to an absolute necessity. There’s just one problem: While they work great for making responsive layouts, they’re terrible for creating responsive components. Ideally, a truly reusable component should be able to function in multiple places in a layout at any one of a number of screen sizes and “just work”, but with media queries this quickly results in multiplying complexity as you need new styles not only for every screen size but also every possible location in the layout.
Enter element and container queries. The original idea of an “element query” was to allow you to target sizes for an element directly in css, so that you can then directly modify the styles based on the space available for the element. The problem with this approach is that you quickly end up in undefined situations. If you allow an element to change its own styles based on size, what happens if it changes its own size? Breakdown.
The New Hope
Container queries hope to solve this problem by explicitly allowing you to *only* influence child elements based on their container’s size. This offers most of the benefits of an element query, without the drawback of being able to create impossible scenarios for the browser.
Imagine the possibilities! The promise of truly self-contained components that could be plugged into a multitude of locations within a website and “just work” opens a whole new world of design opportunities. We’ve gathered a list of articles exploring this concept for you to read, check them out below, and start dreaming… if container queries become a reality, what will you build?
Container Queries: Once More Unto the Breach
Styling a module meant to occupy multiple containers with viewport-based media queries means scoping that module’s styles to all the containers that it might occupy.
Use Element Queries Today with eq.js
With responsive images this close to landing natively in several major browsers, everyone has turned their attention to the next major hurdle: element queries.
Media Query Breaks Modularity, Use Container Query
If you have created responsive web site, you likely have used media queries to change styles according to the width of viewport. With Container queries you can apply media query to an element instead of viewport.
Use Cases for Container Queries
Container queries — formerly known as element queries — are one of the features we really want to see implemented in 2017. That’s why we would like to show some use cases for container queries.
Element Queries: the Future of Responsive Web Design
Media queries are a vital part of modern web design, but they’re not always perfect. In this article we’ll take a look at the idea of “element queries”; what many argue is the future of responsive web design.
Container Queries Demo
Container Queries can react to changes in a component like font-size or padding in ways media queries cannot. This demo will show you how.
Container-based RWD with Element Queries
Discover how element queries will change the way we create design systems and approach reusable components.
Element-based RWD with Container Queries — DEMOs
Container queries (AKA element queries) are an intriguing expansion on responsive web design. This is a collection of polyfills which aim to show how CQs can be used to modify the design of a web page based on the constraints of an element instead of the width of the viewport.
Beyond Media Queries — It’s Time to Get Elemental
Don’t get me wrong. I love media queries but the more I work with them, the more painfully aware I am of how inadequate and grossly overused they are.
Element Queries, From the Feet Up
What are Element Queries? At a high level, I’d describe them as pure, unfiltered, rocket fuel for hyper-responsive layouts and components.
Master Foundation Responsive Design and Development
ZURB FOUNDATION TRAINING: INTRO TO FOUNDATION 6
“The presentation was very clear and concise. It was obvious that you guys enjoy working on Foundation. I walked away excited about the possibilities. Nice work!”
- Damon Green, North Virginia Community College
Start the new year off with training directly from the Foundation team! Our unique online Intro to Foundation course will get you up and running with the framework fast as well as provide you with some tips and tricks directly from the team that created it.
This article was original published in the February edition of the Responsive Reading . Responsive Reading is ZURB’s email magazine about the latest developments in responsive web design. Get the latest issues
More design articles from ZURB:
