TIL Container Queries are live!

POSTED ON: Feb 24, 2023

TAGS: container css

via State of CSS 2022 - https://web.dev/state-of-css-2022/

Container queries are live!

Before @container, elements of a webpage could only respond to the size of the whole viewport. This is great for macro layouts, but for micro layouts, where their outer container isn't the whole viewport, it's impossible for the layout to adjust accordingly.

After @container, elements can respond to a parent container size or style! The only caveat is the containers must declare themselves as possible query targets, which is a small requirement for a large benefit.

@container sidebar (width > 400px) {
  /* <stylesheet> */
}

.day {
    container-type: inline-size;
    container-name: calendar-day;
}

or
.day {
  container: sidebar / inline-size;
}

Then you declare:

MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/@container

Related TILs

Tagged: container

• Next: TIL why jpeg vs jpgIn DOS systems, a filename extension was a different part of the name stored in a different field that can only be 3 characters. You still see this legacy today in Microsoft's .NET software, where most system calls that use the word 'filename' in their name don't really mean the whole filename. They mean just the part without the extension.
• Previous: TIL the history of fonts and COLRv1COLRv1 fonts, have a smaller footprint, vector-scalable, reposition-able, gradient-featuring, and blend-mode powered fonts that accept parameters to customize the font per use case or to match a brand.