cqw · cqh
One percent of the query container — width, at last, made local.
One cqw is 1% of the width of the nearest query container — the ancestor declared with container-type — and one cqh, 1% of its height. For the first time a unit measures the component's vessel, not the whole window. With no container around, they fall back to the small viewport units.
It is the right choice for components living in columns of varied widths: the same card, its heading set in 6cqw, composes large in the wide column and small in the narrow one — fluid typography without a single media query.
.cartao {
container-type: inline-size;
}
.cartao h3 {
font-size: 6cqw;
}