cqw not a thing yet?

I was fiddling around with a mobile application lately and stumbled upon the unit "cqw" which I found to be a more elegant approach to dynamic font sizing than em/rem in regards to supporting unknown resolutions. However in my editor I get an error "Expression expected" when using it, and caniuse tells me it's not supported by Firefox yet. Is it simply not a thing yet or does it come with unexpected drawbacks I don't see?
4 Replies
MarkBoots
MarkBoots12mo ago
maybe your editor is not up to date yet, but also remember that container units only work if you have defined a container firefox should support it https://caniuse.com/css-container-query-units
Confused Horse
Confused Horse12mo ago
Apparently when looking for "cqw" caniuse shows the static css api method "cqw()" and I didn't pay attention. Also, regarding your point about the container: isn't "body" the default container? Apart from that error message (really don't know what's the deal with that, everything is up to date) it seems to work really well, and I wonder why it's not a commonly used approach.
MarkBoots
MarkBoots12mo ago
example usage
<div class="parent">
<div class="child"></div>
</div>
<div class="parent">
<div class="child"></div>
</div>
.parent {
container-type: inline-size;
}
.child {
font-size: clamp(1rem, 1rem + 5cqw, 2rem);
}
.parent {
container-type: inline-size;
}
.child {
font-size: clamp(1rem, 1rem + 5cqw, 2rem);
}
Confused Horse
Confused Horse12mo ago
I tested my assumption by swappiung cwq and dvw. And when you do not provide a container, or a containing block (as shown in your example) it defaults to the view port. I didn't test svh/lvh behavior though. I would assume cqh defaults to dvh.
Want results from more Discord servers?
Add your server