Skip to content

Commit 539b853

Browse files
committed
[css-contain-3] Relative units in dimensional queries
1 parent 25ca34c commit 539b853

File tree

1 file changed

+35
-5
lines changed

1 file changed

+35
-5
lines changed

css-contain-3/Overview.bs

Lines changed: 35 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -238,7 +238,7 @@ Creating Query Containers: the 'container-type' property</h2>
238238

239239
The ''40em'' value used in the query condition
240240
is relative to the [=computed value=] of 'font-size'
241-
on the ''section'' container.
241+
on the relevant [=query container=].
242242
</div>
243243

244244
<div class=example>
@@ -401,7 +401,9 @@ Container Queries: the ''@container'' rule</h2>
401401
to just those with a matching [=query container name=].
402402
3. Select the nearest remaining [=query container=] ancestor.
403403
4. If no ancestor is an eligible [=query container=],
404-
then the [=container query=] is ''false'' for that element.
404+
then the [=container query=] is ''unknown'' for that element.
405+
406+
Issue: Do missing containers evaluate false or unknown?
405407

406408
If an eligible [=query container=] has been selected,
407409
each [=container feature=] in the <<container-query-list>>
@@ -426,7 +428,7 @@ Container Queries: the ''@container'' rule</h2>
426428
</div>
427429

428430
Issue(6393): Provide a syntax to query a specific container-type?
429-
431+
Issue: Define how nested container queries are evaluated
430432

431433
<h2 id="container-features">
432434
Container Features</h2>
@@ -447,13 +449,41 @@ Dimensional Container Features</h3>
447449

448450
If the [=query container=] does not have a [=principal box=],
449451
or the principal box is not a [=layout containment box=],
452+
or the [=query container=] does not support [=dimensional queries=] on the relevant axes,
450453
then the result of evaluating any dimensional container feature is ''unknown''.
451454

452-
[=Relative length=] units in [=container queries=]
453-
are based on the the [=computed values=] of the [=query container=].
455+
[=Relative length=] units in [=container query=] conditions
456+
are evaluated based on the the [=computed values=] of the [=query container=].
454457

455458
Note: This is different from the handling of relative units in [=media queries=].
456459

460+
<div class=example>
461+
For example, [=query containers=] with different font-sizes
462+
will evaluate ''em''-based queries relative to their own font sizes:
463+
464+
<pre class=lang-css>
465+
aside, main {
466+
container-type: inline-size;
467+
}
468+
469+
aside { font-size: 16px; }
470+
main { font-size: 24px; }
471+
472+
@container (width > 40em) {
473+
h2 { font-size: 1.5em; }
474+
}
475+
</pre>
476+
477+
The ''40em'' value used in the query condition
478+
is relative to the [=computed value=] of 'font-size'
479+
on the relevant [=query container=]:
480+
481+
* For any ''h2'' inside ''aside'',
482+
the query condition will be true above ''640px''.
483+
* For any ''h2'' inside ''main'',
484+
the query condition will be true above ''960px''.
485+
</div>
486+
457487
Issue: Evaluate to "unknown" if inline-/block-/size containment is missing.
458488

459489
<h4 id="width">

0 commit comments

Comments
 (0)