Container queries: are "em" units computed using container ems or contained ems?
In
@container (width > 15em)
, whose em
is the width in? I think it's in contained ems (i.e. those of the current element), as it seems the alternative wouldn't make any sense, but I can't find any confirmation.3 Replies
Well, it seems I'm wrong: https://www.w3.org/TR/css-contain-3/#typedef-size-feature
Drat. This makes the whole thing less useful. "Is my container's width more than 15 of these arbitrary units I, the current component, have no control over?".
What im seeing on that spec is the font-size of the containing element (the container in which container-type is declared on) is what defines '1em' including for its @container rules. So the current component does have control over what 1em is .
Media queries (if i remember from KPow's videos) in ems or rems are based on the browsers default font-size, even if you change your font-size in the html ;