|
| 1 | +<pre class=metadata> |
| 2 | +Title: CSS Containment Module Level 2 |
| 3 | +Level: 2 |
| 4 | +Shortname: css-contain |
| 5 | +Status: ED |
| 6 | +Work Status: stable |
| 7 | +Group: csswg |
| 8 | +ED: https://drafts.csswg.org/css-contain-2/ |
| 9 | +Previous Version: https://www.w3.org/TR/2020/WD-css-contain-2-20201216/ |
| 10 | +Previous Version: https://www.w3.org/TR/2020/WD-css-contain-2-20200603/ |
| 11 | +Previous Version: https://www.w3.org/TR/2019/WD-css-contain-2-20191111/ |
| 12 | +Previous Version: https://www.w3.org/TR/2019/WD-css-contain-2-20191015/ |
| 13 | +TR: https://www.w3.org/TR/css-contain-2/ |
| 14 | +Editor: Tab Atkins, Google, http://xanthir.com/contact/, w3cid 42199 |
| 15 | +Editor: Florian Rivoal, On behalf of Bloomberg, https://florian.rivoal.net/, w3cid 43241 |
| 16 | +Editor: Vladimir Levin, Google, vmpstr@google.com, w3cid 75295 |
| 17 | +Editor: Miriam E. Suzanne, Invited Expert, http://miriamsuzanne.com/contact, w3cid 117151 |
| 18 | +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. |
| 19 | +Test Suite: https://test.csswg.org/harness/results/css-contain-1_dev/ |
| 20 | +WPT Path Prefix: css/css-contain/ |
| 21 | +At risk: [=style containment=] and the ''contain: style'' value |
| 22 | +</pre> |
| 23 | +<pre class="anchors"> |
| 24 | +spec: css2; urlPrefix: https://www.w3.org/TR/CSS2/ |
| 25 | + type: property; url: generate.html#propdef-content; text: content |
| 26 | + type: property; url: visudet.html#propdef-vertical-align; text: vertical-align |
| 27 | + type: value; for: content; url: generate.html#value-def-open-quote; text: open-quote |
| 28 | + type: value; for: content; url: generate.html#value-def-close-quote; text: close-quote |
| 29 | + type: value; for: content; url: generate.html#value-def-no-open-quote; text: no-open-quote |
| 30 | + type: value; for: content; url: generate.html#value-def-no-close-quote; text: no-close-quote |
| 31 | + type: dfn; url: box.html#padding-edge; text: padding edge |
| 32 | + |
| 33 | +spec: css-backgrounds-3; |
| 34 | + type: dfn; url: https://drafts.csswg.org/css-backgrounds-3/#corner-clipping; text: corner clipping |
| 35 | +</pre> |
| 36 | +<pre class=link-defaults> |
| 37 | +spec:css2; type:dfn; text:stacking context |
| 38 | +spec:css2; type:property; text:content |
| 39 | +spec:css-display-3; type:property; text:display |
| 40 | +spec:css2; type:property; text:counter-increment |
| 41 | +spec:css-ui-3; type:property; text:text-overflow |
| 42 | +spec:css-grid-1; type:property; text:grid |
| 43 | +spec:css-break-3; type:dfn; text:forced break |
| 44 | +spec:css-break-3; type:dfn; text:fragmentation |
| 45 | +spec:css-break-3; type:dfn; text:fragmentation container |
| 46 | +spec:css-break-3; type:dfn; text:fragmentation context |
| 47 | +spec:css-break-3; type:dfn; text:fragmented flow |
| 48 | +spec:css-sizing-4; type:property; text:contain-intrinsic-size |
| 49 | +spec:css-sizing-4; type:property; text:aspect-ratio |
| 50 | +spec:intersection-observer; type:dfn; text:intersection root |
| 51 | +spec:css-sizing-3; type:value; for:height; text:auto |
| 52 | +spec:css-sizing-3; type:property; text:width |
| 53 | +spec:css-sizing-3; type:property; text:height |
| 54 | +spec:css-sizing-3; type:value; for:width; text:min-content |
| 55 | +spec:css-sizing-3; type:value; for:width; text:max-content |
| 56 | +</pre> |
| 57 | + |
| 58 | +<h2 id='intro'> |
| 59 | +Introduction</h2> |
| 60 | + |
| 61 | + ISSUE: This is a diff spec over <a href="https://www.w3.org/TR/css-contain-2/">CSS Containment Level 2</a>. |
| 62 | + It is currently an Exploratory Working Draft: |
| 63 | + if you are implementing anything, please use Level 2 as a reference. |
| 64 | + We will merge the Level 2 text into this draft once it reaches CR. |
| 65 | + |
| 66 | +<h3 id="interaction"> |
| 67 | +Module Interactions</h3> |
| 68 | + |
| 69 | + This document defines new features not present in earlier specifications. |
| 70 | + In addition, it aims to replace and supersede [[!CSS-CONTAIN-1]] |
| 71 | + once stable. |
| 72 | + |
| 73 | +<h3 id="values"> |
| 74 | +Value Definitions</h3> |
| 75 | + |
| 76 | + This specification follows the <a href="https://www.w3.org/TR/CSS2/about.html#property-defs">CSS property definition conventions</a> from [[!CSS2]] |
| 77 | + using the <a href="https://www.w3.org/TR/css-values-3/#value-defs">value definition syntax</a> from [[!CSS-VALUES-3]]. |
| 78 | + Value types not defined in this specification are defined in CSS Values & Units [[!CSS-VALUES-3]]. |
| 79 | + Combination with other CSS modules may expand the definitions of these value types. |
| 80 | + |
| 81 | + In addition to the property-specific values listed in their definitions, |
| 82 | + all properties defined in this specification |
| 83 | + also accept the <a>CSS-wide keywords</a> as their property value. |
| 84 | + For readability they have not been repeated explicitly. |
| 85 | + |
| 86 | +<h2 id='contain-property'> |
| 87 | +Strong Containment: the 'contain' property</h2> |
| 88 | + |
| 89 | + Issue: [[css-contain-2#contain-property]] |
| 90 | + |
| 91 | +<h2 id='containment-types'> |
| 92 | +Types of Containment</h2> |
| 93 | + |
| 94 | + Issue: [[css-contain-2#containment-types]] |
| 95 | + |
| 96 | +Suppressing An Element's Contents Entirely: the 'content-visibility' property {#content-visibility} |
| 97 | +================= |
| 98 | + |
| 99 | + Issue: [[css-contain-2#content-visibility]] |
| 100 | + |
| 101 | +Privacy and Security Considerations {#priv-sec} |
| 102 | +============================================== |
| 103 | + |
| 104 | + Issue: [[css-contain-2#priv-sec]] |
| 105 | + |
| 106 | +<!-- |
| 107 | +████████ ████████ ██████ |
| 108 | +██ ██ ██ ██ |
| 109 | +██ ██ ██ |
| 110 | +██████ ██ ██ |
| 111 | +██ ██ ██ |
| 112 | +██ ██ ██ ██ |
| 113 | +████████ ██ ██████ |
| 114 | +--> |
| 115 | + |
| 116 | +<h2 class="no-num non-normative" id="changes">Appendix A. Changes</h2> |
| 117 | + |
| 118 | +This appendix is <em>informative</em>. |
| 119 | + |
| 120 | +<h3 id="l3-changes"> |
| 121 | +Changes from <a href="https://www.w3.org/TR/css-contain-2/">CSS Containment Level 2</a> |
| 122 | +</h3> |
| 123 | + |
| 124 | +None yet. |
| 125 | + |
| 126 | +Issue: [[css-contain-2#changes]] |
| 127 | + |
0 commit comments