Overview.bs

<pre class=metadata>
Title: CSS Containment Module Level 3
Level: 3
Shortname: css-contain
Status: ED
Work Status: Exploring
Group: csswg
ED: https://drafts.csswg.org/css-contain-2/
Previous Version: https://www.w3.org/TR/2020/WD-css-contain-2-20201216/
Previous Version: https://www.w3.org/TR/2020/WD-css-contain-2-20200603/
Previous Version: https://www.w3.org/TR/2019/WD-css-contain-2-20191111/
Previous Version: https://www.w3.org/TR/2019/WD-css-contain-2-20191015/
TR: https://www.w3.org/TR/css-contain-2/
Editor: Tab Atkins, Google, http://xanthir.com/contact/, w3cid 42199
Editor: Florian Rivoal, On behalf of Bloomberg, https://florian.rivoal.net/, w3cid 43241
Editor: Vladimir Levin, Google, vmpstr@google.com, w3cid 75295
Editor: Miriam E. Suzanne, Invited Expert, http://miriamsuzanne.com/contact, w3cid 117151
Abstract: This CSS module describes the 'contain' property, which indicates that the element's subtree is independent of the rest of the page. This enables heavy optimizations by user agents when used well.
Test Suite: https://test.csswg.org/harness/results/css-contain-1_dev/
At risk: [=style containment=] and the ''contain: style'' value
</pre>
<pre class="anchors">
spec: css2; urlPrefix: https://www.w3.org/TR/CSS2/
	type: property; url: generate.html#propdef-content; text: content
	type: property; url: visudet.html#propdef-vertical-align; text: vertical-align
	type: value; for: content; url: generate.html#value-def-open-quote; text: open-quote
	type: value; for: content; url: generate.html#value-def-close-quote; text: close-quote
	type: value; for: content; url: generate.html#value-def-no-open-quote; text: no-open-quote
	type: value; for: content; url: generate.html#value-def-no-close-quote; text: no-close-quote
	type: dfn; url: box.html#padding-edge; text: padding edge

spec: css-backgrounds-3;
	type: dfn; url: https://drafts.csswg.org/css-backgrounds-3/#corner-clipping; text: corner clipping
</pre>
<pre class=link-defaults>
spec:css2; type:dfn; text:stacking context
spec:css2; type:property; text:content
spec:css-display-3; type:property; text:display
spec:css2; type:property; text:counter-increment
spec:css-ui-3; type:property; text:text-overflow
spec:css-grid-1; type:property; text:grid
spec:css-break-3; type:dfn; text:forced break
spec:css-break-3; type:dfn; text:fragmentation
spec:css-break-3; type:dfn; text:fragmentation container
spec:css-break-3; type:dfn; text:fragmentation context
spec:css-break-3; type:dfn; text:fragmented flow
spec:css-sizing-4; type:property; text:contain-intrinsic-size
spec:css-sizing-4; type:property; text:aspect-ratio
spec:intersection-observer; type:dfn; text:intersection root
spec:css-sizing-3; type:value; for:height; text:auto
spec:css-sizing-3; type:property; text:width
spec:css-sizing-3; type:property; text:height
spec:css-sizing-3; type:value; for:width; text:min-content
spec:css-sizing-3; type:value; for:width; text:max-content
</pre>

<h2 id='intro'>
Introduction</h2>

	ISSUE: This is a diff spec over <a href="https://www.w3.org/TR/css-contain-2/">CSS Containment Level 2</a>.
	It is currently an Exploratory Working Draft:
	if you are implementing anything, please use Level 2 as a reference.
	We will merge the Level 2 text into this draft once it reaches CR.

<h3 id="interaction">
Module Interactions</h3>

	This document defines new features not present in earlier specifications.
	In addition, it aims to replace and supersede [[!CSS-CONTAIN-1]]
	once stable.

<h3 id="values">
Value Definitions</h3>

	This specification follows the <a href="https://www.w3.org/TR/CSS2/about.html#property-defs">CSS property definition conventions</a> from [[!CSS2]]
	using the <a href="https://www.w3.org/TR/css-values-3/#value-defs">value definition syntax</a> from [[!CSS-VALUES-3]].
	Value types not defined in this specification are defined in CSS Values &amp; Units [[!CSS-VALUES-3]].
	Combination with other CSS modules may expand the definitions of these value types.

	In addition to the property-specific values listed in their definitions,
	all properties defined in this specification
	also accept the <a>CSS-wide keywords</a> as their property value.
	For readability they have not been repeated explicitly.

<h2 id='contain-property'>
Strong Containment: the 'contain' property</h2>

	Issue: [[css-contain-2#contain-property]]

<h2 id='containment-types'>
Types of Containment</h2>

	Issue: [[css-contain-2#containment-types]]

Suppressing An Element's Contents Entirely: the 'content-visibility' property {#content-visibility}
=================

	Issue: [[css-contain-2#content-visibility]]

Privacy and Security Considerations {#priv-sec}
==============================================

	Issue: [[css-contain-2#priv-sec]]

<!--
████████ ████████  ██████
██          ██    ██    ██
██          ██    ██
██████      ██    ██
██          ██    ██
██          ██    ██    ██
████████    ██     ██████
-->

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

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

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

None yet.

Issue: [[css-contain-2#changes]]