Skip to main content
CSS-Tricks
  • Articles
  • Alamanac
  • Guides
  • Videos
  • Books
  • Newsletter
Search

Articles Tagged
container-queries

29 Articles
{
,

}
Direct link to the article Let’s Not Forget About Container Queries
container-queries media queries

Let’s Not Forget About Container Queries

Container queries are always on the top of the list of requested improvements to CSS. The general sentiment is that if we had container queries, we wouldn’t write as many global media queries based on page size. That’s because we’re …

Avatar of Chris Coyier
Chris Coyier on Oct 9, 2019
Direct link to the article Responsive Components: a Solution to the Container Queries Problem
container-queries

Responsive Components: a Solution to the Container Queries Problem

Container Queries, as in, the ability to style elements based on values from a particular element, like its width and height. We have media queries, but those are based on the viewport not individual elements. There are plenty of …

Avatar of Chris Coyier
Chris Coyier on Feb 28, 2018
Direct link to the article Container Query Discussion
container-queries

Container Query Discussion

Right now, we have the power to write CSS that only applies when the browser window itself is at certain widths or heights. Breakpoints, as it were. Super useful. What we don’t have (natively) is the ability to write conditional …

Avatar of Chris Coyier
Chris Coyier on Apr 6, 2017
Direct link to the article Container Queries: Once More Unto the Breach
container-queries

Container Queries: Once More Unto the Breach

I guess the plan is to stop with the “element queries” and start thinking and referring to them as “container queries”. We’ve been following this saga for a while. Element queries have a serious pitfall: infinite loops.

.our-element:media(min-width: 500px) {
  
…
Avatar of Chris Coyier
Chris Coyier on Jul 1, 2015
Direct link to the article Use Cases and Requirements for Element Queries
container-queries

Use Cases and Requirements for Element Queries

This is a perfect example of making a case for new language features. Not just a vague “element queries! that would be awesome!” but laying out a real-world scenario, what we have to do to achieve it now, and why …

Avatar of Chris Coyier
Chris Coyier on Jun 17, 2014 (Updated on Jul 1, 2015)
Direct link to the article Thoughts on Media Queries for Elements
container-queries

Thoughts on Media Queries for Elements

Imagine something like these Transformer Tabs as a widget in a fluid column in a responsive design. Depending on the browser window width, perhaps this design is either 4, 2, or 1 column wide. When it breaks from 4 …

Avatar of Chris Coyier
Chris Coyier on Mar 4, 2014 (Updated on May 19, 2021)
Direct link to the article Responsive Elements
container-queries

Responsive Elements

Width based media queries are based on the entire browser window. If the browser window is narrower than 800px, do this. If the browser is window is wider than 400px, do this. But that’s not always enough. Imagine a desktop …

Avatar of Chris Coyier
Chris Coyier on Sep 17, 2013 (Updated on Jul 1, 2015)
  • Newer
  • 1
  • 2
  • 3

CSS-Tricks is powered by DigitalOcean.

Keep up to date on web dev

with our hand-crafted newsletter

DigitalOcean
  • About DO
  • Cloudways hosting
  • Legal stuff
  • Get free credit!
CSS-Tricks
  • Write for us!
  • Advertise with us
  • Contact us
Social
  • RSS Feeds
  • CodePen
  • Mastodon
  • X
Back to Top