A bit of gem from Kevin Powell’s “HTML & CSS Tip of the Week” web site, reminding us that utilizing container queries opens up container question items for sizing issues primarily based on the scale of the queried container.
cqiandcqbare much likevwandvh, however as an alternative of caring in regards to the viewport, they care about their containers dimension.
cqiis your inline-size unit (normally width in horizontal writing modes), whereascqbhandles block-size (normally peak).
So, 1cqi is equal to 1% of the container’s inline dimension, and 1cqb is the same as 1% of the container’s block dimension. I’d be remiss to not point out the cqmin and cqmax items, which consider both the container’s inline or block dimension. So, lets say 50cqmax and that equals 50% of the container’s dimension, however it’ll take a look at each the container’s inline and block dimension, decide which is larger, and use that to calculate the ultimate computed worth.
That’s a pleasant sprint of conditional logic. It may assist keep proportions in case you suppose the writing mode may change on you, akin to shifting from horizontal to vertical.
