changeset
[css-overflow] Define scrollbar-gutter
Sun, 15 Jan 2017 22:18:42 +0900
- author
- Florian Rivoal <[email protected]>
- date
- Sun, 15 Jan 2017 22:18:42 +0900
- changeset 18680
- 078265332f8e
- parent 18678
- 9702757ad240
- child 18681
- de3c447ddd73
[css-overflow] Define scrollbar-gutter
Closes #92
| css-overflow/Overview.bs | file | annotate | diff | comparison | revisions |
1.1 --- a/css-overflow/Overview.bs Sun Jan 15 18:31:04 2017 +0900 1.2 +++ b/css-overflow/Overview.bs Sun Jan 15 22:18:42 2017 +0900 1.3 @@ -478,17 +478,184 @@ 1.4 (including propagation of 'direction' to the ICB). 1.5 </p> 1.6 1.7 +<h2 id="scollbar-gutter-property"> 1.8 +Reserving space for the scrollbar: the 'scrollbar-gutter' property</h2> 1.9 1.10 - <p class="issue"> 1.11 - [[CSS3-MARQUEE]] describes an 'overflow-style' property, 1.12 - but it has not picked up implementation experience 1.13 - that the working group is aware of. 1.14 - Should this document treat 'overflow-style' as a defunct proposal, 1.15 - or should this document describe the 'overflow-style' property 1.16 - and attempt to revive it, 1.17 - despite that implementations have implemented 1.18 - 'overflow-x' and 'overflow-y' instead? 1.19 - </p> 1.20 +The space between the inner border edge and the outer padding edge 1.21 +which user agents may reserve to display the scrollbar 1.22 +is called the <dfn>scrollbar gutter</dfn>. 1.23 + 1.24 +The 'scrollbar-gutter' property gives control to the author 1.25 +over the presence of <a>scrollbar gutters</a> 1.26 +separately from the ability to control the presence of scrollbars 1.27 +provided by the 'overflow' property. 1.28 + 1.29 +<pre class="propdef"> 1.30 +Name: scrollbar-gutter 1.31 +Value: ''auto'' | [ ''stable'' | ''always'' ] && ''both''? && ''force''? 1.32 +Initial: auto 1.33 +Inherited: yes 1.34 +Computed value: specified value 1.35 +</pre> 1.36 + 1.37 +This property affects the presence of <a>scrollbar gutters</a> 1.38 +placed at the <a>inline start</a> edge or <a>inline end</a> edge of the box. 1.39 + 1.40 +The presence of a <a>scrollbar gutter</a> 1.41 +at the <a>block start</a> edge and <a>block end</a> edge of the box 1.42 +cannot be controlled in this level, 1.43 +and is determined the same way as the presence of <a>scrollbar gutters</a> 1.44 +placed at the <a>inline start</a> edge or <a>inline end</a> edge of the box 1.45 +when 'scrollbar-gutter' is ''scrollbar-gutter/auto''. 1.46 + 1.47 +Scrollbars which by default are placed over the content box 1.48 +and do not cause <a>scrollbar gutters</a> to be created 1.49 +are called <dfn>overlay scrollbars</dfn>. 1.50 +Such scrollbars are usually partially transparent, revealing the content behind them if any. 1.51 +Their appearance and size may vary 1.52 +based on whether and how the user is interacting with them. 1.53 + 1.54 +Scrollbars which are always placed in a <a>scrollbar gutter</a>, 1.55 +consuming space when present, 1.56 +are called <dfn>classic scrollbars</dfn>. 1.57 +Such scrollbars are usually opaque. 1.58 + 1.59 +Whether <a>classic scrollbars</a> or <a>overlay scrollbars</a> are used is UA defined. 1.60 + 1.61 +The appearance and size of the scrollbar is UA defined. 1.62 + 1.63 +Whether scrollbars appear on the start or end edge of the box is UA defined. 1.64 + 1.65 +For <a>classic scrollbars</a>, 1.66 +the width of the <a>scrollbar gutter</a> is the same as the width of the scrollbar. 1.67 +For <a>overlay scrollbars</a>, 1.68 +the width of the <a>scrollbar gutter</a> is UA defined. 1.69 +However, it must not be 0, 1.70 +and it must not change based on user interactions with the page or the scrollbar 1.71 +even if the scrollbar itself changes. 1.72 +Also, it must be the same for all elements in the page. 1.73 + 1.74 +The values of this property have the following meaning: 1.75 + 1.76 +<dl dfn-for="scrollbar-gutter"> 1.77 + <dt><dfn>''scrollbar-gutter/auto''</dfn> 1.78 + <dd><a>Classic scrollbars</a> consume space by creating a <a>scrollbar gutter</a> 1.79 + when 'overflow' is ''overflow/scroll', 1.80 + or when 'overflow' is ''overflow/auto'' and the box is overflowing. 1.81 + <a>Overlay scrollbars</a> do not consume space. 1.82 + 1.83 + <dt><dfn>''stable''</dfn> 1.84 + <dd>The <a>scrollbar gutter</a> is present when 1.85 + 'overflow' is ''overflow/scroll'' or ''overflow/auto'' 1.86 + and the scrollbar is a <a>classic scrollbar</a> 1.87 + even if the box is not overflowing, 1.88 + but not when the scrollbar is an <a>overlay scrollbar</a>. 1.89 + 1.90 + <dt><dfn>''always''</dfn> 1.91 + <dd>The <a>scrollbar gutter</a> is always present when 1.92 + 'overflow' is ''overflow/scroll'' or ''overflow/auto'', 1.93 + regardless of the type of scrollbar or 1.94 + of whether the box is overflowing. 1.95 + 1.96 + <dt><dfn>''both''</dfn> 1.97 + <dd>If a <a>scrollbar gutter</a> would be present 1.98 + on one of the inline start edge or the inline end edge of the box, 1.99 + another <a>scrollbar gutter</a> must be present on the opposite edge as well. 1.100 + 1.101 + <dt><dfn>''force''</dfn> 1.102 + <dd>When the ''scrollbar-gutter/force'' keyword is present 1.103 + ''scrollbar-gutter/stable'' and ''scrollbar-gutter/always'' take effect 1.104 + when 'overflow' is ''overflow/visible'', ''overflow/hidden'' or ''overflow/clip'' 1.105 + in addition ''overflow/auto'' or ''overflow/scroll''. 1.106 + This does not cause a scrollbar to be displayed, only a <a>scrollbar gutter</a>. 1.107 +</dl> 1.108 + 1.109 +When the <a>scrollbar gutter</a> is present but the scrollbar is not, 1.110 +or the scrollbar is transparent or otherwise does not fully obscure the <a>scrollbar gutter</a>, 1.111 +the background of the <a>scrollbar gutter</a> must be painted as an extension of the padding. 1.112 + 1.113 +<div class=note> 1.114 +Note: The following table summarises the interaction of 'overflow' and 'scrollbar-gutter', 1.115 +showing in which case space is reserved for the <a>scrollbar gutter</a>. 1.116 +In this table, “G†represents cases where space is reserved for the <a>scrollbar gutter</a>, 1.117 +“f?†cases where space is reserved for the <a>scrollbar gutter</a> 1.118 +if ''scrollbar-gutter/force'' was specified, 1.119 +and empty cells cases where the no space is reserved. 1.120 + 1.121 +<table class=data> 1.122 + <thead> 1.123 + <tr> 1.124 + <td> 1.125 + <td> 1.126 + <th colspan=2>Classic scrollbars 1.127 + <th colspan=2>Overlay scrollbars 1.128 + <tr> 1.129 + <th>'overflow' 1.130 + <th>'scrollbar-gutter' 1.131 + <th>Overflowing 1.132 + <th>Not overflowing 1.133 + <th>Overflowing 1.134 + <th>Not overflowing 1.135 + </thead> 1.136 + <tr> 1.137 + <th rowspan=3>'overflow/scroll' 1.138 + <th>''scrollbar-gutter/auto'' 1.139 + <td>G 1.140 + <td>G 1.141 + <td> 1.142 + <td> 1.143 + <tr> 1.144 + <th>''scrollbar-gutter/stable'' 1.145 + <td>G 1.146 + <td>G 1.147 + <td> 1.148 + <td> 1.149 + <tr> 1.150 + <th>''scrollbar-gutter/always'' 1.151 + <td>G 1.152 + <td>G 1.153 + <td>G 1.154 + <td>G 1.155 + <tr> 1.156 + <th rowspan=3>''overflow/auto'' 1.157 + <th>''scrollbar-gutter/auto'' 1.158 + <td>G 1.159 + <td> 1.160 + <td> 1.161 + <td> 1.162 + <tr> 1.163 + <th>''scrollbar-gutter/stable'' 1.164 + <td>G 1.165 + <td>G 1.166 + <td> 1.167 + <td> 1.168 + <tr> 1.169 + <th>''scrollbar-gutter/always'' 1.170 + <td>G 1.171 + <td>G 1.172 + <td>G 1.173 + <td>G 1.174 + <tr> 1.175 + <th rowspan=3>''overflow/visible'', ''overflow/hidden'', ''overflow/clip'' 1.176 + <th>''scrollbar-gutter/auto'' 1.177 + <td> 1.178 + <td> 1.179 + <td> 1.180 + <td> 1.181 + <tr> 1.182 + <th>''scrollbar-gutter/stable'' 1.183 + <td>f? 1.184 + <td>f? 1.185 + <td> 1.186 + <td> 1.187 + <tr> 1.188 + <th>''scrollbar-gutter/always'' 1.189 + <td>f? 1.190 + <td>f? 1.191 + <td>f? 1.192 + <td>f? 1.193 +</table> 1.194 +</div> 1.195 1.196 <h2 id="fragmentation">Fragmentation of overflow</h2> 1.197
