Container Query for “Is There Enough Space Outside This Element?”, by @chriscoyier (@frontendmasters.com):

https://frontendmasters.com/blog/container-query-for-is-there-enough-space-outside-this-element/

Using Container Query Units Relative to an Outer Container, by @anatudor (@frontendmasters.com):

https://frontendmasters.com/blog/using-container-query-units-relative-to-an-outer-container/

I haven't used style queries much, but just gave them a spin and got an idea (that I've just tested & works) about how we can have ranges in style queries right now.

That is, red background if --k <= 20, orange background if 20 < --k <= 40 and so on...

#Development #Approaches
CSS container queries unleashed · Where container queries outperform media queries https://ilo.im/1621uq

_____
#Layout #ContainerQueries #GracefulDegradation #ResponsiveDesign #WebDesign #WebDev #Frontend #CSS

#Development #Techniques
Conditional CSS grid template areas · A magic formula to “open the gates to layout heaven.” https://ilo.im/161t0f

_____
#Layout #CssGrid #CssNesting #ContainerQueries #LogicalProperties #ResponsiveDesign #WebDesign #WebDev #Frontend #CSS

#Development #Releases
CSS scroll-state() · Chrome 133 introduces scroll state container queries https://ilo.im/161umo

_____
#ContainerQueries #Scrolling #ScrollDrivenAnimation #Animation #ProgressiveEnhancement #Chrome #Browser #WebDev #Frontend #CSS

Omg. I attempted to debug an issue in safari, where a position: fixed; element didn't correctly align to the viewports edge and I couldn't find out why, until I noticed that it is now relatively positioned to the next element with `container: inline-size;` on it.

Is this how it is supposed to be? This is only the case in safari

#Development #Techniques
Solved by modern CSS: feature image · Feature image with container queries and :has() https://ilo.im/161bsv

_____
#ModernCSS #Image #ContainerQueries #CssHas #Viewport #Browser #WebDev #Frontend #HTML. #CSS

#Development #Techniques
Fluid everything else · “Responsive design should be almost invisible to the user.” https://ilo.im/160rfm

_____
#ModernCSS #Typography #ContainerQueries #CssClamp #CssCalc #FluidDesign #ResponsiveDesign #WebDev #Frontend #CSS

#Development #Guides
A friendly introduction to container queries · The CSS feature everyone asked for but few are using https://ilo.im/160peq

_____
#CSS #ContainerQueries #MediaQueries #ContainmentAPI #Browser #ResponsiveDesign #WebDesign #WebDev #Frontend

> take container queries, for example. They were the number one feature requested by front-end devs for a looong time. So why don’t we use them more, now that they’re finally here?

https://mxb.dev/blog/old-dogs-new-css-tricks/

Extremely annoying #CSS gotcha: container query units seem to be relative to the `content-box` dimensions. And there doesn't seem to be any way to make them relative to the `border-box` dimensions... which is what I need to solve other problems caused by container queries.

Random #CSS thought of the morning: annoying thing about #containerQueries is a container needs to have children, we can't just use its text content as container item (like for #cssGrid).

Relevant for when we want container size relative font-size.

Take https://codepen.io/thebabydino/pen/MWRMvbe?editors=1100

We cannot have that text content be the text content of the article element (the container whose size it depends on), it needs to be wrapped in a div!

Getting started with CSS container queries: a great tutorial by @michelle to discover, understand and start using container queries

#CSS #ContainerQueries
https://developer.mozilla.org/en-US/blog/getting-started-with-css-container-queries/

Container queries: why it’s time to consider them in Figma and how to implement them: https://uxdesign.cc/container-queries-why-its-time-to-consider-them-in-figma-and-how-to-implement-them-8e4e9349b8e4
Great tutorial by Christine Vallaure on how to "fake" and document container queries in Figma for your development teams
#ContainerQueries #FigmaTips

container queries are GREAT but oh boy do i have to switch to a brand new gear in my head to write them! #css #containerQueries

Is it possible yet for a #CSS media object pattern to center-align its text content when it’s shorter than the visual object, but for that content to flow below the object when it’s longer? https://codepen.io/tylersticka/pen/KKrWPGq?editors=1100

I usually give up and go full flex or grid, but that’s a shame when space is limited or the object isn’t square.

(It feels like #ContainerQueries could solve this, but I haven’t had success with that yet, and most examples I’ve found focus on `inline-size`)

So for #css #ContainerQueries you define a container.

BUT does such a container have a name?

Right now I want to explain that we should make a grid container a container query container.

"Make the grid container a container"?

"Make the grid container a container query container"?

Both are confusing.