Skip to content

Commit 94e5949

Browse files
tabatkinstabatkins
committed
[css-containment] Fix Abstract/h1. Add example.
1 parent da3f589 commit 94e5949

2 files changed

Lines changed: 65 additions & 7 deletions

File tree

‎css-containment/Overview.html‎

Lines changed: 33 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<!DOCTYPE html><html lang=en><head>
22
<meta content="text/html; charset=utf-8" http-equiv=Content-Type>
3-
<title>CSS Overflow Clipping Module Level 3</title>
3+
<title>CSS Containment Module Level 3</title>
44
<link href=../default.css rel=stylesheet type=text/css>
55
<link href=../csslogo.ico rel="shortcut icon" type=image/x-icon>
66
<style>
@@ -52,7 +52,7 @@
5252
<img alt=W3C height=48 src=http://www.w3.org/Icons/w3c_home width=72>
5353
</a>
5454
</p>
55-
<h1 class="p-name no-ref" id=title>CSS Overflow Clipping Module Level 3</h1>
55+
<h1 class="p-name no-ref" id=title>CSS Containment Module Level 3</h1>
5656
<h2 class="no-num no-toc no-ref heading settled heading" id=subtitle><span class=content>Editor’s Draft,
5757
<span class=dt-updated><span class=value-title title=20131108>8 November 2013</span></span></span></h2>
5858
<div data-fill-with=spec-metadata><dl><dt>This version:<dd><a class=u-url href=http://dev.w3.org/csswg/css-overflow-clipping/>http://dev.w3.org/csswg/css-overflow-clipping/</a><dt>Editor’s Draft:<dd><a href=http://dev.w3.org/csswg/css-overflow-clipping/>http://dev.w3.org/csswg/css-overflow-clipping/</a>
@@ -68,7 +68,7 @@ <h2 class="no-num no-toc no-ref heading settled heading" id=subtitle><span class
6868
</div>
6969

7070
<h2 class="no-num no-toc no-ref heading settled heading" id=abstract><span class=content>Abstract</span></h2>
71-
<p class=p-summary data-fill-with=abstract>This CSS module describes the <span class=css data-link-type=maybe title=clip>clip</span> value for the <a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css-overflow-3/#overflow title=overflow>overflow</a> property, which is similar to the <span class=css data-link-type=maybe title=hidden>hidden</span> value, but imposes stricter constraints on the element.
71+
<p class=p-summary data-fill-with=abstract>This CSS module describes the <a class=property data-link-type=propdesc href=#propdef-contain title=contain>contain</a> 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.
7272
<a href=http://www.w3.org/TR/CSS/>CSS</a> is a language for describing the rendering of structured documents
7373
(such as HTML and XML)
7474
on screen, on paper, in speech, etc.</p>
@@ -163,11 +163,39 @@ <h2 class="heading settled heading" data-level=2 id=overflow-clip><span class=se
163163
so that its contents are guaranteed to have no effect on the rest of the page outside the element’s bounds.
164164
</dl>
165165

166-
<p class=issue id=issue-32126a29><a class=self-link href=#issue-32126a29></a>
166+
<p class=issue id=issue-1148ea1a><a class=self-link href=#issue-1148ea1a></a>
167167
Do we want to break this apart,
168168
so people can opt into particular forms of containment without going whole-hog,
169169
if they really need to?
170170

171+
<div class=example>
172+
<a class=property data-link-type=propdesc href=#propdef-contain title=contain>contain</a> is useful when used widely on a page,
173+
particularly when a page contains a lot of "widgets" which are all independent.
174+
175+
<p> For example, assume a micropost social network had markup something like this:
176+
177+
<pre class=css> &lt;body&gt;
178+
&lt;aside class='sidebar'&gt;...&lt;/aside&gt;
179+
&lt;article class='messages'&gt;
180+
&lt;section class='message'&gt;
181+
Lol, check out this dog: images.example.com/jsK3jkl
182+
&lt;/section&gt;
183+
&lt;section class='message'&gt;
184+
I had a ham sandwich today. #goodtimes
185+
&lt;/section&gt;
186+
&lt;section class='message'&gt;
187+
I have political opinions that you need to hear!
188+
&lt;/section&gt;
189+
…
190+
&lt;/article&gt;
191+
&lt;/body&gt;
192+
</pre>
193+
<p> There are probably a <em>lot</em> of messages displayed on the site,
194+
but each is independent and won’t affect anything else on the site.
195+
As such, each can be marked with <a class=css data-link-type=propdesc href=#propdef-contain title=contain>contain: strict</a> to communicate this to the user agent,
196+
so it can optimize the page and skip a lot of computation for messages that are off-screen.
197+
</div>
198+
171199
<p> An element that is <dfn data-dfn-type=dfn data-export="" id=strictly-contained>strictly contained<a class=self-link href=#strictly-contained></a></dfn> operates under the following restrictions:
172200

173201
<ol>
@@ -370,7 +398,7 @@ <h2 class="no-num heading settled" id=issues-index><span class=content>Issues In
370398
so people can opt into particular forms of containment without going whole-hog,
371399
if they really need to?
372400

373-
<a href=#issue-32126a29> ↵ </a></div><div class=issue>
401+
<a href=#issue-1148ea1a> ↵ </a></div><div class=issue>
374402
Make sure this is the right way to define this. Also, ensure it’s sane.
375403

376404
<a href=#issue-6081e5c9> ↵ </a></div></div>

‎css-containment/Overview.src.html‎

Lines changed: 32 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<h1>CSS Overflow Clipping Module Level 3</h1>
1+
<h1>CSS Containment Module Level 3</h1>
22

33
<pre class=metadata>
44
Level: 3
@@ -7,7 +7,7 @@ <h1>CSS Overflow Clipping Module Level 3</h1>
77
Group: csswg
88
ED: http://dev.w3.org/csswg/css-overflow-clipping/
99
Editor: Tab Atkins, Google, http://xanthir.com/contact/
10-
Abstract: This CSS module describes the ''clip'' value for the 'overflow' property, which is similar to the ''hidden'' value, but imposes stricter constraints on the element.
10+
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.
1111
Ignored Terms: scrollWidth, scrollHeight, clientWidth, clientHeight, formatting context
1212
Link Defaults: css-lists-3 (property) counter-increment
1313
</pre>
@@ -66,6 +66,36 @@ <h2 id='overflow-clip'>
6666
so people can opt into particular forms of containment without going whole-hog,
6767
if they really need to?
6868

69+
<div class='example'>
70+
'contain' is useful when used widely on a page,
71+
particularly when a page contains a lot of "widgets" which are all independent.
72+
73+
For example, assume a micropost social network had markup something like this:
74+
75+
<pre class='css'>
76+
&lt;body>
77+
&lt;aside class='sidebar'>...&lt;/aside>
78+
&lt;article class='messages'>
79+
&lt;section class='message'>
80+
Lol, check out this dog: images.example.com/jsK3jkl
81+
&lt;/section>
82+
&lt;section class='message'>
83+
I had a ham sandwich today. #goodtimes
84+
&lt;/section>
85+
&lt;section class='message'>
86+
I have political opinions that you need to hear!
87+
&lt;/section>
88+
…
89+
&lt;/article>
90+
&lt;/body>
91+
</pre>
92+
93+
There are probably a <em>lot</em> of messages displayed on the site,
94+
but each is independent and won't affect anything else on the site.
95+
As such, each can be marked with ''contain: strict'' to communicate this to the user agent,
96+
so it can optimize the page and skip a lot of computation for messages that are off-screen.
97+
</div>
98+
6999
An element that is <dfn export>strictly contained</dfn> operates under the following restrictions:
70100

71101
<ol>

0 commit comments

Comments
 (0)