Could you help me understand container queries and what I can actually do with it ?, dynamic styling of elements depending on their dimensions Options

[Sentinel166]

Hi,
My website is fine but I wanted to get frisky, and try my hands on container queries.
I have the class .image, which apply to either figure or span depending on the context (respectively a block-level or inline-level element). They behave exactly the same, with the float property.
Now I use media queries to change the layout when they get too small for comfort on a mobile phone. It's enough for my need.

But I wonder if I can query the actual width and height of my image with container queries ?
So whenever they get smaller than say, 4cm, a different layout of image applies, taking the whole viewport width for instance.

For now the only code that actually does something is this:

CODE

figure {container-type:inline-size}
@container (width > 1px) {
    img {whatever here seems to work}}

but styling the figure itself doesn't work at all. I don't get it.
This is the html code (sorry for th golang bits but it's fairly self-evident):

CODE

{{if .IsBlock}}
<figure class="image"><a href=... target="_blank"> <img srcset="???? ??w, ???? ??w, ??? ??w, ??? ??w" sizes="(max-width:604px) 100vw, 70vw" src="??????" /> </a></figure>
{{ else }}
<span class="image"> <a href=... target="_blank"> <img srcset="???? ??w, ???? ??w, ??? ??w, ??? ??w" sizes="(max-width:604px) 100vw, 70vw" src="??????" /> </a></span> {{end}}

This is the default class .image:

CODE

.image{
    clear:right;
    display:flex;
    flex-direction:column;
    max-width:50%;
    img{max-height:500px;width:100%;object-fit:scale-down;}
    float:right;
    a {display:contents}}

Can I really apply container queries to the .image class so that elements will change style selectively depending on the container conditions ? Man, that sounds too dynamic to be true. But it works a bit in the earliest exemple ??
And how does it interact with the contain property which for the love of God I can't understand either ? I tried to read documents but still don't get it.

Thanks

This post has been edited by Sentinel166: Apr 3 2023, 07:00 PM

[Sentinel166]

in .image you can add width:auto.

[pandy]

Do you also have a container-type rule?

I haven't tried this, but as I understand it this is a requirement.

To use container queries, you need to declare a containment context on an element so that the browser knows you might want to query the dimensions of this container later. To do this, use the container-type property with a value of size, inline-size, or normal.

https://developer.mozilla.org/en-US/docs/We...ntainer_Queries

[Sentinel166]

Do you also have a container-type rule?

Yes, this:

CODE

figure {container-type:inline-size}

[Sentinel166]

By the way, I can edit but not remove my own message... this primitive forum is really irritating, time to change for God's sake !

This post has been edited by Sentinel166: Apr 4 2023, 09:50 AM

[Sentinel166]

Ok I found a solution.
I think position:absolute don't just make things float, it places them one level above on the DOM tree, on the level of their immediate parent.
So yeah that would not work.
It sufficed to place the content property on <article>, not main, so not on the parent of header but its sibling, on the same level. That way <header> is not contained anymore.
I learnt something, maybe others people reading this will :-)

[Darin McGrew]

By the way, I can edit but not remove my own message... this primitive forum is really irritating, time to change for God's sake !

For the record, that is a configuration choice, not a limitation of the forum software. Also, the ability to edit posts is temporary by choice.

[Sentinel166]

well, then those choices are a pain in the arse for users X-D

[pandy]

Really? Why?