You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
[css-contain-3] Make the query container an element, ++
It is simpler to treat *elements* as query containers, and delay
interaction with the layout box until query-evaluation-time.
This makes it possible to answer the question "is this element a
container?" sooner, which is beneficial for implementing the feature.
It also seems to make more sense given that we're going to have
container features that don't really care about the layout box.
Also:
- Require layout containment for dimensional queries.
- Add 'block-size' as part of the computed value.
@@ -169,11 +170,11 @@ Creating Query Containers: the 'container-type' property</h2>
169
170
Initial: none
170
171
Inherited: no
171
172
Applies to: all elements
172
-
Computed value: the keyword ''container-type/none'' or one or more of ''container-type/size'', ''container-type/inline-size'', ''container-type/style'', ''container-type/state''
173
+
Computed value: the keyword ''container-type/none'' or one or more of ''container-type/size'', ''container-type/inline-size'', ''container-type/block-size'', ''container-type/style'', ''container-type/state''
173
174
Animation type: not animatable
174
175
</pre>
175
176
176
-
The 'container-type' property establishes the [=principal box=]
177
+
The 'container-type' property establishes the element
177
178
as a <dfn export>query container</dfn> for the purpose of [=container queries=],
178
179
allowing [=style rules=] styling its descendants
179
180
to query various aspects of its sizing, layout, and style
@@ -192,23 +193,23 @@ Creating Query Containers: the 'container-type' property</h2>
192
193
Applies [=layout containment=],
193
194
[=style containment=],
194
195
and [=size containment=]
195
-
to this box.
196
+
the [=principal box=].
196
197
<dt><dfn>inline-size</dfn>
197
198
<dd>
198
199
Establishes a [=query container=] for [=dimensional queries=]
199
200
on the container’s own [=inline axis=].
200
201
Applies [=layout containment=],
201
202
[=style containment=],
202
203
and [=inline-size containment=]
203
-
to this box.
204
+
the [=principal box=].
204
205
<dt><dfn>block-size</dfn>
205
206
<dd>
206
207
Establishes a [=query container=] for [=dimensional queries=]
207
208
on the container’s own [=block axis=].
208
209
Applies [=layout containment=],
209
210
[=style containment=],
210
211
and [=block-size containment=]
211
-
to this box.
212
+
the [=principal box=].
212
213
<dt><dfn>style</dfn>
213
214
<dd>
214
215
Establishes a [=query container=] for [=style queries=].
@@ -274,8 +275,7 @@ Naming Query Containers: the 'container-name' property</h2>
274
275
</pre>
275
276
276
277
The 'container-name' property
277
-
specifies a list of <dfn export lt="query container name">query container names</dfn>
278
-
that apply to the box if it is a [=query container=].
278
+
specifies a list of <dfn export lt="query container name">query container names</dfn>.
279
279
These names can be used by ''@container'' rules
280
280
to filter which [=query containers=] are targeted.
0 commit comments