csswg-drafts/css-containment/Overview.src.html at ffcc65edbe131b4bd2c148d7452a2f16c8facff7 · meyerweb/csswg-drafts · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
<h1>CSS Overflow Clipping Module Level 3</h1>

<pre class=metadata>
Level: 3
Shortname: css-overflow-clipping
Status: ED
ED: http://dev.w3.org/csswg/css-overflow-clipping/
Editor: Tab Atkins, Google, http://xanthir.com/contact/
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.
Ignored Terms: scrollWidth, scrollHeight, clientWidth, clientHeight
</pre>

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

	Elements with ''overflow:hidden'' set on them hide the parts of their content that overflow their boundaries.
	However, this hiding is not absolute;
	several CSS features (such as fixed positioning) can cause contents of the element to be visible outside the element's boundaries,
	and scrolling to reveal the overflowing content is still possible through use of scripting.

	The ''clip'' value defined in this module is similar to ''hidden'',
	but imposes stricter constraints on the element
	that ensure the overflowing content can't be seen in any way.
	This allows user agents to employ stronger optimizations when drawing pages,
	while not giving up anything important in most cases over what ''hidden'' allows.

	Note: This feature does <strong>not</strong> replace ''hidden'' entirely.
	Notably, ''overflow: hidden'' is often used when scrolling is deliberately implemented with scripting,
	and such a use is still completely appropriate
	(and, in fact, would stop working entirely with ''clip'').

<h2 id='overflow-clip'>
Hard Clipping: the ''clip'' value for 'overflow'</h2>

	<pre class='propdef'>
		Name: overflow
		New values: clip
	</pre>

	The <dfn value for='overflow'>clip</dfn> value for 'overflow' indicates that the content of the element is clipped to the element's content box,
	and that the element must not provide a scrolling user interface (such as a scrollbar).

	It has several additional effects, as well:

	<ol>
		<li>
			The element must not be scrollable at all, by any means.

		<li>
			The <a attribute>scrollWidth</a> and <a attribute>scrollHeight</a> attributes of the element's <code>DOM</code> must return the same values as the <a attribute>clientWidth</a> and <a attribute>clientHeight</a> attributes, respectively.

			<p class='issue'>
				Make sure this is the right way to define this.  Also, ensure it's sane.

		<li>
			The object acts as a containing block for absolutely positioned and fixed positioned descendants.
	</ol>

	<p class='issue'>
		Other names for this value?  ''contained''?

	<div class='issue'>
		Is is possible to separate out this functionality into more useful orthogonal things,
		which would work *with* ''overflow: hidden'' rather than obsoleting it for many uses?
		Basically you'd need the ability to form a fixpos containing block,
		and stop scrolling.

		Both of these are indeed potentially useful.
		For example, forming a fixpos containing block would mean that fixpos becomes an abspos that "pierces through" most containing blocks,
		only being stopped by these more powerful blocks.
		That seems like it might be useful in general.
	</div>