Kevin Powell - Community•7mo ago

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•7mo 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•7mo 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•7mo 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•7mo 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.

Gaming

Programming

cqw not a thing yet?