Could you help me understand container queries and what I can actually do with it ?, dynamic styling of elements depending on their dimensions |
Could you help me understand container queries and what I can actually do with it ?, dynamic styling of elements depending on their dimensions |
Sentinel166 |
Apr 3 2023, 06:59 PM
Post
#1
|
Novice Group: Members Posts: 21 Joined: 19-March 23 Member No.: 28,859 |
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 |
Apr 4 2023, 07:37 AM
Post
#2
|
Novice Group: Members Posts: 21 Joined: 19-March 23 Member No.: 28,859 |
in .image you can add width:auto.
|
pandy |
Apr 4 2023, 07:59 AM
Post
#3
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,744 Joined: 9-August 06 Member No.: 6 |
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 |
Apr 4 2023, 09:47 AM
Post
#4
|
Novice Group: Members Posts: 21 Joined: 19-March 23 Member No.: 28,859 |
|
Sentinel166 |
Apr 4 2023, 09:49 AM
Post
#5
|
Novice Group: Members Posts: 21 Joined: 19-March 23 Member No.: 28,859 |
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 |
Apr 4 2023, 02:42 PM
Post
#6
|
Novice Group: Members Posts: 21 Joined: 19-March 23 Member No.: 28,859 |
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 |
Apr 6 2023, 05:38 PM
Post
#7
|
WDG Member Group: Root Admin Posts: 8,365 Joined: 4-August 06 From: Mountain View, CA Member No.: 3 |
QUOTE 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 |
Apr 6 2023, 07:05 PM
Post
#8
|
Novice Group: Members Posts: 21 Joined: 19-March 23 Member No.: 28,859 |
well, then those choices are a pain in the arse for users X-D
|
pandy |
Apr 7 2023, 03:02 AM
Post
#9
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,744 Joined: 9-August 06 Member No.: 6 |
Really? Why?
|
Lo-Fi Version | Time is now: 25th June 2024 - 08:51 AM |