Overview.bs

<pre class=metadata>
Title: CSS Containment Module Level 3
Level: 3
Shortname: css-contain
Status: ED
Prepare for TR: no
Work Status: Revising
Group: csswg
ED: https://drafts.csswg.org/css-contain-3/
TR: https://www.w3.org/TR/css-contain-3/
Previous Version: https://www.w3.org/TR/2021/WD-css-contain-3-20211221/
Editor: Tab Atkins, Google, http://xanthir.com/contact/, w3cid 42199
Editor: Florian Rivoal, On behalf of Bloomberg, https://florian.rivoal.net/, w3cid 43241
Editor: Miriam E. Suzanne, Invited Expert, https://www.miriamsuzanne.com/who/, w3cid 117151
Abstract:
	This specification is a placeholder.
	It used to refine and extend features defined in <a href="https://www.w3.org/TR/css-contain-2/">CSS Containment Level 2</a>,
	but extensions of containment been moved back to the Level 2 specification,
	while the main new feature it used to introduce has been moved to [[CSS-CONDITIONAL-5]].

	Having moved these features to other specifications,
	this document is now empty.
	It may be revived at a later point,
	when Level 2 stabilizes.
</pre>


Privacy Considerations {#privacy}
=================================

	Not applicable.

Security Considerations {#security}
===================================

	Not applicable.

<h2 class="no-num non-normative" id="changes">Appendix A. Changes</h2>

This appendix is <em>informative</em>.

<h3 id="changes-2022-08"
	oldids="contain-property, valdef-contain-inline-size, containment-types, containment-inline-size, inline-size-containment, example-3a756a36,
	container-queries, example-13f6f0fa, example-c6405bc1, container-type, propdef-container-type, query-container, valdef-container-type-size, valdef-container-type-inline-size, valdef-container-type-normal, example-5708b886, example-2f40a692, container-name, propdef-container-name, valdef-container-name-none, valdef-container-name-custom-ident, example-44473254, container-shorthand, container-rule, container-query, typedef-container-condition, typedef-container-name, typedef-container-query, typedef-query-in-parens, typedef-style-query, typedef-style-in-parens, example-cba8e10c, example-b320e2d0, animated-containers, example-cfbdbffb, container-features, container-feature, size-container, container-size-query, size-features, typedef-size-feature, example-031e4923, example-5df63e7c, width, descdef-container-width, height, descdef-container-height, inline-size, descdef-container-inline-size, block-size, descdef-container-block-size, aspect-ratio, descdef-container-aspect-ratio, orientation, descdef-container-orientation, valdef-container-orientation-portra,it valdef-container-orientation-landsc,ape style-container, container-style-query, style-features, typedef-style-feature, container-lengths, container-query-length, example-a4252068, apis, the-csscontainerrule-interface, csscontainerrule, dom-csscontainerrule-containername, dom-csscontainerrule-containerquery
	">
Changes since the 18 August 2022 Working Draft</h3>


	Significant changes since the <a href="https://www.w3.org/TR/2022/WD-css-contain-3-20220818/">18 August 2022 Working Draft</a> include:


	<div class=advisement>
		* Move the definition of inline-size containement from this Level 3 specification
			to Level 2.
			(<a href="https://github.com/w3c/csswg-drafts/issues/10433">Issue 10433</a>)
		* Move Container Queries to [[CSS-CONDITIONAL-5]]
			(<a href="https://github.com/w3c/csswg-drafts/issues/10433">Issue 10433</a>)
	</div>

	Prior to the move, the following significant changes had been made,
	and are reflected in [[CSS-CONDITIONAL-5]]:

	* List all values of 'contain' in order to clarify serialization order
		(<a href="https://github.com/w3c/csswg-drafts/issues/8600">Issue 8600</a>)
	* Add the {{CSSContainerRule/containerName}} and
		{{CSSContainerRule/containerQuery}} attributes.
		(<a href="https://github.com/w3c/csswg-drafts/issues/7033">Issue 7033</a>)
	* Correct typo in 'container-type' syntax, to clarify that ''container-type/normal'' cannot
		be combined with other values.
		(<a href="https://github.com/w3c/csswg-drafts/issues/7669">Issue 7669</a>)
	* Allow ''var()'' references in [=container size queries=].
		(<a href="https://github.com/w3c/csswg-drafts/issues/8088">Issue 8088</a>)
	* Allow comma-separated <<container-condition>>s to match different containers.
		(<a href="https://github.com/w3c/csswg-drafts/issues/7551">Issue 7551</a>)

<h3 id="changes-2021-12">
Changes since the 21 December 2021 First Public Working Draft</h3>

	Significant changes since the <a href="https://www.w3.org/TR/2021/WD-css-contain-3-20211221/">21 December 2021 First Public Working Draft</a> include:

	* Allow the computed value of 'container-name' to include duplicate identifiers.
		(<a href="https://github.com/w3c/csswg-drafts/issues/7181">Issue 7181</a>)
	* Make the <<'container-name'>> in the 'container' shorthand required.
		(<a href="https://github.com/w3c/csswg-drafts/issues/7142">Issue 7142</a>)
	* Clarify handling of [=shorthand properties=] in [=container style queries=].
		(<a href="https://github.com/w3c/csswg-drafts/issues/7095">Issue 7095</a>)
	* [=Cascade-dependent keywords=] are not allowed as values in a
		[=style feature=], and cause the [=container style query=] to be false.
		(<a href="https://github.com/w3c/csswg-drafts/issues/7080">Issue 7080</a>)
	* Change the initial value of 'container-type' to be ''container-type/normal'',
		which establishes elements as containers for [=style features=].
		(<a href="https://github.com/w3c/csswg-drafts/issues/6393">Issue 6393</a>,
		<a href="https://github.com/w3c/csswg-drafts/issues/7066">Issue 7066</a>,
		<a href="https://github.com/w3c/csswg-drafts/issues/7402">Issue 7402</a>)
	* Remove the block-size value from 'container-type',
		since single-axis block-size containment is not currently possible.
		(<a href="https://github.com/w3c/csswg-drafts/issues/1031">Issue 1031</a>)
	* Remove the <<string>> option from the 'container-name' syntax.
		Container names must be <<custom-ident>>s.
		(<a href="https://github.com/w3c/csswg-drafts/issues/6405">Issue 6405</a>)
	* Reverse the order of <<'container-name'>> and <<'container-type'>>
		in the 'container' shorthand property, with both being optional.
		(<a href="https://github.com/w3c/csswg-drafts/issues/6393">Issue 6393</a>)
	* Allow <<general-enclosed>> syntax in <<container-condition>>s,
		for the sake of forward compatibility.
		(<a href="https://github.com/w3c/csswg-drafts/issues/6396">Issue 6396</a>)
	* Remove the size function syntax from <<size-feature>> queries.
		(<a href="https://github.com/w3c/csswg-drafts/issues/6870">Issue 6870</a>)
	* Update the [=query container=] selection process
		to account for necessary container-types,
		and removed the explicit type-selection syntax.
		(<a href="https://github.com/w3c/csswg-drafts/issues/6644">Issue 6644</a>)
	* Remove state query features, which have been deferred.
		(<a href="https://github.com/w3c/csswg-drafts/issues/6402">Issue 6402</a>)
	* Clarify container selection around pseudo-elements and the shadow-DOM.
		(<a href="https://github.com/w3c/csswg-drafts/issues/5984">Issue 5984</a>
		and <a href="https://github.com/w3c/csswg-drafts/issues/6711">Issue 6711</a>)

<h3 id="l3-changes">
Changes from <a href="https://www.w3.org/TR/css-contain-2/">CSS Containment Level 2</a>
</h3>

	* Introduces [=inline-size containment=].
	* Defines the terms, properties, units, and at-rule
		needed for [=Container Queries=]