changeset
CSS3-UI issues 25 49 62 64 65 66 corrected edits, batch removals: nav-index icon content:icon ::repeat-item ::repeat-index UI-pseudo-classes
Wed, 24 Dec 2014 14:36:33 -0800
- author
- Tantek Çelik <tantek@cs.stanford.edu>
- date
- Wed, 24 Dec 2014 14:36:33 -0800
- changeset 14966
- d176479b88ff
- parent 14965
- bc1f288c3424
- child 14967
- 480dcfa854b5
CSS3-UI issues 25 49 62 64 65 66 corrected edits, batch removals: nav-index icon content:icon ::repeat-item ::repeat-index UI-pseudo-classes
| css-ui/Overview.bs | file | annotate | diff | comparison | revisions | |
| css-ui/Overview.html | file | annotate | diff | comparison | revisions |
1.1 --- a/css-ui/Overview.bs Fri Dec 19 18:52:50 2014 -0800 1.2 +++ b/css-ui/Overview.bs Wed Dec 24 14:36:33 2014 -0800 1.3 @@ -25,33 +25,20 @@ 1.4 Link Defaults: css21 (property) border-style 1.5 Ignored Terms: outline-top 1.6 Ignored Terms: outline-left 1.7 -At Risk: ::value ::choices ::repeat-item ::repeat-index pseudo-elements 1.8 +At Risk: ::value ::choices pseudo-elements 1.9 At Risk: 'box-sizing' property value: padding-box 1.10 -At Risk: 'content' property value: icon 1.11 -At Risk: 'icon' property 1.12 At Risk: 'ime-mode' property 1.13 -At Risk: 'nav-index' property 1.14 At Risk: 'text-overflow' property value: <string> 1.15 At Risk: 'text-overflow' property 2-value syntax and definition 1.16 </pre> 1.17 1.18 <!-- 1.19 -At risk due to only one implementation, or obsolete dependency: 1.20 -XForms is defunct on the web. 1.21 -<li>XForms needs: :default :valid :invalid :in-range :out-of-range :required :optional :read-only :read-write ::value ::choices ::repeat-item ::repeat-index 1.22 +At risk due to only one implementation: 1.23 1.24 <li>box-sizing: padding-box - only FF supports in prefixed version 1.25 1.26 <li>ime-mode: new - not sure about IE5+ vs FF3+ interop 1.27 1.28 -<li>nav-index property 1.29 - implemented for sure only by Opera, http://www.opera.com/docs/specs/presto22/#css 1.30 - possibly obsolete: Tasman v1 internal implementation 1.31 - possibly current: MSTV Tasman 1.32 - required (depended on) by non-web DVB-HTML, ATSC standards 1.33 - - unknown if any DVB-HTML or ATSC simulators 1.34 -</li> 1.35 - 1.36 Not at risk: 1.37 <li>CSS2.1: :hover :active :focus 1.38 <li>Selectors: :enabled :disabled :checked 1.39 @@ -80,53 +67,15 @@ 1.40 <li>'resize' property 1.41 implemented by Firefox 4 and Safari 1.42 <li>nav-up, nav-down, nav-right, nav-left properties 1.43 -implemented by Opera/Presto desktop with "shift+arrow", and Blink, as well as Samsung in webkit 1.44 +implemented by Opera/Presto desktop with "shift+arrow", and Blink, as well as Samsung in webkit http://www.w3.org/2013/11/27-css-irc 1.45 1.46 --> 1.47 1.48 <hr title="Separator for header"> 1.49 1.50 -<h2 class="no-num no-toc" id="summary">Overview</h2> 1.51 - 1.52 -This section is <em>informative</em>. 1.53 - 1.54 -This document is one of the "modules" for the upcoming CSS3 1.55 -specification. It not only describes the user interface related 1.56 -properties and values that already exist in 1.57 -<a href="http://www.w3.org/TR/REC-CSS1">CSS1</a> [[CSS1]] 1.58 -and <a href="http://www.w3.org/TR/CSS21">CSS2.1</a> [[!CSS21]], but introduces 1.59 -new properties and values for CSS3 as well. 1.60 -The Working Group doesn't expect that all implementations of CSS3 will implement 1.61 -all properties or values. 1.62 -Instead, there will probably be a small number of variants of CSS3, so-called "profiles". 1.63 - 1.64 -This document is the result of the merging of relevant parts of 1.65 -the following Recommendations and Working Drafts, and the addition of some new features. 1.66 -<ul> 1.67 - <li>Cascading Style Sheets, level 2, revision 1 [[!CSS21]] 1.68 - <li><a href="http://www.w3.org/TR/2000/WD-css3-userint-20000216">User Interface for CSS3 (16 February 2000)</a> [[CSSUI]] 1.69 -</ul> 1.70 - 1.71 -This specification contains: 1.72 -<ul> 1.73 -<li>Pseudo-classes and pseudo-elements to style 1.74 -user interface states and element fragments respectively. 1.75 - 1.76 -<li>Additions to the user interface features in 1.77 -<a href="http://www.w3.org/TR/CSS21">CSS2.1</a>. 1.78 -<li>Directional focus navigation properties. 1.79 -<li>A mechanism to allow the styling of elements as icons for accessibility. 1.80 -</ul> 1.81 - 1.82 -<hr> 1.83 1.84 <h2 id="intro">Introduction</h2> 1.85 1.86 -CSS3 is a set of modules, divided up and profiled in order to 1.87 -simplify the specification, 1.88 -and to allow implementors the flexibility of supporting 1.89 -the particular modules appropriate for their implementations. 1.90 - 1.91 This module describes selectors and CSS properties which enable authors 1.92 to style user interface related states, element fragments, properties 1.93 and values. 1.94 @@ -134,9 +83,9 @@ 1.95 <a href="http://www.w3.org/TR/REC-CSS1#anchor-pseudo-classes">Section 2.1 of CSS1</a> [[CSS1]] 1.96 and <a href="http://www.w3.org/TR/CSS2/ui.html">Chapter 18 of CSS2</a> [[CSS2]] 1.97 introduced several user interface related pseudo-classes, properties and values. 1.98 -<a href="http://www.w3.org/TR/css3-selectors/#UIstates">Section 6.6.4 of Selectors</a> [[!SELECT]] also describes several additional user interface related pseudo-classes (and one pseudo-element). 1.99 +<a href="http://www.w3.org/TR/css3-selectors/#UIstates">Section 6.6.4 of Selectors</a> [[!SELECT]] also describes several additional user interface related pseudo-classes (and one pseudo-element). <a href="http://www.w3.org/TR/2000/WD-css3-userint-20000216">User Interface for CSS3 (16 February 2000)</a> introduced several new user interface related features. 1.100 1.101 -This Working Draft extends them to provide the ability, through CSS, 1.102 +This Working Draft incorporates and extends them to provide the ability, through CSS, 1.103 to style elements based upon additional user interface states, 1.104 to style fragments of user interface elements, and to alter the 1.105 dynamic presentation of elements in ways previously only available through specific HTML4/XHTML1 elements and attributes. 1.106 @@ -150,8 +99,6 @@ 1.107 dynamic presentation related features in HTML4/XHTML1. 1.108 <li>Introduce directional navigation properties to assist in the construction of 1.109 user interfaces which make use of a directional navigation model. 1.110 -<li>Introduce properties and values to specify icon presentations for 1.111 -elements to enhance accessibility. 1.112 </ul> 1.113 1.114 <h2 id="dependencies">Dependencies on other modules</h2> 1.115 @@ -179,150 +126,23 @@ 1.116 <li>[[HTML401]] 1.117 <li>[[HTML5]] 1.118 <li>[[UAAG10]] 1.119 -<li>[[XML10]] 1.120 -<li>[[XHTML10]] 1.121 -<li>[[XHTML11]] 1.122 -<li>[[XFORMS11]] 1.123 </ul> 1.124 1.125 This specification does not define what is a form element. 1.126 1.127 <h2 id="selectors">User Interface Selectors</h2> 1.128 1.129 -<h3 id="pseudo-classes">User interface states: pseudo-classes</h3> 1.130 - 1.131 -The Selectors specification <a href="http://www.w3.org/TR/css3-selectors/#UIstates">defines several user interface selectors</a> ([[!SELECT]], sections 6.6.1 and 6.6.4) 1.132 -which represent user interface states: 1.133 -<ul><li id="pseudo-hover"><a href="http://www.w3.org/TR/css3-selectors/#useraction-pseudos">:hover</a> 1.134 - <li id="pseudo-active"><a href="http://www.w3.org/TR/css3-selectors/#useraction-pseudos">:active</a> 1.135 - <li id="pseudo-focus"><a href="http://www.w3.org/TR/css3-selectors/#useraction-pseudos">:focus</a> 1.136 - <li id="pseudo-enabled"><a href="http://www.w3.org/TR/css3-selectors/#enableddisabled">:enabled</a> 1.137 - <li id="pseudo-disabled"><a href="http://www.w3.org/TR/css3-selectors/#enableddisabled">:disabled</a> 1.138 - <li id="pseudo-checked"><a href="http://www.w3.org/TR/css3-selectors/#checked">:checked</a> 1.139 - <li id="pseudo-indeterminate"><a href="http://www.w3.org/TR/css3-selectors/#indeterminate">:indeterminate</a> 1.140 -</ul> 1.141 - 1.142 -These pseudo-classes as defined by [[!SELECT]] are 1.143 -included in this specification by reference. 1.144 - 1.145 -CSS 2.1 [[!CSS21]] specifies additional details 1.146 -for some of the selectors mentioned, above and beyond Selectors. 1.147 - 1.148 - 1.149 -<h4 id="active">:active details</h4> 1.150 - 1.151 -In addition, on systems with more than one mouse button, 1.152 -:active is clarified to apply only to the primary 1.153 -or primary activation button (typically the "left" mouse button), 1.154 -and any aliases thereof. 1.155 - 1.156 -<h4 id="indeterminate"> 1.157 -The indeterminate-value pseudo-class '':indeterminate''</h4> 1.158 - 1.159 -The '':indeterminate'' pseudo-class applies 1.160 -to UI elements whose value is in an indeterminate state. 1.161 -For example, radio and checkbox elements 1.162 -can be toggled between checked and unchecked states, 1.163 -but are sometimes in an indeterminate state, 1.164 -neither checked nor unchecked. 1.165 -Similarly a progress meter can be in an indeterminate state 1.166 -when the percent completion is unknown. 1.167 - 1.168 -Like the :checked pseudo-class, 1.169 -'':indeterminate'' applies to all media. 1.170 -Components of a radio-group initialized with no pre-selected choice, 1.171 -for example, would be '':indeterminate'' 1.172 -even in a static display. 1.173 - 1.174 - 1.175 -<h4 id="new-pseudo-classes" class="no-num no-toc">New user interface state pseudo-classes</h4> 1.176 - 1.177 -In addition to the above-mentioned pseudo-classes, 1.178 -this specification introduces several new pseudo-classes 1.179 -to define additional user interface states. 1.180 -<ul> 1.181 - <li>:default 1.182 - <li>:valid 1.183 - <li>:invalid 1.184 - <li>:in-range 1.185 - <li>:out-of-range 1.186 - <li>:required 1.187 - <li>:optional 1.188 - <li>:read-only 1.189 - <li>:read-write 1.190 -</ul> 1.191 - 1.192 -Specifically, these new states (except for :default) are provided 1.193 -as a way to style elements which are in the respective states as defined by XForms [[XFORMS11]]. 1.194 - 1.195 -<h4 id="pseudo-default">:default</h4> 1.196 - 1.197 -The :default selector applies to the one or more UI elements 1.198 -that are the default among a set of similar elements. 1.199 -This selector typically applies to context menu items, 1.200 -buttons, and select lists/menus. 1.201 - 1.202 -One example is the default submit button among a set of buttons. 1.203 -Another example is the default option from a popup menu. 1.204 -Multiple elements in a select-many group could have multiple :default elements, 1.205 -like a selection of pizza toppings for example. 1.206 - 1.207 -<h4 id="pseudo-validity"><span id="pseudo-valid">:valid</span> 1.208 -and <span id="pseudo-invalid">:invalid</span></h4> 1.209 - 1.210 -An element is :valid or :invalid when it is, 1.211 -respectively, valid or invalid with respect to data validity semantics 1.212 -defined by a different specification (e.g. [[XFORMS11]]). 1.213 -An element which lacks data validity semantics is neither :valid nor :invalid. 1.214 -This is different from an element which otherwise has no constraints. 1.215 -Such an element would always be :valid. 1.216 - 1.217 -<h4 id="pseudo-range"><span id="pseudo-in-range">:in-range</span> and <span id="pseudo-out-of-range">:out-of-range</span></h4> 1.218 - 1.219 -The :in-range and :out-of-range pseudo-classes apply only to elements that have range limitations. 1.220 -An element is :in-range or :out-of-range 1.221 -when the value that the element is bound to is in range or out of range 1.222 -of the presentation (e.g. visual or spoken representation) of the element respectively. 1.223 -An element that lacks data range limits or is not a form control is neither :in-range nor :out-of-range. 1.224 -E.g. a slider element with a value of 11 1.225 -presented as a slider control that only represents the values from 1-10 is :out-of-range. 1.226 -Another example is a menu element with a value of "E" 1.227 -that happens to be presented as a popup menu that only has choices "A", "B" and "C". 1.228 - 1.229 -<h4 id="pseudo-required-value"><span id="pseudo-required">:required</span> 1.230 -and <span id="pseudo-optional">:optional</span></h4> 1.231 - 1.232 -A form element is :required or :optional if a value for it 1.233 -is, respectively, required or optional before the form it belongs to is submitted. 1.234 -Elements that are not form elements are neither required nor optional. 1.235 - 1.236 -<h4 id="pseudo-ro-rw"><span id="pseudo-read-only">:read-only</span> 1.237 -and <span id="pseudo-read-write">:read-write</span></h4> 1.238 - 1.239 -An element whose contents are not user-alterable is :read-only. 1.240 -However, elements whose contents are user-alterable (such as text input fields) 1.241 -are considered to be in a :read-write state. 1.242 -In typical documents, most elements are :read-only. 1.243 -However it may be possible (e.g. in the context of an editor) for any element to become :read-write. 1.244 - 1.245 <h3 id="pseudo-elements">User interface element fragments: pseudo-elements</h3> 1.246 1.247 -In addition to the above-mentioned pseudo-element, 1.248 -this specification introduces four new pseudo-elements 1.249 +This specification introduces two new pseudo-elements 1.250 to provide access to additional user interface element fragments. 1.251 <ul> 1.252 <li>::value 1.253 <li>::choices 1.254 - <li>::repeat-item 1.255 - <li>::repeat-index 1.256 </ul> 1.257 1.258 -Specifically, these new pseudo-elements are provided 1.259 -as a way to style user interface fragments 1.260 -as defined by XForms [[XFORMS11]]. 1.261 - 1.262 -Note: The ::value, ::choices, ::repeat-item, and ::repeat-index 1.263 -pseudo-elements are all at risk. 1.264 +Note: The ::value and ::choices 1.265 +pseudo-elements are at risk. 1.266 1.267 <h4 id="pseudo-value">::value</h4> 1.268 1.269 @@ -332,43 +152,6 @@ 1.270 selects the representation of just the data value itself, 1.271 in order to style its appearance. 1.272 1.273 -<div class="example"><p style="display:none">Example(s): 1.274 -<h4 id="value-example" class="no-num no-toc">fictional markup and illustration</h4> 1.275 - 1.276 -Here is an example which illustrates the ::value of a text input field 1.277 -with fictional markup which is then styled with CSS. 1.278 - 1.279 -sample XForms fragment with fictional markup: 1.280 -<pre><code class="lang-markup"> 1.281 -<input> 1.282 - <label>Zip code<label> 1.283 - <em><input::value/></em> 1.284 -</input> 1.285 -</code></pre> 1.286 - 1.287 -sample CSS: 1.288 -<pre><code class="lang-css"> 1.289 -input { border:dashed } 1.290 -label { border:dotted } 1.291 -input::value { border:solid } 1.292 -</code></pre> 1.293 - 1.294 -an HTML+CSS approximation of this example 1.295 - 1.296 -<p> 1.297 -<span style="border:dashed;display:inline-block;padding:10px"> 1.298 - <label 1.299 - style="border:dotted;display:inline-block;padding:2px;margin:0;font-size:1em" 1.300 - >Zip code</label> 1.301 - <input type="text" 1.302 - style="border:solid;display:inline-block;padding:2px;margin:0;font-size:1em" 1.303 - value="94117"> 1.304 -</span> 1.305 - 1.306 -Spacing (in the form of padding) has been added to the above approximation 1.307 -to separate the borders and make the individual (pseudo-)elements easier to distinguish. 1.308 -</div> 1.309 - 1.310 The ''::value'' pseudo-element is similar to an inline-level element, 1.311 but with certain restrictions. 1.312 The following properties apply to ''::value'' 1.313 @@ -390,157 +173,6 @@ 1.314 A list of radio buttons can also be selected with the ''::choices'' pseudo-element, 1.315 and the currently chosen radio button can be selected with the ''::value'' pseudo-element. 1.316 1.317 -<h4 id="pseudo-repeat-item">::repeat-item</h4> 1.318 - 1.319 -The ''::repeat-item'' pseudo-element represents a single item from a repeating sequence. 1.320 -It is generated as a parent to all the elements in a single repeating item. 1.321 -Each ''::repeat-item'' is associated with a particular instance data node, 1.322 -and is affected by the model item properties (e.g. '<code>relevant</code>') found there, 1.323 -as the related style properties will cascade to the child elements. 1.324 - 1.325 -<h4 id="pseudo-repeat-index">::repeat-index</h4> 1.326 - 1.327 -The ::repeat-index pseudo-element represents the current item of a repeating sequence. 1.328 -It takes the place of the ::repeat-item as a parent of all the elements in the index repeating item. 1.329 - 1.330 -Note: Any style declarations that an author wants to apply to all repeat items, 1.331 -including the index, 1.332 -must be done so by using both ::repeat-item and ::repeat-index selectors. 1.333 -Styles that are only applied to ::repeat-item will not automatically be applied to the respective ::repeat-index. 1.334 - 1.335 -<div class="example"><p style="display:none">Example(s): 1.336 -<h4 id="repeat-item-index-example" class="no-num no-toc">::repeat-item and ::repeat-index fictional markup</h4> 1.337 - 1.338 -Here is an example that illustrates both ::repeat-item and ::repeat-index, 1.339 -since they are often both available and used at the same time. 1.340 -Assume appropriate namespace declarations were made in a header somewhere 1.341 -preceding the code in the example. 1.342 - 1.343 -The following markup snippet uses XHTML and XForms: 1.344 -<pre><code class="lang-markup"> 1.345 -<html:table xforms:repeat-nodeset="..."> 1.346 - <html:tr> 1.347 - <html:td><xforms:input ref="..."/><xforms:input ref="..."/></html:td> 1.348 - </html:tr> 1.349 -</html:table> 1.350 -</code></pre> 1.351 - 1.352 -The following style rules are used to style all the repeated items and the current repeated item. 1.353 -<pre><code class="lang-css"> 1.354 -html|tr::repeat-item { outline: medium solid; color:gray } 1.355 -html|tr::repeat-index { outline: medium dashed; color:black } 1.356 -</code></pre> 1.357 - 1.358 -The following fictional markup shows 1.359 -the state of the above markup 1.360 -when through user interaction the XForm contains three of the repeated items, 1.361 -where the third item is current. 1.362 -<pre><code class="lang-markup"> 1.363 -<html:table xforms:repeat-nodeset="..."> 1.364 - <em><html:tr::repeat-item></em> 1.365 - <html:tr> 1.366 - <html:td><xforms:input ref="..."/><xforms:input ref="..."/></html:td> 1.367 - </html:tr> 1.368 - <em></html:tr::repeat-item></em> 1.369 - <em><html:tr::repeat-item></em> 1.370 - <html:tr> 1.371 - <html:td><xforms:input ref="..."/><xforms:input ref="..."/></html:td> 1.372 - </html:tr> 1.373 - <em></html:tr::repeat-item></em> 1.374 - <em><html:tr::repeat-index></em> 1.375 - <html:tr> 1.376 - <html:td><xforms:input ref="..."/><xforms:input ref="..."/></html:td> 1.377 - </html:tr> 1.378 - <em></html:tr::repeat-index></em> 1.379 -</html:table> 1.380 -</code></pre> 1.381 -</div> 1.382 - 1.383 -Note: The ::repeat-index pseudo-element takes the place of the ::repeat-item 1.384 -rather than being nested inside as a separate element. 1.385 -Thus just like :link or :visited are mutually exclusive for selecting hyperlinks, 1.386 -only one will exist and apply to a particular repeated item at any point. 1.387 - 1.388 -<h2 id="icons">Element icons</h2> 1.389 - 1.390 -<h3 id="content-addition">'content' property addition</h3> 1.391 - 1.392 -<table class="propdef"><tbody> 1.393 -<tr><th>Name:</th><td><dfn>content</dfn></td></tr> 1.394 -<tr><th>New Value(s):</th><td title="">icon</td></tr> 1.395 - 1.396 -<tr><th>Initial:</th><td>same as CSS 2.1</td></tr> 1.397 -<tr><th>Applies to:</th><td>same as CSS 2.1</td></tr> 1.398 -<tr><th>Inherited:</th><td>same as CSS 2.1</td></tr> 1.399 -<tr><th>Percentages:</th><td>same as CSS 2.1</td></tr> 1.400 -<tr><th>Media:</th><td>same as CSS 2.1</td></tr> 1.401 -<tr><th>Computed value:</th><td>the keyword ''icon'' if specified as such, otherwise same as CSS 2.1</td></tr> 1.402 -<tr><th>Animatable:</th><td>no</td></tr> 1.403 -</tbody></table> 1.404 - 1.405 -<dl> 1.406 -<dt>icon</dt> 1.407 -<dd>The (pseudo-)element is replaced in its entirety by the resource referenced by its 'icon' property, and treated as a replaced element. 1.408 -</dd> 1.409 -</dl> 1.410 - 1.411 -Note: It is expected that the next draft of the CSS3 Generated Content module [[CSS3GENCON]] 1.412 -will include and superset this functionality. 1.413 - 1.414 -Note: The ''icon'' value is at risk. 1.415 - 1.416 -<h3 id="icon">'icon' property</h3> 1.417 - 1.418 -<table class="propdef"><tbody> 1.419 -<tr><th>Name:</th><td><dfn>icon</dfn></td></tr> 1.420 -<tr><th>Value:</th><td>auto | <uri> [, <uri>]* | inherit</td></tr> 1.421 -<tr><th>Initial:</th><td>auto</td></tr> 1.422 -<tr><th>Applies to:</th><td>all elements</td></tr> 1.423 -<tr><th>Inherited:</th><td>no</td></tr> 1.424 -<tr><th>Percentages:</th><td>N/A</td></tr> 1.425 -<tr><th>Media:</th><td>all</td></tr> 1.426 -<tr><th>Computed value:</th><td>as specified, except with any relative URLs converted to absolute</td></tr> 1.427 -<tr><th>Animatable:</th><td>no</td></tr> 1.428 -</tbody></table> 1.429 - 1.430 -<dl> 1.431 -<dt>auto</dt> 1.432 -<dd>Use a default generic icon provided by the user agent.</dd> 1.433 -<dt><uri></dt> 1.434 -<dd>URIs (see [[!URI]], [[!RFC1738]] and [[!RFC1808]]) provide a way of identifying resources. 1.435 -The <uri> value(s) in this property refer to one or more icons in a comma delimited list. 1.436 -The user agent loads the referenced icons one by one until it finds one that it is able to render. 1.437 -This permits the usage of multiple different icon formats for various platforms, 1.438 -and various media for that matter.</dd> 1.439 -</dl> 1.440 - 1.441 -The 'icon' property provides the author 1.442 -the ability to style any arbitrary element with an iconic equivalent. 1.443 -An element's icon is not used/rendered 1.444 -unless the 'content' property is set 1.445 -to the value ''icon''(see above). 1.446 -Documents whose elements have icons assigned to them 1.447 -can be more easily viewed by users who find too much text distracting. 1.448 - 1.449 -<div class="example"><p style="display:none">Example(s): 1.450 -<h4 id="icon-example" class="no-num no-toc">Representing elements with icons</h4> 1.451 - 1.452 -This example uses the above icon features to display icons in place of images and objects. 1.453 -<pre><code class="lang-css"> 1.454 -img,object { content:icon } 1.455 - /* note that the CSS3 Generated Content module [[CSS3GENCON]] 1.456 - expands the 'content'property to apply to all elements. */ 1.457 - 1.458 -img { icon:url(imgicon.png); } 1.459 - /* provide a custom icon for images */ 1.460 - 1.461 -object { icon:url(objicon.png); } 1.462 - /* provide a different custom icon for objects */ 1.463 -</code></pre> 1.464 -</div> 1.465 - 1.466 -Note: The 'icon' property is at risk. 1.467 - 1.468 <h2 id="box-model">Box Model addition</h2> 1.469 1.470 <h3 id="box-sizing">'box-sizing' property</h3> 1.471 @@ -1459,72 +1091,8 @@ 1.472 </div> 1.473 1.474 1.475 - 1.476 <h3 id="keyboard">Keyboard control</h3> 1.477 1.478 -<h4 id="nav-index">Sequential navigation order: the 'nav-index' property</h4> 1.479 - 1.480 -The 'nav-index' property is an input-method-neutral way of specifying the sequential navigation order (also known as "tabbing order"). 1.481 -<table class="propdef"> 1.482 -<tr><th>Name:</th><td><dfn>nav-index</dfn></td></tr> 1.483 -<tr><th>Value: </th><td>auto | <number> | inherit</td></tr> 1.484 -<tr><th>Initial:</th><td>auto</td></tr> 1.485 -<tr><th>Applies to:</th><td>all enabled elements</td></tr> 1.486 -<tr><th>Inherited:</th><td>no</td></tr> 1.487 -<tr><th>Percentages:</th><td>n/a</td></tr> 1.488 -<tr><th>Media:</th><td>interactive</td></tr> 1.489 -<tr><th>Computed value:</th><td>specified value.</td></tr> 1.490 -<tr><th>Animatable:</th><td>as <a href="http://dev.w3.org/csswg/css3-transitions/#animtype-number">number</a></td></tr> 1.491 -</table> 1.492 -<dl> 1.493 -<dt>auto</dt> 1.494 -<dd>The element's sequential navigation order is assigned automatically by the user agent.</dd> 1.495 -<dt><number></dt> 1.496 -<dd>The number (which is non-zero and positive) indicates 1.497 -the sequential navigation order for the element. 1.498 -''1'' means first. 1.499 -Elements with the same nav-index value are navigated 1.500 -in document order when that nav-index value is being navigated. 1.501 -</dd> 1.502 -</dl> 1.503 - 1.504 -This property is a replacement for the HTML4/XHTML1 attribute 1.505 -'<a href="http://www.w3.org/TR/html401/interact/forms.html#h-17.11.1">tabindex</a>' ([[HTML401]], section 17.11.1). 1.506 -Borrowed and slightly rephrased from the HTML4 Recommendation: 1.507 - 1.508 -This property specifies the position of the current element in the sequential navigation order for the current document. 1.509 - 1.510 -The sequential navigation order defines the order 1.511 -in which elements will receive focus when navigated by the user via the keyboard. 1.512 -The sequential navigation order may include elements nested within other elements. 1.513 - 1.514 -Elements that may receive focus should be navigated by user agents according to the following rules: 1.515 -<ol> 1.516 -<li>Those elements that support the nav-index property 1.517 -and assign a positive value to it are navigated first. 1.518 -Navigation proceeds from the element with the lowest nav-index value 1.519 -to the element with the highest value. 1.520 -Values need not be sequential nor must they begin with any particular value. 1.521 -Elements that have identical nav-index values should be navigated in document order. 1.522 -<li>Those elements that do not support the nav-index property 1.523 -or support it and assign it a value of ''auto'' 1.524 -are navigated next. 1.525 -These elements are navigated in document order. 1.526 -<li>Elements that are disabled do not participate in the sequential navigation order. 1.527 -</ol> 1.528 - 1.529 -The actual key sequence that causes sequential navigation or element activation 1.530 -depends on the configuration of the user agent 1.531 -(e.g., the "tab" key is often used for sequential navigation, 1.532 -and the "enter" key is used to activate a selected element). 1.533 - 1.534 -User agents may also define key sequences to navigate the sequential navigation order in reverse. 1.535 -When the end (or beginning) of the tabbing order is reached, 1.536 -user agents may circle back to the beginning (or end). 1.537 -The key combination "shift-tab" is often used for reverse sequential navigation. 1.538 - 1.539 -Note: The 'nav-index' property is at risk. 1.540 - 1.541 <h4 id="nav-dir">Directional focus navigation: the 'nav-up', 'nav-right', 'nav-down', 'nav-left' properties</h4> 1.542 <table class="propdef"><tbody> 1.543 <tr><th>Name: </th><td><dfn>nav-up</dfn>, <dfn>nav-right</dfn>, <dfn>nav-down</dfn>, <dfn>nav-left</dfn></td></tr> 1.544 @@ -1587,28 +1155,24 @@ 1.545 1.546 button#b1 { 1.547 top:0; left:50%; 1.548 - nav-index:1; 1.549 nav-right:#b2; nav-left:#b4; 1.550 nav-down:#b2; nav-up:#b4; 1.551 } 1.552 1.553 button#b2 { 1.554 top:50%; left:100%; 1.555 - nav-index:2; 1.556 nav-right:#b3; nav-left:#b1; 1.557 nav-down:#b3; nav-up:#b1; 1.558 } 1.559 1.560 button#b3 { 1.561 top:100%; left:50%; 1.562 - nav-index:3; 1.563 nav-right:#b4; nav-left:#b2; 1.564 nav-down:#b4; nav-up:#b2; 1.565 } 1.566 1.567 button#b4 { 1.568 top:50%; left:0; 1.569 - nav-index:4; 1.570 nav-right:#b1; nav-left:#b3; 1.571 nav-down:#b1; nav-up:#b3; 1.572 } 1.573 @@ -1891,9 +1455,6 @@ 1.574 content: check; 1.575 } 1.576 1.577 -*[tabindex] { nav-index:attr(tabindex,number) } 1.578 - 1.579 - 1.580 /* Though FRAME resizing is not directly addressed by this specification, 1.581 the following rules may provide an approximation of reasonable behavior. */ 1.582
2.1 --- a/css-ui/Overview.html Fri Dec 19 18:52:50 2014 -0800 2.2 +++ b/css-ui/Overview.html Wed Dec 24 14:36:33 2014 -0800 2.3 @@ -1,9 +1,20 @@ 2.4 -<!DOCTYPE html><html lang=en><head> 2.5 - <meta content="text/html; charset=utf-8" http-equiv=Content-Type> 2.6 - <title>CSS Basic User Interface Module Level 3 (CSS3 UI)</title> 2.7 - <link href=../default.css rel=stylesheet type=text/css> 2.8 - <link href=../csslogo.ico rel="shortcut icon" type=image/x-icon> 2.9 - <style> 2.10 +<!doctype html> 2.11 +<html lang="en"> 2.12 + <head> 2.13 + 2.14 + <meta content="text/html; charset=utf-8" http-equiv="Content-Type"> 2.15 + 2.16 + 2.17 + <title>CSS Basic User Interface Module Level 3 (CSS3 UI)</title> 2.18 + 2.19 + 2.20 + <link href="../default.css" rel="stylesheet" type="text/css"> 2.21 + 2.22 + 2.23 + <link href="../csslogo.ico" rel="shortcut icon" type="image/x-icon"> 2.24 + 2.25 + 2.26 + <style> 2.27 body { 2.28 background: url("https://www.w3.org/StyleSheets/TR/logo-ED") top left no-repeat white; 2.29 background-attachment: fixed; 2.30 @@ -45,12 +56,16 @@ 2.31 list-style: none; 2.32 } 2.33 </style> 2.34 - 2.35 - <script defer src=//test.csswg.org/harness/annotate.js#css-ui-3_dev/css-ui-3 type=text/javascript></script> 2.36 -<script>self = (typeof window !== 'undefined') 2.37 + 2.38 + 2.39 + 2.40 + <script defer="" src="//test.csswg.org/harness/annotate.js#css-ui-3_dev/css-ui-3" type="text/javascript"></script> 2.41 + 2.42 + 2.43 + <script>self = (typeof window !== 'undefined') 2.44 ? window // if in browser 2.45 : ( 2.46 - (typeof WorkerGlobalScope !== 'undefined' && self instanceof WorkerGlobalScope) 2.47 + (typeof WorkerGlobalScope !== 'undefined' && self instanceof WorkerGlobalScope) 2.48 ? self // if in worker 2.49 : {} // if in node js 2.50 ); 2.51 @@ -74,7 +89,7 @@ 2.52 } else if (_.util.type(tokens) === 'Array') { 2.53 return tokens.map(_.util.encode); 2.54 } else { 2.55 - return tokens.replace(/&/g, '&').replace(/</g, '<').replace(/\u00a0/g, ' '); 2.56 + return tokens.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/\u00a0/g, ' '); 2.57 } 2.58 }, 2.59 2.60 @@ -172,7 +187,7 @@ 2.61 2.62 var elements = document.querySelectorAll('pre[class*="language-"], [class*="language-"] pre, pre[class*="lang-"], [class*="lang-"] pre'); 2.63 for (var i=0, element; element = elements[i++];) { 2.64 - if (element.firstElementChild && element.firstElementChild.tagName.toLowerCase() == "code") { 2.65 + if (element.firstElementChild && element.firstElementChild.tagName.toLowerCase() == "code") { 2.66 // Already handled by the previous loop 2.67 continue; 2.68 } 2.69 @@ -188,7 +203,7 @@ 2.70 // Find language 2.71 var language, grammar, parent = element; 2.72 2.73 - while (parent && !lang.test(parent.className)) { 2.74 + while (parent && !lang.test(parent.className)) { 2.75 parent = parent.parentNode; 2.76 } 2.77 2.78 @@ -226,7 +241,7 @@ 2.79 2.80 _.hooks.run('before-highlight', env); 2.81 2.82 - if (async && self.Worker) { 2.83 + if (async && self.Worker) { 2.84 var worker = new Worker(_.filename); 2.85 2.86 worker.onmessage = function(evt) { 2.87 @@ -236,7 +251,7 @@ 2.88 2.89 env.element.innerHTML = env.highlightedCode; 2.90 2.91 - callback && callback.call(env.element); 2.92 + callback && callback.call(env.element); 2.93 _.hooks.run('after-highlight', env); 2.94 }; 2.95 2.96 @@ -252,7 +267,7 @@ 2.97 2.98 env.element.innerHTML = env.highlightedCode; 2.99 2.100 - callback && callback.call(element); 2.101 + callback && callback.call(element); 2.102 2.103 _.hooks.run('after-highlight', env); 2.104 } 2.105 @@ -286,7 +301,7 @@ 2.106 var patterns = grammar[token]; 2.107 patterns = (_.util.type(patterns) === "Array") ? patterns : [patterns]; 2.108 2.109 - for (var j = 0; j < patterns.length; ++j) { 2.110 + for (var j = 0; j < patterns.length; ++j) { 2.111 var pattern = patterns[j], 2.112 inside = pattern.inside, 2.113 lookbehind = !!pattern.lookbehind, 2.114 @@ -295,7 +310,7 @@ 2.115 2.116 pattern = pattern.pattern || pattern; 2.117 2.118 - for (var i=0; i<strarr.length; i++) { // Don’t cache length as it changes during the loop 2.119 + for (var i=0; i<strarr.length; i++) { // Don’t cache length as it changes during the loop 2.120 2.121 var str = strarr[i]; 2.122 2.123 @@ -416,7 +431,7 @@ 2.124 attributes += name + '="' + (env.attributes[name] || '') + '"'; 2.125 } 2.126 2.127 - return '<' + env.tag + ' class="' + env.classes.join(' ') + '" ' + attributes + '>' + env.content + '</' + env.tag + '>'; 2.128 + return '<' + env.tag + ' class="' + env.classes.join(' ') + '" ' + attributes + '>' + env.content + '</' + env.tag + '>'; 2.129 2.130 }; 2.131 2.132 @@ -446,7 +461,7 @@ 2.133 if (script) { 2.134 _.filename = script.src; 2.135 2.136 - if (document.addEventListener && !script.hasAttribute('data-manual')) { 2.137 + if (document.addEventListener && !script.hasAttribute('data-manual')) { 2.138 document.addEventListener('DOMContentLoaded', _.highlightAll); 2.139 } 2.140 } 2.141 @@ -455,22 +470,22 @@ 2.142 2.143 })(); 2.144 2.145 -if (typeof module !== 'undefined' && module.exports) { 2.146 +if (typeof module !== 'undefined' && module.exports) { 2.147 module.exports = Prism; 2.148 } 2.149 ; 2.150 Prism.languages.markup = { 2.151 - 'comment': /<!--[\w\W]*?-->/g, 2.152 - 'prolog': /<\?.+?\?>/, 2.153 - 'doctype': /<!DOCTYPE.+?>/, 2.154 - 'cdata': /<!\[CDATA\[[\w\W]*?]]>/i, 2.155 + 'comment': /<!--[\w\W]*?-->/g, 2.156 + 'prolog': /<\?.+?\?>/, 2.157 + 'doctype': /<!DOCTYPE.+?>/, 2.158 + 'cdata': /<!\[CDATA\[[\w\W]*?]]>/i, 2.159 'tag': { 2.160 - pattern: /<\/?[\w:-]+\s*(?:\s+[\w:-]+(?:=(?:("|')(\\?[\w\W])*?\1|[^\s'">=]+))?\s*)*\/?>/gi, 2.161 + pattern: /<\/?[\w:-]+\s*(?:\s+[\w:-]+(?:=(?:("|')(\\?[\w\W])*?\1|[^\s'">=]+))?\s*)*\/?>/gi, 2.162 inside: { 2.163 'tag': { 2.164 - pattern: /^<\/?[\w:-]+/i, 2.165 + pattern: /^<\/?[\w:-]+/i, 2.166 inside: { 2.167 - 'punctuation': /^<\/?/, 2.168 + 'punctuation': /^<\/?/, 2.169 'namespace': /^[\w-]+?:/ 2.170 } 2.171 }, 2.172 @@ -490,14 +505,14 @@ 2.173 2.174 } 2.175 }, 2.176 - 'entity': /\&#?[\da-z]{1,8};/gi 2.177 + 'entity': /\&#?[\da-z]{1,8};/gi 2.178 }; 2.179 2.180 // Plugin to make entity title show the real entity, idea by Roman Komarov 2.181 Prism.hooks.add('wrap', function(env) { 2.182 2.183 if (env.type === 'entity') { 2.184 - env.attributes['title'] = env.content.replace(/&/, '&'); 2.185 + env.attributes['title'] = env.content.replace(/&amp;/, '&'); 2.186 } 2.187 }); 2.188 ; 2.189 @@ -521,10 +536,10 @@ 2.190 if (Prism.languages.markup) { 2.191 Prism.languages.insertBefore('markup', 'tag', { 2.192 'style': { 2.193 - pattern: /<style[\w\W]*?>[\w\W]*?<\/style>/ig, 2.194 + pattern: /<style[\w\W]*?>[\w\W]*?<\/style>/ig, 2.195 inside: { 2.196 'tag': { 2.197 - pattern: /<style[\w\W]*?>|<\/style>/ig, 2.198 + pattern: /<style[\w\W]*?>|<\/style>/ig, 2.199 inside: Prism.languages.markup.tag.inside 2.200 }, 2.201 rest: Prism.languages.css 2.202 @@ -547,7 +562,8 @@ 2.203 'entity': /\\[\da-f]{1,8}/gi, 2.204 'number': /[\d%\.]+/g 2.205 });; 2.206 -</script><style>/* http://prismjs.com/download.html?themes=prism&languages=clike */ 2.207 +</script> 2.208 + <style>/* http://prismjs.com/download.html?themes=prism&languages=clike */ 2.209 /** 2.210 * prism.js default theme for JavaScript, CSS and HTML 2.211 * Based on dabblet (http://dabblet.com) 2.212 @@ -679,25 +695,61 @@ 2.213 .token.entity { 2.214 cursor: help; 2.215 } 2.216 -</style></head> 2.217 -<body class=h-entry> 2.218 -<div class=head> 2.219 - <p data-fill-with=logo><a class=logo href=http://www.w3.org/> 2.220 - <img alt=W3C height=48 src=https://www.w3.org/Icons/w3c_home width=72> 2.221 +</style> 2.222 + </head> 2.223 + 2.224 + 2.225 + <body class="h-entry"> 2.226 + 2.227 + <div class="head"> 2.228 + 2.229 + <p data-fill-with="logo"><a class="logo" href="http://www.w3.org/"> 2.230 + <img alt="W3C" height="48" src="https://www.w3.org/Icons/w3c_home" width="72"> 2.231 </a> 2.232 </p> 2.233 - <h1 class="p-name no-ref" id=title>CSS Basic User Interface Module Level 3 (CSS3 UI)</h1> 2.234 - <h2 class="no-num no-toc no-ref heading settled" id=subtitle><span class=content>Editor’s Draft, 2.235 - <time class=dt-updated datetime=20141212>12 December 2014</time></span></h2> 2.236 - <div data-fill-with=spec-metadata><dl><dt>This version:<dd><a class=u-url href=http://dev.w3.org/csswg/css-ui/>http://dev.w3.org/csswg/css-ui/</a><dt>Latest version:<dd><a href=http://www.w3.org/TR/css3-ui/>http://www.w3.org/TR/css3-ui/</a><dt>Previous Versions:<dd><a href=http://www.w3.org/TR/2012/WD-css3-ui-20120117/ rel=previous>http://www.w3.org/TR/2012/WD-css3-ui-20120117/</a><dt>Feedback:<dd><span><a href="mailto:www-style@w3.org?subject=%5Bcss-ui%5D%20feedback">www-style@w3.org</a> with subject line “<kbd>[css-ui] <var>… message topic …</var></kbd>” (<a href=http://lists.w3.org/Archives/Public/www-style/ rel=discussion>archives</a>)</span><dt>Test Suite:<dd><a href=http://test.csswg.org/suites/css-ui-3_dev/nightly-unstable/>http://test.csswg.org/suites/css-ui-3_dev/nightly-unstable/</a><dt class=editor>Editors:<dd class=editor><div class="p-author h-card vcard"><a class="p-name fn u-url url" href=http://tantek.com>Tantek Çelik</a> (<a class="p-org org" href=http://www.mozilla.org>Mozilla</a>) <a class="u-email email" href=mailto:tantek@cs.stanford.edu>tantek@cs.stanford.edu</a></div><dd class=editor><div class="p-author h-card vcard"><span class="p-name fn"></span></div><dt>Issue Tracking:<dd><span>http://wiki.csswg.org/spec/css3-ui</span></dl></div> 2.237 - <div data-fill-with=warning></div> 2.238 - <p class=copyright data-fill-with=copyright><a href=http://www.w3.org/Consortium/Legal/ipr-notice#Copyright>Copyright</a> © 2014 <a href=http://www.w3.org/><abbr title="World Wide Web Consortium">W3C</abbr></a><sup>®</sup> (<a href=http://www.csail.mit.edu/><abbr title="Massachusetts Institute of Technology">MIT</abbr></a>, <a href=http://www.ercim.eu/><abbr title="European Research Consortium for Informatics and Mathematics">ERCIM</abbr></a>, <a href=http://www.keio.ac.jp/>Keio</a>, <a href=http://ev.buaa.edu.cn/>Beihang</a>), All Rights Reserved. W3C <a href=http://www.w3.org/Consortium/Legal/ipr-notice#Legal_Disclaimer>liability</a>, <a href=http://www.w3.org/Consortium/Legal/ipr-notice#W3C_Trademarks>trademark</a> and <a href=http://www.w3.org/Consortium/Legal/copyright-documents>document use</a> rules apply. 2.239 + 2.240 + <h1 class="p-name no-ref" id="title">CSS Basic User Interface Module Level 3 (CSS3 UI)</h1> 2.241 + 2.242 + <h2 class="no-num no-toc no-ref heading settled" id="subtitle"><span class="content">Editor’s Draft, 2.243 + <time class="dt-updated" datetime="2014-12-24">24 December 2014</time></span></h2> 2.244 + 2.245 + <div data-fill-with="spec-metadata"> 2.246 + <dl> 2.247 + <dt>This version:</dt> 2.248 + <dd><a class="u-url" href="http://dev.w3.org/csswg/css-ui/">http://dev.w3.org/csswg/css-ui/</a></dd> 2.249 + <dt>Latest version:</dt> 2.250 + <dd><a href="http://www.w3.org/TR/css3-ui/">http://www.w3.org/TR/css3-ui/</a></dd> 2.251 + <dt>Previous Versions:</dt> 2.252 + <dd><a href="http://www.w3.org/TR/2012/WD-css3-ui-20120117/" rel="previous">http://www.w3.org/TR/2012/WD-css3-ui-20120117/</a></dd> 2.253 + <dt>Feedback:</dt> 2.254 + <dd><span><a href="mailto:www-style@w3.org?subject=%5Bcss-ui%5D%20feedback">www-style@w3.org</a> with subject line “<kbd>[css-ui] <var>… message topic …</var></kbd>” (<a href="http://lists.w3.org/Archives/Public/www-style/" rel="discussion">archives</a>)</span></dd> 2.255 + <dt>Test Suite:</dt> 2.256 + <dd><a href="http://test.csswg.org/suites/css-ui-3_dev/nightly-unstable/">http://test.csswg.org/suites/css-ui-3_dev/nightly-unstable/</a></dd> 2.257 + <dt class="editor">Editors:</dt> 2.258 + <dd class="editor"> 2.259 + <div class="p-author h-card vcard"><a class="p-name fn u-url url" href="http://tantek.com">Tantek Çelik</a> (<a class="p-org org" href="http://www.mozilla.org">Mozilla</a>) <a class="u-email email" href="mailto:tantek@cs.stanford.edu">tantek@cs.stanford.edu</a></div> 2.260 + </dd> 2.261 + <dd class="editor"> 2.262 + <div class="p-author h-card vcard"><span class="p-name fn"></span></div> 2.263 + </dd> 2.264 + <dt>Issue Tracking:</dt> 2.265 + <dd><span>http://wiki.csswg.org/spec/css3-ui</span></dd> 2.266 + </dl> 2.267 + </div> 2.268 + 2.269 + <div data-fill-with="warning"></div> 2.270 + 2.271 + <p class="copyright" data-fill-with="copyright"><a href="http://www.w3.org/Consortium/Legal/ipr-notice#Copyright">Copyright</a> © 2014 <a href="http://www.w3.org/"><abbr title="World Wide Web Consortium">W3C</abbr></a><sup>®</sup> (<a href="http://www.csail.mit.edu/"><abbr title="Massachusetts Institute of Technology">MIT</abbr></a>, <a href="http://www.ercim.eu/"><abbr title="European Research Consortium for Informatics and Mathematics">ERCIM</abbr></a>, <a href="http://www.keio.ac.jp/">Keio</a>, <a href="http://ev.buaa.edu.cn/">Beihang</a>), All Rights Reserved. W3C <a href="http://www.w3.org/Consortium/Legal/ipr-notice#Legal_Disclaimer">liability</a>, <a href="http://www.w3.org/Consortium/Legal/ipr-notice#W3C_Trademarks">trademark</a> and <a href="http://www.w3.org/Consortium/Legal/copyright-documents">document use</a> rules apply. 2.272 </p> 2.273 - <hr title="Separator for header"> 2.274 + 2.275 + <hr title="Separator for header"> 2.276 </div> 2.277 2.278 -<h2 class="no-num no-toc no-ref heading settled" id=abstract><span class=content>Abstract</span></h2> 2.279 -<div class=p-summary data-fill-with=abstract><p>This specification describes user interface related selectors, 2.280 + 2.281 + <h2 class="no-num no-toc no-ref heading settled" id="abstract"><span class="content">Abstract</span></h2> 2.282 + 2.283 + <div class="p-summary" data-fill-with="abstract"> 2.284 + <p>This specification describes user interface related selectors, 2.285 2.286 properties and values that are proposed for CSS level 3 2.287 to style HTML and XML (including XHTML). 2.288 @@ -706,578 +758,420 @@ 2.289 It uses various selectors, 2.290 properties and values to style basic user interface elements in a document.</p> 2.291 2.292 -<a href=http://www.w3.org/TR/CSS/>CSS</a> is a language for describing the rendering of structured documents 2.293 +<a href="http://www.w3.org/TR/CSS/">CSS</a> is a language for describing the rendering of structured documents 2.294 (such as HTML and XML) 2.295 on screen, on paper, in speech, etc.</div> 2.296 2.297 -<h2 class="no-num no-toc no-ref heading settled" id=status><span class=content>Status of this document</span></h2> 2.298 -<div data-fill-with=status><p> 2.299 + 2.300 + <h2 class="no-num no-toc no-ref heading settled" id="status"><span class="content">Status of this document</span></h2> 2.301 + 2.302 + <div data-fill-with="status"> 2.303 + <p> 2.304 This is a public copy of the editors’ draft. 2.305 It is provided for discussion only and may change at any moment. 2.306 Its publication here does not imply endorsement of its contents by W3C. 2.307 Don’t cite this document other than as work in progress. 2.308 2.309 -<p> 2.310 - The (<a href=http://lists.w3.org/Archives/Public/www-style/>archived</a>) public mailing list 2.311 +</p> 2.312 + <p> 2.313 + The (<a href="http://lists.w3.org/Archives/Public/www-style/">archived</a>) public mailing list 2.314 <a href="mailto:www-style@w3.org?Subject=%5Bcss-ui%5D%20PUT%20SUBJECT%20HERE">www-style@w3.org</a> 2.315 - (see <a href=http://www.w3.org/Mail/Request>instructions</a>) 2.316 + (see <a href="http://www.w3.org/Mail/Request">instructions</a>) 2.317 is preferred for discussion of this specification. 2.318 When sending e-mail, 2.319 please put the text “css-ui” in the subject, 2.320 preferably like this: 2.321 “[css-ui] <em>…summary of comment…</em>” 2.322 2.323 -<p> 2.324 - This document was produced by the <a href=http://www.w3.org/Style/CSS/members>CSS Working Group</a> 2.325 - (part of the <a href=http://www.w3.org/Style/>Style Activity</a>). 2.326 - 2.327 -<p> 2.328 +</p> 2.329 + <p> 2.330 + This document was produced by the <a href="http://www.w3.org/Style/CSS/members">CSS Working Group</a> 2.331 + (part of the <a href="http://www.w3.org/Style/">Style Activity</a>). 2.332 + 2.333 +</p> 2.334 + <p> 2.335 This document was produced by a group operating under 2.336 - the <a href=http://www.w3.org/Consortium/Patent-Policy-20040205/>5 February 2004 W3C Patent Policy</a>. 2.337 - W3C maintains a <a href=http://www.w3.org/2004/01/pp-impl/32061/status rel=disclosure>public list of any patent disclosures</a> 2.338 + the <a href="http://www.w3.org/Consortium/Patent-Policy-20040205/">5 February 2004 W3C Patent Policy</a>. 2.339 + W3C maintains a <a href="http://www.w3.org/2004/01/pp-impl/32061/status" rel="disclosure">public list of any patent disclosures</a> 2.340 made in connection with the deliverables of the group; 2.341 that page also includes instructions for disclosing a patent. 2.342 - An individual who has actual knowledge of a patent which the individual believes contains <a href=http://www.w3.org/Consortium/Patent-Policy-20040205/#def-essential>Essential Claim(s)</a> 2.343 - must disclose the information in accordance with <a href=http://www.w3.org/Consortium/Patent-Policy-20040205/#sec-Disclosure>section 6 of the W3C Patent Policy</a>. 2.344 - 2.345 -<p> 2.346 - This document is governed by the <a href=http://www.w3.org/2014/Process-20140801/>1 August 2014 W3C Process Document</a>. 2.347 -</div> 2.348 -<div data-fill-with=at-risk><p>The following features are at-risk, and may be dropped during the CR period: 2.349 -<ul><li>::value ::choices ::repeat-item ::repeat-index pseudo-elements<li><a class=property data-link-type=propdesc href=#propdef-box-sizing>box-sizing</a> property value: padding-box<li><a class=property data-link-type=propdesc href=#propdef-content>content</a> property value: icon<li><a class=property data-link-type=propdesc href=#propdef-icon>icon</a> property<li><a class=property data-link-type=propdesc href=#propdef-ime-mode>ime-mode</a> property<li><a class=property data-link-type=propdesc href=#propdef-nav-index>nav-index</a> property<li><a class=property data-link-type=propdesc href=#propdef-text-overflow>text-overflow</a> property value: <string><li><a class=property data-link-type=propdesc href=#propdef-text-overflow>text-overflow</a> property 2-value syntax and definition</ul></div> 2.350 - 2.351 -<h2 class="no-num no-toc no-ref heading settled" id=contents><span class=content>Table of Contents</span></h2> 2.352 -<div data-fill-with=table-of-contents role=navigation><ul class=toc role=directory><li><a href=#intro><span class=secno>1</span> <span class=content>Introduction</span></a><ul class=toc><li><a href=#purpose><span class=secno>1.1</span> <span class=content>Purpose</span></a></ul><li><a href=#dependencies><span class=secno>2</span> <span class=content>Dependencies on other modules</span></a><li><a href=#selectors><span class=secno>3</span> <span class=content>User Interface Selectors</span></a><ul class=toc><li><a href=#pseudo-classes><span class=secno>3.1</span> <span class=content>User interface states: pseudo-classes</span></a><ul class=toc><li><a href=#active><span class=secno>3.1.1</span> <span class=content>:active details</span></a><li><a href=#indeterminate><span class=secno>3.1.2</span> <span class=content> 2.353 -The indeterminate-value pseudo-class <span class=css data-link-type=maybe title=:indeterminate>:indeterminate</span></span></a><li><a href=#pseudo-default><span class=secno>3.1.3</span> <span class=content>:default</span></a><li><a href=#pseudo-validity><span class=secno>3.1.4</span> <span class=content><span>:valid</span> 2.354 -and <span>:invalid</span></span></a><li><a href=#pseudo-range><span class=secno>3.1.5</span> <span class=content><span>:in-range</span> and <span>:out-of-range</span></span></a><li><a href=#pseudo-required-value><span class=secno>3.1.6</span> <span class=content><span>:required</span> 2.355 -and <span>:optional</span></span></a><li><a href=#pseudo-ro-rw><span class=secno>3.1.7</span> <span class=content><span>:read-only</span> 2.356 -and <span>:read-write</span></span></a></ul><li><a href=#pseudo-elements><span class=secno>3.2</span> <span class=content>User interface element fragments: pseudo-elements</span></a><ul class=toc><li><a href=#pseudo-value><span class=secno>3.2.1</span> <span class=content>::value</span></a><li><a href=#pseudo-choices><span class=secno>3.2.2</span> <span class=content>::choices</span></a><li><a href=#pseudo-repeat-item><span class=secno>3.2.3</span> <span class=content>::repeat-item</span></a><li><a href=#pseudo-repeat-index><span class=secno>3.2.4</span> <span class=content>::repeat-index</span></a></ul></ul><li><a href=#icons><span class=secno>4</span> <span class=content>Element icons</span></a><ul class=toc><li><a href=#content-addition><span class=secno>4.1</span> <span class=content><span class=property data-link-type=propdesc title=content>content</span> property addition</span></a><li><a href=#icon><span class=secno>4.2</span> <span class=content><span class=property data-link-type=propdesc title=icon>icon</span> property</span></a></ul><li><a href=#box-model><span class=secno>5</span> <span class=content>Box Model addition</span></a><ul class=toc><li><a href=#box-sizing><span class=secno>5.1</span> <span class=content><span class=property data-link-type=propdesc title=box-sizing>box-sizing</span> property</span></a></ul><li><a href=#outline-props><span class=secno>6</span> <span class=content>Outline properties</span></a><ul class=toc><li><a href=#outline><span class=secno>6.1</span> <span class=content><span class=property data-link-type=propdesc title=outline>outline</span> property</span></a><li><a href=#outline-width><span class=secno>6.2</span> <span class=content><span class=property data-link-type=propdesc title=outline-width>outline-width</span> property</span></a><li><a href=#outline-style><span class=secno>6.3</span> <span class=content><span class=property data-link-type=propdesc title=outline-style>outline-style</span> property</span></a><li><a href=#outline-color><span class=secno>6.4</span> <span class=content><span class=property data-link-type=propdesc title=outline-color>outline-color</span> property</span></a><li><a href=#outline-offset><span class=secno>6.5</span> <span class=content><span class=property data-link-type=propdesc title=outline-offset>outline-offset</span> property</span></a></ul><li><a href=#resizing-and-overflow><span class=secno>7</span> <span class=content>Resizing & Overflow</span></a><ul class=toc><li><a href=#resize><span class=secno>7.1</span> <span class=content><span class=property data-link-type=propdesc title=resize>resize</span> property</span></a><li><a href=#text-overflow><span class=secno>7.2</span> <span class=content> 2.357 - Overflow Ellipsis: the <span class=property data-link-type=propdesc title=text-overflow>text-overflow</span> property</span></a></ul><li><a href=#pointing-keyboard><span class=secno>8</span> <span class=content>Pointing Devices and Keyboards</span></a><ul class=toc><li><a href=#pointer-interaction><span class=secno>8.1</span> <span class=content>Pointer interaction</span></a><ul class=toc><li><a href=#cursor><span class=secno>8.1.1</span> <span class=content><span class=property data-link-type=propdesc title=cursor>cursor</span> property</span></a></ul><li><a href=#keyboard><span class=secno>8.2</span> <span class=content>Keyboard control</span></a><ul class=toc><li><a href=#nav-index><span class=secno>8.2.1</span> <span class=content>Sequential navigation order: the <span class=property data-link-type=propdesc title=nav-index>nav-index</span> property</span></a><li><a href=#nav-dir><span class=secno>8.2.2</span> <span class=content>Directional focus navigation: the <span class=property data-link-type=propdesc title=nav-up>nav-up</span>, <span class=property data-link-type=propdesc title=nav-right>nav-right</span>, <span class=property data-link-type=propdesc title=nav-down>nav-down</span>, <span class=property data-link-type=propdesc title=nav-left>nav-left</span> properties</span></a><li><a href=#input-method-editor><span class=secno>8.2.3</span> <span class=content>Input method editor: the <span class=property data-link-type=propdesc title=ime-mode>ime-mode</span> property</span></a></ul></ul><li><a href=#acknowledgments><span class=secno></span> <span class=content>Appendix A. Acknowledgments</span></a><li><a href=#changes><span class=secno></span> <span class=content>Appendix B. Changes</span></a><ul class=toc><li><a href=#changes-list><span class=secno></span> <span class=content>List of substantial changes</span></a></ul><li><a href=#default-style-sheet><span class=secno></span> <span class=content>Appendix C. Default style sheet additions for HTML</span></a><li><a href=#test-suite><span class=secno></span> <span class=content>Appendix D: Test Suite</span></a><li><a href=#conformance><span class=secno></span> <span class=content> 2.358 -Conformance</span></a><ul class=toc><li><a href=#conventions><span class=secno></span> <span class=content> 2.359 -Document conventions</span></a><li><a href=#conformance-classes><span class=secno></span> <span class=content> 2.360 -Conformance classes</span></a><li><a href=#partial><span class=secno></span> <span class=content> 2.361 -Partial implementations</span></a><li><a href=#experimental><span class=secno></span> <span class=content> 2.362 -Experimental implementations</span></a><li><a href=#testing><span class=secno></span> <span class=content> 2.363 -Non-experimental implementations</span></a></ul><li><a href=#references><span class=secno></span> <span class=content>References</span></a><ul class=toc><li><a href=#normative><span class=secno></span> <span class=content>Normative References</span></a><li><a href=#informative><span class=secno></span> <span class=content>Informative References</span></a></ul><li><a href=#index><span class=secno></span> <span class=content>Index</span></a><li><a href=#property-index><span class=secno></span> <span class=content>Property Index</span></a></ul></div> 2.364 -<main> 2.365 - 2.366 - 2.367 - 2.368 - 2.369 -<p></p> 2.370 - 2.371 -<hr title="Separator for header"> 2.372 - 2.373 -<h2 class="no-num no-toc heading settled" id=summary><span class=content>Overview</span></h2> 2.374 - 2.375 -<p>This section is <em>informative</em>.</p> 2.376 - 2.377 -<p>This document is one of the "modules" for the upcoming CSS3 2.378 -specification. It not only describes the user interface related 2.379 -properties and values that already exist in 2.380 -<a href=http://www.w3.org/TR/REC-CSS1>CSS1</a> <a data-biblio-type=informative data-link-type=biblio href=#biblio-css1 title=CSS1>[CSS1]</a> 2.381 -and <a href=http://www.w3.org/TR/CSS21>CSS2.1</a> <a data-biblio-type=normative data-link-type=biblio href=#biblio-css21 title=CSS21>[CSS21]</a>, but introduces 2.382 -new properties and values for CSS3 as well. 2.383 -The Working Group doesn’t expect that all implementations of CSS3 will implement 2.384 -all properties or values. 2.385 -Instead, there will probably be a small number of variants of CSS3, so-called "profiles".</p> 2.386 - 2.387 -<p>This document is the result of the merging of relevant parts of 2.388 -the following Recommendations and Working Drafts, and the addition of some new features.</p> 2.389 -<ul> 2.390 - <li>Cascading Style Sheets, level 2, revision 1 <a data-biblio-type=normative data-link-type=biblio href=#biblio-css21 title=CSS21>[CSS21]</a> 2.391 - <li><a href=http://www.w3.org/TR/2000/WD-css3-userint-20000216>User Interface for CSS3 (16 February 2000)</a> <a data-biblio-type=informative data-link-type=biblio href=#biblio-cssui title=CSSUI>[CSSUI]</a> 2.392 -</ul> 2.393 - 2.394 -<p>This specification contains:</p> 2.395 -<ul> 2.396 -<li>Pseudo-classes and pseudo-elements to style 2.397 -user interface states and element fragments respectively. 2.398 - 2.399 -<li>Additions to the user interface features in 2.400 -<a href=http://www.w3.org/TR/CSS21>CSS2.1</a>. 2.401 -<li>Directional focus navigation properties. 2.402 -<li>A mechanism to allow the styling of elements as icons for accessibility. 2.403 -</ul> 2.404 - 2.405 -<hr> 2.406 - 2.407 -<h2 class="heading settled" data-level=1 id=intro><span class=secno>1. </span><span class=content>Introduction</span><a class=self-link href=#intro></a></h2> 2.408 - 2.409 -<p>CSS3 is a set of modules, divided up and profiled in order to 2.410 -simplify the specification, 2.411 -and to allow implementors the flexibility of supporting 2.412 -the particular modules appropriate for their implementations.</p> 2.413 - 2.414 -<p>This module describes selectors and CSS properties which enable authors 2.415 + An individual who has actual knowledge of a patent which the individual believes contains <a href="http://www.w3.org/Consortium/Patent-Policy-20040205/#def-essential">Essential Claim(s)</a> 2.416 + must disclose the information in accordance with <a href="http://www.w3.org/Consortium/Patent-Policy-20040205/#sec-Disclosure">section 6 of the W3C Patent Policy</a>. 2.417 + 2.418 +</p> 2.419 + <p> 2.420 + This document is governed by the <a href="http://www.w3.org/2014/Process-20140801/">1 August 2014 W3C Process Document</a>. 2.421 +</p></div> 2.422 + 2.423 + <div data-fill-with="at-risk"> 2.424 + <p>The following features are at-risk, and may be dropped during the CR period: 2.425 +</p> 2.426 + <ul> 2.427 + <li>::value ::choices pseudo-elements</li> 2.428 + <li><a class="property" data-link-type="propdesc" href="#propdef-box-sizing">box-sizing</a> property value: padding-box</li> 2.429 + <li><a class="property" data-link-type="propdesc" href="#propdef-ime-mode">ime-mode</a> property</li> 2.430 + <li><a class="property" data-link-type="propdesc" href="#propdef-text-overflow">text-overflow</a> property value: <string></li> 2.431 + <li><a class="property" data-link-type="propdesc" href="#propdef-text-overflow">text-overflow</a> property 2-value syntax and definition</li> 2.432 + </ul></div> 2.433 + 2.434 + 2.435 + <h2 class="no-num no-toc no-ref heading settled" id="contents"><span class="content">Table of Contents</span></h2> 2.436 + 2.437 + <div data-fill-with="table-of-contents" role="navigation"> 2.438 + <ul class="toc" role="directory"> 2.439 + <li><a href="#intro"><span class="secno">1</span> <span class="content">Introduction</span></a> 2.440 + <ul class="toc"> 2.441 + <li><a href="#purpose"><span class="secno">1.1</span> <span class="content">Purpose</span></a></li> 2.442 + </ul> 2.443 + </li> 2.444 + <li><a href="#dependencies"><span class="secno">2</span> <span class="content">Dependencies on other modules</span></a></li> 2.445 + <li><a href="#selectors"><span class="secno">3</span> <span class="content">User Interface Selectors</span></a> 2.446 + <ul class="toc"> 2.447 + <li><a href="#pseudo-elements"><span class="secno">3.1</span> <span class="content">User interface element fragments: pseudo-elements</span></a> 2.448 + <ul class="toc"> 2.449 + <li><a href="#pseudo-value"><span class="secno">3.1.1</span> <span class="content">::value</span></a></li> 2.450 + <li><a href="#pseudo-choices"><span class="secno">3.1.2</span> <span class="content">::choices</span></a></li> 2.451 + </ul> 2.452 + </li> 2.453 + </ul> 2.454 + </li> 2.455 + <li><a href="#box-model"><span class="secno">4</span> <span class="content">Box Model addition</span></a> 2.456 + <ul class="toc"> 2.457 + <li><a href="#box-sizing"><span class="secno">4.1</span> <span class="content"><span class="property" data-link-type="propdesc" title="box-sizing">box-sizing</span> property</span></a></li> 2.458 + </ul> 2.459 + </li> 2.460 + <li><a href="#outline-props"><span class="secno">5</span> <span class="content">Outline properties</span></a> 2.461 + <ul class="toc"> 2.462 + <li><a href="#outline"><span class="secno">5.1</span> <span class="content"><span class="property" data-link-type="propdesc" title="outline">outline</span> property</span></a></li> 2.463 + <li><a href="#outline-width"><span class="secno">5.2</span> <span class="content"><span class="property" data-link-type="propdesc" title="outline-width">outline-width</span> property</span></a></li> 2.464 + <li><a href="#outline-style"><span class="secno">5.3</span> <span class="content"><span class="property" data-link-type="propdesc" title="outline-style">outline-style</span> property</span></a></li> 2.465 + <li><a href="#outline-color"><span class="secno">5.4</span> <span class="content"><span class="property" data-link-type="propdesc" title="outline-color">outline-color</span> property</span></a></li> 2.466 + <li><a href="#outline-offset"><span class="secno">5.5</span> <span class="content"><span class="property" data-link-type="propdesc" title="outline-offset">outline-offset</span> property</span></a></li> 2.467 + </ul> 2.468 + </li> 2.469 + <li><a href="#resizing-and-overflow"><span class="secno">6</span> <span class="content">Resizing & Overflow</span></a> 2.470 + <ul class="toc"> 2.471 + <li><a href="#resize"><span class="secno">6.1</span> <span class="content"><span class="property" data-link-type="propdesc" title="resize">resize</span> property</span></a></li> 2.472 + <li><a href="#text-overflow"><span class="secno">6.2</span> <span class="content"> 2.473 + Overflow Ellipsis: the <span class="property" data-link-type="propdesc" title="text-overflow">text-overflow</span> property</span></a></li> 2.474 + </ul> 2.475 + </li> 2.476 + <li><a href="#pointing-keyboard"><span class="secno">7</span> <span class="content">Pointing Devices and Keyboards</span></a> 2.477 + <ul class="toc"> 2.478 + <li><a href="#pointer-interaction"><span class="secno">7.1</span> <span class="content">Pointer interaction</span></a> 2.479 + <ul class="toc"> 2.480 + <li><a href="#cursor"><span class="secno">7.1.1</span> <span class="content"><span class="property" data-link-type="propdesc" title="cursor">cursor</span> property</span></a></li> 2.481 + </ul> 2.482 + </li> 2.483 + <li><a href="#keyboard"><span class="secno">7.2</span> <span class="content">Keyboard control</span></a> 2.484 + <ul class="toc"> 2.485 + <li><a href="#nav-dir"><span class="secno">7.2.1</span> <span class="content">Directional focus navigation: the <span class="property" data-link-type="propdesc" title="nav-up">nav-up</span>, <span class="property" data-link-type="propdesc" title="nav-right">nav-right</span>, <span class="property" data-link-type="propdesc" title="nav-down">nav-down</span>, <span class="property" data-link-type="propdesc" title="nav-left">nav-left</span> properties</span></a></li> 2.486 + <li><a href="#input-method-editor"><span class="secno">7.2.2</span> <span class="content">Input method editor: the <span class="property" data-link-type="propdesc" title="ime-mode">ime-mode</span> property</span></a></li> 2.487 + </ul> 2.488 + </li> 2.489 + </ul> 2.490 + </li> 2.491 + <li><a href="#acknowledgments"><span class="secno"></span> <span class="content">Appendix A. Acknowledgments</span></a></li> 2.492 + <li><a href="#changes"><span class="secno"></span> <span class="content">Appendix B. Changes</span></a> 2.493 + <ul class="toc"> 2.494 + <li><a href="#changes-list"><span class="secno"></span> <span class="content">List of substantial changes</span></a></li> 2.495 + </ul> 2.496 + </li> 2.497 + <li><a href="#default-style-sheet"><span class="secno"></span> <span class="content">Appendix C. Default style sheet additions for HTML</span></a></li> 2.498 + <li><a href="#test-suite"><span class="secno"></span> <span class="content">Appendix D: Test Suite</span></a></li> 2.499 + <li><a href="#conformance"><span class="secno"></span> <span class="content"> 2.500 +Conformance</span></a> 2.501 + <ul class="toc"> 2.502 + <li><a href="#conventions"><span class="secno"></span> <span class="content"> 2.503 +Document conventions</span></a></li> 2.504 + <li><a href="#conformance-classes"><span class="secno"></span> <span class="content"> 2.505 +Conformance classes</span></a></li> 2.506 + <li><a href="#partial"><span class="secno"></span> <span class="content"> 2.507 +Partial implementations</span></a></li> 2.508 + <li><a href="#experimental"><span class="secno"></span> <span class="content"> 2.509 +Experimental implementations</span></a></li> 2.510 + <li><a href="#testing"><span class="secno"></span> <span class="content"> 2.511 +Non-experimental implementations</span></a></li> 2.512 + </ul> 2.513 + </li> 2.514 + <li><a href="#references"><span class="secno"></span> <span class="content">References</span></a> 2.515 + <ul class="toc"> 2.516 + <li><a href="#normative"><span class="secno"></span> <span class="content">Normative References</span></a></li> 2.517 + <li><a href="#informative"><span class="secno"></span> <span class="content">Informative References</span></a></li> 2.518 + </ul> 2.519 + </li> 2.520 + <li><a href="#index"><span class="secno"></span> <span class="content">Index</span></a></li> 2.521 + <li><a href="#property-index"><span class="secno"></span> <span class="content">Property Index</span></a></li> 2.522 + </ul></div> 2.523 + 2.524 + <main> 2.525 + 2.526 + 2.527 + 2.528 + 2.529 + 2.530 + <p></p> 2.531 + 2.532 + 2.533 + <hr title="Separator for header"> 2.534 + 2.535 + 2.536 + 2.537 + <h2 class="heading settled" data-level="1" id="intro"><span class="secno">1. </span><span class="content">Introduction</span><a class="self-link" href="#intro"></a></h2> 2.538 + 2.539 + 2.540 + <p>This module describes selectors and CSS properties which enable authors 2.541 to style user interface related states, element fragments, properties 2.542 and values.</p> 2.543 2.544 -<p><a href=http://www.w3.org/TR/REC-CSS1#anchor-pseudo-classes>Section 2.1 of CSS1</a> <a data-biblio-type=informative data-link-type=biblio href=#biblio-css1 title=CSS1>[CSS1]</a> 2.545 -and <a href=http://www.w3.org/TR/CSS2/ui.html>Chapter 18 of CSS2</a> <a data-biblio-type=informative data-link-type=biblio href=#biblio-css2 title=CSS2>[CSS2]</a> 2.546 + 2.547 + <p><a href="http://www.w3.org/TR/REC-CSS1#anchor-pseudo-classes">Section 2.1 of CSS1</a> <a data-biblio-type="informative" data-link-type="biblio" href="#biblio-css1" title="CSS1">[CSS1]</a> 2.548 +and <a href="http://www.w3.org/TR/CSS2/ui.html">Chapter 18 of CSS2</a> <a data-biblio-type="informative" data-link-type="biblio" href="#biblio-css2" title="CSS2">[CSS2]</a> 2.549 introduced several user interface related pseudo-classes, properties and values. 2.550 -<a href=http://www.w3.org/TR/css3-selectors/#UIstates>Section 6.6.4 of Selectors</a> <a data-biblio-type=normative data-link-type=biblio href=#biblio-select title=SELECT>[SELECT]</a> also describes several additional user interface related pseudo-classes (and one pseudo-element).</p> 2.551 - 2.552 -<p>This Working Draft extends them to provide the ability, through CSS, 2.553 +<a href="http://www.w3.org/TR/css3-selectors/#UIstates">Section 6.6.4 of Selectors</a> <a data-biblio-type="normative" data-link-type="biblio" href="#biblio-select" title="SELECT">[SELECT]</a> also describes several additional user interface related pseudo-classes (and one pseudo-element). <a href="http://www.w3.org/TR/2000/WD-css3-userint-20000216">User Interface for CSS3 (16 February 2000)</a> introduced several new user interface related features.</p> 2.554 + 2.555 + 2.556 + <p>This Working Draft incorporates and extends them to provide the ability, through CSS, 2.557 to style elements based upon additional user interface states, 2.558 to style fragments of user interface elements, and to alter the 2.559 dynamic presentation of elements in ways previously only available through specific HTML4/XHTML1 elements and attributes.</p> 2.560 2.561 -<h3 class="heading settled" data-level=1.1 id=purpose><span class=secno>1.1. </span><span class=content>Purpose</span><a class=self-link href=#purpose></a></h3> 2.562 - 2.563 -<p>The purpose of this specification is to achieve the following objectives:</p> 2.564 -<ul> 2.565 -<li>Extend the user interface features in CSS2.1. 2.566 -<li>Provide additional CSS mechanisms to augment or replace other 2.567 + 2.568 + <h3 class="heading settled" data-level="1.1" id="purpose"><span class="secno">1.1. </span><span class="content">Purpose</span><a class="self-link" href="#purpose"></a></h3> 2.569 + 2.570 + 2.571 + <p>The purpose of this specification is to achieve the following objectives:</p> 2.572 + 2.573 + <ul> 2.574 + 2.575 + <li>Extend the user interface features in CSS2.1. 2.576 +</li> 2.577 + <li>Provide additional CSS mechanisms to augment or replace other 2.578 dynamic presentation related features in HTML4/XHTML1. 2.579 -<li>Introduce directional navigation properties to assist in the construction of 2.580 +</li> 2.581 + <li>Introduce directional navigation properties to assist in the construction of 2.582 user interfaces which make use of a directional navigation model. 2.583 -<li>Introduce properties and values to specify icon presentations for 2.584 -elements to enhance accessibility. 2.585 -</ul> 2.586 - 2.587 -<h2 class="heading settled" data-level=2 id=dependencies><span class=secno>2. </span><span class=content>Dependencies on other modules</span><a class=self-link href=#dependencies></a></h2> 2.588 - 2.589 -<p>This CSS3 module depends on the following other specifications.</p> 2.590 - 2.591 -<ul> 2.592 -<li><a data-biblio-type=normative data-link-type=biblio href=#biblio-select title=SELECT>[SELECT]</a> 2.593 -<li><a data-biblio-type=normative data-link-type=biblio href=#biblio-css3color title=CSS3COLOR>[CSS3COLOR]</a> 2.594 -<li><a data-biblio-type=normative data-link-type=biblio href=#biblio-css21 title=CSS21>[CSS21]</a> 2.595 -<li><a data-biblio-type=normative data-link-type=biblio href=#biblio-css3val title=CSS3VAL>[CSS3VAL]</a> 2.596 -<li><a data-biblio-type=normative data-link-type=biblio href=#biblio-css3-writing-modes title=CSS3-WRITING-MODES>[CSS3-WRITING-MODES]</a> 2.597 -</ul> 2.598 - 2.599 - 2.600 - 2.601 -<p>The following work is related to the CSS Basic User Interface Module Level 3 (CSS3 Basic UI).</p> 2.602 - 2.603 -<ul> 2.604 -<li><a data-biblio-type=informative data-link-type=biblio href=#biblio-html401 title=HTML401>[HTML401]</a> 2.605 -<li><a data-biblio-type=informative data-link-type=biblio href=#biblio-html5 title=HTML5>[HTML5]</a> 2.606 -<li><a data-biblio-type=informative data-link-type=biblio href=#biblio-uaag10 title=UAAG10>[UAAG10]</a> 2.607 -<li><a data-biblio-type=informative data-link-type=biblio href=#biblio-xml10 title=XML10>[XML10]</a> 2.608 -<li><a data-biblio-type=informative data-link-type=biblio href=#biblio-xhtml10 title=XHTML10>[XHTML10]</a> 2.609 -<li><a data-biblio-type=informative data-link-type=biblio href=#biblio-xhtml11 title=XHTML11>[XHTML11]</a> 2.610 -<li><a data-biblio-type=informative data-link-type=biblio href=#biblio-xforms11 title=XFORMS11>[XFORMS11]</a> 2.611 -</ul> 2.612 - 2.613 -<p>This specification does not define what is a form element.</p> 2.614 - 2.615 -<h2 class="heading settled" data-level=3 id=selectors><span class=secno>3. </span><span class=content>User Interface Selectors</span><a class=self-link href=#selectors></a></h2> 2.616 - 2.617 -<h3 class="heading settled" data-level=3.1 id=pseudo-classes><span class=secno>3.1. </span><span class=content>User interface states: pseudo-classes</span><a class=self-link href=#pseudo-classes></a></h3> 2.618 - 2.619 -<p>The Selectors specification <a href=http://www.w3.org/TR/css3-selectors/#UIstates>defines several user interface selectors</a> (<a data-biblio-type=normative data-link-type=biblio href=#biblio-select title=SELECT>[SELECT]</a>, sections 6.6.1 and 6.6.4) 2.620 -which represent user interface states:</p> 2.621 -<ul><li id=pseudo-hover><a class=self-link href=#pseudo-hover></a><a href=http://www.w3.org/TR/css3-selectors/#useraction-pseudos>:hover</a> 2.622 - <li id=pseudo-active><a class=self-link href=#pseudo-active></a><a href=http://www.w3.org/TR/css3-selectors/#useraction-pseudos>:active</a> 2.623 - <li id=pseudo-focus><a class=self-link href=#pseudo-focus></a><a href=http://www.w3.org/TR/css3-selectors/#useraction-pseudos>:focus</a> 2.624 - <li id=pseudo-enabled><a class=self-link href=#pseudo-enabled></a><a href=http://www.w3.org/TR/css3-selectors/#enableddisabled>:enabled</a> 2.625 - <li id=pseudo-disabled><a class=self-link href=#pseudo-disabled></a><a href=http://www.w3.org/TR/css3-selectors/#enableddisabled>:disabled</a> 2.626 - <li id=pseudo-checked><a class=self-link href=#pseudo-checked></a><a href=http://www.w3.org/TR/css3-selectors/#checked>:checked</a> 2.627 - <li id=pseudo-indeterminate><a class=self-link href=#pseudo-indeterminate></a><a href=http://www.w3.org/TR/css3-selectors/#indeterminate>:indeterminate</a> 2.628 -</ul> 2.629 - 2.630 -<p>These pseudo-classes as defined by <a data-biblio-type=normative data-link-type=biblio href=#biblio-select title=SELECT>[SELECT]</a> are 2.631 -included in this specification by reference.</p> 2.632 - 2.633 -<p>CSS 2.1 <a data-biblio-type=normative data-link-type=biblio href=#biblio-css21 title=CSS21>[CSS21]</a> specifies additional details 2.634 -for some of the selectors mentioned, above and beyond Selectors.</p> 2.635 - 2.636 - 2.637 -<h4 class="heading settled" data-level=3.1.1 id=active><span class=secno>3.1.1. </span><span class=content>:active details</span><a class=self-link href=#active></a></h4> 2.638 - 2.639 -<p>In addition, on systems with more than one mouse button, 2.640 -:active is clarified to apply only to the primary 2.641 -or primary activation button (typically the "left" mouse button), 2.642 -and any aliases thereof.</p> 2.643 - 2.644 -<h4 class="heading settled" data-level=3.1.2 id=indeterminate><span class=secno>3.1.2. </span><span class=content> 2.645 -The indeterminate-value pseudo-class <a class=css data-link-type=maybe href=http://dev.w3.org/csswg/selectors-4/#indetermine-pseudo>:indeterminate</a></span><a class=self-link href=#indeterminate></a></h4> 2.646 - 2.647 -<p>The <a class=css data-link-type=maybe href=http://dev.w3.org/csswg/selectors-4/#indetermine-pseudo>:indeterminate</a> pseudo-class applies 2.648 -to UI elements whose value is in an indeterminate state. 2.649 -For example, radio and checkbox elements 2.650 -can be toggled between checked and unchecked states, 2.651 -but are sometimes in an indeterminate state, 2.652 -neither checked nor unchecked. 2.653 -Similarly a progress meter can be in an indeterminate state 2.654 -when the percent completion is unknown.</p> 2.655 - 2.656 -<p>Like the :checked pseudo-class, 2.657 -<a class=css data-link-type=maybe href=http://dev.w3.org/csswg/selectors-4/#indetermine-pseudo>:indeterminate</a> applies to all media. 2.658 -Components of a radio-group initialized with no pre-selected choice, 2.659 -for example, would be <a class=css data-link-type=maybe href=http://dev.w3.org/csswg/selectors-4/#indetermine-pseudo>:indeterminate</a> 2.660 -even in a static display.</p> 2.661 - 2.662 - 2.663 -<h4 class="no-num no-toc heading settled" id=new-pseudo-classes><span class=content>New user interface state pseudo-classes</span><a class=self-link href=#new-pseudo-classes></a></h4> 2.664 - 2.665 -<p>In addition to the above-mentioned pseudo-classes, 2.666 -this specification introduces several new pseudo-classes 2.667 -to define additional user interface states.</p> 2.668 -<ul> 2.669 - <li>:default 2.670 - <li>:valid 2.671 - <li>:invalid 2.672 - <li>:in-range 2.673 - <li>:out-of-range 2.674 - <li>:required 2.675 - <li>:optional 2.676 - <li>:read-only 2.677 - <li>:read-write 2.678 -</ul> 2.679 - 2.680 -<p>Specifically, these new states (except for :default) are provided 2.681 -as a way to style elements which are in the respective states as defined by XForms <a data-biblio-type=informative data-link-type=biblio href=#biblio-xforms11 title=XFORMS11>[XFORMS11]</a>.</p> 2.682 - 2.683 -<h4 class="heading settled" data-level=3.1.3 id=pseudo-default><span class=secno>3.1.3. </span><span class=content>:default</span><a class=self-link href=#pseudo-default></a></h4> 2.684 - 2.685 -<p>The :default selector applies to the one or more UI elements 2.686 -that are the default among a set of similar elements. 2.687 -This selector typically applies to context menu items, 2.688 -buttons, and select lists/menus.</p> 2.689 - 2.690 -<p>One example is the default submit button among a set of buttons. 2.691 -Another example is the default option from a popup menu. 2.692 -Multiple elements in a select-many group could have multiple :default elements, 2.693 -like a selection of pizza toppings for example.</p> 2.694 - 2.695 -<h4 class="heading settled" data-level=3.1.4 id=pseudo-validity><span class=secno>3.1.4. </span><span class=content><span id=pseudo-valid>:valid</span> 2.696 -and <span id=pseudo-invalid>:invalid</span></span><a class=self-link href=#pseudo-validity></a></h4> 2.697 - 2.698 -<p>An element is :valid or :invalid when it is, 2.699 -respectively, valid or invalid with respect to data validity semantics 2.700 -defined by a different specification (e.g. <a data-biblio-type=informative data-link-type=biblio href=#biblio-xforms11 title=XFORMS11>[XFORMS11]</a>). 2.701 -An element which lacks data validity semantics is neither :valid nor :invalid. 2.702 -This is different from an element which otherwise has no constraints. 2.703 -Such an element would always be :valid.</p> 2.704 - 2.705 -<h4 class="heading settled" data-level=3.1.5 id=pseudo-range><span class=secno>3.1.5. </span><span class=content><span id=pseudo-in-range>:in-range</span> and <span id=pseudo-out-of-range>:out-of-range</span></span><a class=self-link href=#pseudo-range></a></h4> 2.706 - 2.707 -<p>The :in-range and :out-of-range pseudo-classes apply only to elements that have range limitations. 2.708 -An element is :in-range or :out-of-range 2.709 -when the value that the element is bound to is in range or out of range 2.710 -of the presentation (e.g. visual or spoken representation) of the element respectively. 2.711 -An element that lacks data range limits or is not a form control is neither :in-range nor :out-of-range. 2.712 -E.g. a slider element with a value of 11 2.713 -presented as a slider control that only represents the values from 1-10 is :out-of-range. 2.714 -Another example is a menu element with a value of "E" 2.715 -that happens to be presented as a popup menu that only has choices "A", "B" and "C".</p> 2.716 - 2.717 -<h4 class="heading settled" data-level=3.1.6 id=pseudo-required-value><span class=secno>3.1.6. </span><span class=content><span id=pseudo-required>:required</span> 2.718 -and <span id=pseudo-optional>:optional</span></span><a class=self-link href=#pseudo-required-value></a></h4> 2.719 - 2.720 -<p>A form element is :required or :optional if a value for it 2.721 -is, respectively, required or optional before the form it belongs to is submitted. 2.722 -Elements that are not form elements are neither required nor optional.</p> 2.723 - 2.724 -<h4 class="heading settled" data-level=3.1.7 id=pseudo-ro-rw><span class=secno>3.1.7. </span><span class=content><span id=pseudo-read-only>:read-only</span> 2.725 -and <span id=pseudo-read-write>:read-write</span></span><a class=self-link href=#pseudo-ro-rw></a></h4> 2.726 - 2.727 -<p>An element whose contents are not user-alterable is :read-only. 2.728 -However, elements whose contents are user-alterable (such as text input fields) 2.729 -are considered to be in a :read-write state. 2.730 -In typical documents, most elements are :read-only. 2.731 -However it may be possible (e.g. in the context of an editor) for any element to become :read-write.</p> 2.732 - 2.733 -<h3 class="heading settled" data-level=3.2 id=pseudo-elements><span class=secno>3.2. </span><span class=content>User interface element fragments: pseudo-elements</span><a class=self-link href=#pseudo-elements></a></h3> 2.734 - 2.735 -<p>In addition to the above-mentioned pseudo-element, 2.736 -this specification introduces four new pseudo-elements 2.737 +</li></ul> 2.738 + 2.739 + 2.740 + <h2 class="heading settled" data-level="2" id="dependencies"><span class="secno">2. </span><span class="content">Dependencies on other modules</span><a class="self-link" href="#dependencies"></a></h2> 2.741 + 2.742 + 2.743 + <p>This CSS3 module depends on the following other specifications.</p> 2.744 + 2.745 + 2.746 + <ul> 2.747 + 2.748 + <li><a data-biblio-type="normative" data-link-type="biblio" href="#biblio-select" title="SELECT">[SELECT]</a> 2.749 +</li> 2.750 + <li><a data-biblio-type="normative" data-link-type="biblio" href="#biblio-css3color" title="CSS3COLOR">[CSS3COLOR]</a> 2.751 +</li> 2.752 + <li><a data-biblio-type="normative" data-link-type="biblio" href="#biblio-css21" title="CSS21">[CSS21]</a> 2.753 +</li> 2.754 + <li><a data-biblio-type="normative" data-link-type="biblio" href="#biblio-css3val" title="CSS3VAL">[CSS3VAL]</a> 2.755 +</li> 2.756 + <li><a data-biblio-type="normative" data-link-type="biblio" href="#biblio-css3-writing-modes" title="CSS3-WRITING-MODES">[CSS3-WRITING-MODES]</a> 2.757 +</li></ul> 2.758 + 2.759 + 2.760 + 2.761 + 2.762 + <p>The following work is related to the CSS Basic User Interface Module Level 3 (CSS3 Basic UI).</p> 2.763 + 2.764 + 2.765 + <ul> 2.766 + 2.767 + <li><a data-biblio-type="informative" data-link-type="biblio" href="#biblio-html401" title="HTML401">[HTML401]</a> 2.768 +</li> 2.769 + <li><a data-biblio-type="informative" data-link-type="biblio" href="#biblio-html5" title="HTML5">[HTML5]</a> 2.770 +</li> 2.771 + <li><a data-biblio-type="informative" data-link-type="biblio" href="#biblio-uaag10" title="UAAG10">[UAAG10]</a> 2.772 +</li></ul> 2.773 + 2.774 + 2.775 + <p>This specification does not define what is a form element.</p> 2.776 + 2.777 + 2.778 + <h2 class="heading settled" data-level="3" id="selectors"><span class="secno">3. </span><span class="content">User Interface Selectors</span><a class="self-link" href="#selectors"></a></h2> 2.779 + 2.780 + 2.781 + <h3 class="heading settled" data-level="3.1" id="pseudo-elements"><span class="secno">3.1. </span><span class="content">User interface element fragments: pseudo-elements</span><a class="self-link" href="#pseudo-elements"></a></h3> 2.782 + 2.783 + 2.784 + <p>This specification introduces two new pseudo-elements 2.785 to provide access to additional user interface element fragments.</p> 2.786 -<ul> 2.787 - <li>::value 2.788 - <li>::choices 2.789 - <li>::repeat-item 2.790 - <li>::repeat-index 2.791 -</ul> 2.792 - 2.793 -<p>Specifically, these new pseudo-elements are provided 2.794 -as a way to style user interface fragments 2.795 -as defined by XForms <a data-biblio-type=informative data-link-type=biblio href=#biblio-xforms11 title=XFORMS11>[XFORMS11]</a>.</p> 2.796 - 2.797 -<p class=note role=note>Note: The ::value, ::choices, ::repeat-item, and ::repeat-index 2.798 -pseudo-elements are all at risk.</p> 2.799 - 2.800 -<h4 class="heading settled" data-level=3.2.1 id=pseudo-value><span class=secno>3.2.1. </span><span class=content>::value</span><a class=self-link href=#pseudo-value></a></h4> 2.801 - 2.802 -<p>A form element may contain both a label for its data value, 2.803 + 2.804 + <ul> 2.805 + 2.806 + <li>::value 2.807 + </li> 2.808 + <li>::choices 2.809 +</li></ul> 2.810 + 2.811 + 2.812 + <p class="note" role="note">Note: The ::value and ::choices 2.813 +pseudo-elements are at risk.</p> 2.814 + 2.815 + 2.816 + <h4 class="heading settled" data-level="3.1.1" id="pseudo-value"><span class="secno">3.1.1. </span><span class="content">::value</span><a class="self-link" href="#pseudo-value"></a></h4> 2.817 + 2.818 + 2.819 + <p>A form element may contain both a label for its data value, 2.820 and the data value itself. 2.821 For such elements, the ::value pseudo-element 2.822 selects the representation of just the data value itself, 2.823 in order to style its appearance.</p> 2.824 2.825 -<div class=example><p style=display:none>Example(s): 2.826 -<h4 class="no-num no-toc heading settled" id=value-example><span class=content>fictional markup and illustration</span><a class=self-link href=#value-example></a></h4> 2.827 - 2.828 -<p>Here is an example which illustrates the ::value of a text input field 2.829 -with fictional markup which is then styled with CSS.</p> 2.830 - 2.831 -<p>sample XForms fragment with fictional markup:</p> 2.832 -<pre><code class=lang-markup><input> 2.833 - <label>Zip code<label> 2.834 - <em><input::value/></em> 2.835 -</input> 2.836 -</code></pre> 2.837 - 2.838 -<p>sample CSS:</p> 2.839 -<pre><code class=lang-css>input { border:dashed } 2.840 -label { border:dotted } 2.841 -input::value { border:solid } 2.842 -</code></pre> 2.843 - 2.844 -<p>an HTML+CSS approximation of this example</p> 2.845 - 2.846 -<p> 2.847 -<span style=border:dashed;display:inline-block;padding:10px> 2.848 - <label style=border:dotted;display:inline-block;padding:2px;margin:0;font-size:1em>Zip code</label> 2.849 - <input style=border:solid;display:inline-block;padding:2px;margin:0;font-size:1em type=text value=94117> 2.850 -</span> 2.851 - 2.852 -<p>Spacing (in the form of padding) has been added to the above approximation 2.853 -to separate the borders and make the individual (pseudo-)elements easier to distinguish.</p> 2.854 -</div> 2.855 - 2.856 -<p>The <span class=css>::value</span> pseudo-element is similar to an inline-level element, 2.857 + 2.858 + <p>The <span class="css">::value</span> pseudo-element is similar to an inline-level element, 2.859 but with certain restrictions. 2.860 -The following properties apply to <span class=css>::value</span> 2.861 +The following properties apply to <span class="css">::value</span> 2.862 pseudo-element: font properties, color property, background properties, 2.863 -<a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css-text-3/#propdef-word-spacing>word-spacing</a>, <a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css-text-3/#propdef-letter-spacing>letter-spacing</a>, <a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css-text-decor-3/#propdef-text-decoration>text-decoration</a>, <a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css2/visudet.html#propdef-vertical-align>vertical-align</a>, 2.864 -<a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css-text-3/#propdef-text-transform>text-transform</a>, <a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css2/visudet.html#propdef-line-height>line-height</a>. UAs may apply other properties as well.</p> 2.865 - 2.866 - 2.867 -<h4 class="heading settled" data-level=3.2.2 id=pseudo-choices><span class=secno>3.2.2. </span><span class=content>::choices</span><a class=self-link href=#pseudo-choices></a></h4> 2.868 - 2.869 -<p>Similarly, a form element which represents a list of options 2.870 +<a class="property" data-link-type="propdesc" href="http://dev.w3.org/csswg/css-text-3/#propdef-word-spacing">word-spacing</a>, <a class="property" data-link-type="propdesc" href="http://dev.w3.org/csswg/css-text-3/#propdef-letter-spacing">letter-spacing</a>, <a class="property" data-link-type="propdesc" href="http://dev.w3.org/csswg/css-text-decor-3/#propdef-text-decoration">text-decoration</a>, <a class="property" data-link-type="propdesc" href="http://dev.w3.org/csswg/css2/visudet.html#propdef-vertical-align">vertical-align</a>, 2.871 +<a class="property" data-link-type="propdesc" href="http://dev.w3.org/csswg/css-text-3/#propdef-text-transform">text-transform</a>, <a class="property" data-link-type="propdesc" href="http://dev.w3.org/csswg/css2/visudet.html#propdef-line-height">line-height</a>. UAs may apply other properties as well.</p> 2.872 + 2.873 + 2.874 + 2.875 + <h4 class="heading settled" data-level="3.1.2" id="pseudo-choices"><span class="secno">3.1.2. </span><span class="content">::choices</span><a class="self-link" href="#pseudo-choices"></a></h4> 2.876 + 2.877 + 2.878 + <p>Similarly, a form element which represents a list of options 2.879 may contain both a label for the list, 2.880 and the list of choices itself. 2.881 For such elements, 2.882 -the <span class=css>::choices</span> pseudo-element selects 2.883 +the <span class="css">::choices</span> pseudo-element selects 2.884 the representation of just the list of choices themselves, 2.885 in order to style their appearance.</p> 2.886 2.887 -<p>A list of radio buttons can also be selected with the <span class=css>::choices</span> pseudo-element, 2.888 -and the currently chosen radio button can be selected with the <span class=css>::value</span> pseudo-element.</p> 2.889 - 2.890 -<h4 class="heading settled" data-level=3.2.3 id=pseudo-repeat-item><span class=secno>3.2.3. </span><span class=content>::repeat-item</span><a class=self-link href=#pseudo-repeat-item></a></h4> 2.891 - 2.892 -<p>The <span class=css>::repeat-item</span> pseudo-element represents a single item from a repeating sequence. 2.893 -It is generated as a parent to all the elements in a single repeating item. 2.894 -Each <span class=css>::repeat-item</span> is associated with a particular instance data node, 2.895 -and is affected by the model item properties (e.g. '<code>relevant</code>') found there, 2.896 -as the related style properties will cascade to the child elements.</p> 2.897 - 2.898 -<h4 class="heading settled" data-level=3.2.4 id=pseudo-repeat-index><span class=secno>3.2.4. </span><span class=content>::repeat-index</span><a class=self-link href=#pseudo-repeat-index></a></h4> 2.899 - 2.900 -<p>The ::repeat-index pseudo-element represents the current item of a repeating sequence. 2.901 -It takes the place of the ::repeat-item as a parent of all the elements in the index repeating item.</p> 2.902 - 2.903 -<p class=note role=note>Note: Any style declarations that an author wants to apply to all repeat items, 2.904 -including the index, 2.905 -must be done so by using both ::repeat-item and ::repeat-index selectors. 2.906 -Styles that are only applied to ::repeat-item will not automatically be applied to the respective ::repeat-index.</p> 2.907 - 2.908 -<div class=example><p style=display:none>Example(s): 2.909 -<h4 class="no-num no-toc heading settled" id=repeat-item-index-example><span class=content>::repeat-item and ::repeat-index fictional markup</span><a class=self-link href=#repeat-item-index-example></a></h4> 2.910 - 2.911 -<p>Here is an example that illustrates both ::repeat-item and ::repeat-index, 2.912 -since they are often both available and used at the same time. 2.913 -Assume appropriate namespace declarations were made in a header somewhere 2.914 -preceding the code in the example.</p> 2.915 - 2.916 -<p>The following markup snippet uses XHTML and XForms:</p> 2.917 -<pre><code class=lang-markup><html:table xforms:repeat-nodeset="..."> 2.918 - <html:tr> 2.919 - <html:td><xforms:input ref="..."/><xforms:input ref="..."/></html:td> 2.920 - </html:tr> 2.921 -</html:table> 2.922 -</code></pre> 2.923 - 2.924 -<p>The following style rules are used to style all the repeated items and the current repeated item.</p> 2.925 -<pre><code class=lang-css>html|tr::repeat-item { outline: medium solid; color:gray } 2.926 -html|tr::repeat-index { outline: medium dashed; color:black } 2.927 -</code></pre> 2.928 - 2.929 -<p>The following fictional markup shows 2.930 -the state of the above markup 2.931 -when through user interaction the XForm contains three of the repeated items, 2.932 -where the third item is current.</p> 2.933 -<pre><code class=lang-markup><html:table xforms:repeat-nodeset="..."> 2.934 - <em><html:tr::repeat-item></em> 2.935 - <html:tr> 2.936 - <html:td><xforms:input ref="..."/><xforms:input ref="..."/></html:td> 2.937 - </html:tr> 2.938 - <em></html:tr::repeat-item></em> 2.939 - <em><html:tr::repeat-item></em> 2.940 - <html:tr> 2.941 - <html:td><xforms:input ref="..."/><xforms:input ref="..."/></html:td> 2.942 - </html:tr> 2.943 - <em></html:tr::repeat-item></em> 2.944 - <em><html:tr::repeat-index></em> 2.945 - <html:tr> 2.946 - <html:td><xforms:input ref="..."/><xforms:input ref="..."/></html:td> 2.947 - </html:tr> 2.948 - <em></html:tr::repeat-index></em> 2.949 -</html:table> 2.950 -</code></pre> 2.951 -</div> 2.952 - 2.953 -<p class=note role=note>Note: The ::repeat-index pseudo-element takes the place of the ::repeat-item 2.954 -rather than being nested inside as a separate element. 2.955 -Thus just like :link or :visited are mutually exclusive for selecting hyperlinks, 2.956 -only one will exist and apply to a particular repeated item at any point.</p> 2.957 - 2.958 -<h2 class="heading settled" data-level=4 id=icons><span class=secno>4. </span><span class=content>Element icons</span><a class=self-link href=#icons></a></h2> 2.959 - 2.960 -<h3 class="heading settled" data-level=4.1 id=content-addition><span class=secno>4.1. </span><span class=content><a class=property data-link-type=propdesc href=#propdef-content>content</a> property addition</span><a class=self-link href=#content-addition></a></h3> 2.961 - 2.962 -<table class=propdef><tbody> 2.963 -<tr><th>Name:<td><dfn class=css data-dfn-type=property data-export="" id=propdef-content>content<a class=self-link href=#propdef-content></a></dfn></tr> 2.964 -<tr><th>New Value(s):<td title="">icon</tr> 2.965 - 2.966 -<tr><th>Initial:<td>same as CSS 2.1</tr> 2.967 -<tr><th>Applies to:<td>same as CSS 2.1</tr> 2.968 -<tr><th>Inherited:<td>same as CSS 2.1</tr> 2.969 -<tr><th>Percentages:<td>same as CSS 2.1</tr> 2.970 -<tr><th>Media:<td>same as CSS 2.1</tr> 2.971 -<tr><th>Computed value:<td>the keyword <span class=css>icon</span> if specified as such, otherwise same as CSS 2.1</tr> 2.972 -<tr><th>Animatable:<td>no</tr> 2.973 -</table> 2.974 - 2.975 -<dl> 2.976 -<dt>icon</dt> 2.977 -<dd>The (pseudo-)element is replaced in its entirety by the resource referenced by its <a class=property data-link-type=propdesc href=#propdef-icon>icon</a> property, and treated as a replaced element. 2.978 -</dd> 2.979 -</dl> 2.980 - 2.981 -<p class=note role=note>Note: It is expected that the next draft of the CSS3 Generated Content module <a data-biblio-type=informative data-link-type=biblio href=#biblio-css3gencon title=CSS3GENCON>[CSS3GENCON]</a> 2.982 -will include and superset this functionality.</p> 2.983 - 2.984 -<p class=note role=note>Note: The <span class=css>icon</span> value is at risk.</p> 2.985 - 2.986 -<h3 class="heading settled" data-level=4.2 id=icon><span class=secno>4.2. </span><span class=content><a class=property data-link-type=propdesc href=#propdef-icon>icon</a> property</span><a class=self-link href=#icon></a></h3> 2.987 - 2.988 -<table class=propdef><tbody> 2.989 -<tr><th>Name:<td><dfn class=css data-dfn-type=property data-export="" id=propdef-icon>icon<a class=self-link href=#propdef-icon></a></dfn></tr> 2.990 -<tr><th>Value:<td>auto | <uri> [, <uri>]* | inherit</tr> 2.991 -<tr><th>Initial:<td>auto</tr> 2.992 -<tr><th>Applies to:<td>all elements</tr> 2.993 -<tr><th>Inherited:<td>no</tr> 2.994 -<tr><th>Percentages:<td>N/A</tr> 2.995 -<tr><th>Media:<td>all</tr> 2.996 -<tr><th>Computed value:<td>as specified, except with any relative URLs converted to absolute</tr> 2.997 -<tr><th>Animatable:<td>no</tr> 2.998 -</table> 2.999 - 2.1000 -<dl> 2.1001 -<dt>auto</dt> 2.1002 -<dd>Use a default generic icon provided by the user agent.</dd> 2.1003 -<dt><uri></dt> 2.1004 -<dd>URIs (see <a data-biblio-type=normative data-link-type=biblio href=#biblio-uri title=URI>[URI]</a>, <a data-biblio-type=normative data-link-type=biblio href=#biblio-rfc1738 title=RFC1738>[RFC1738]</a> and <a data-biblio-type=normative data-link-type=biblio href=#biblio-rfc1808 title=RFC1808>[RFC1808]</a>) provide a way of identifying resources. 2.1005 -The <uri> value(s) in this property refer to one or more icons in a comma delimited list. 2.1006 -The user agent loads the referenced icons one by one until it finds one that it is able to render. 2.1007 -This permits the usage of multiple different icon formats for various platforms, 2.1008 -and various media for that matter.</dd> 2.1009 -</dl> 2.1010 - 2.1011 -<p>The <a class=property data-link-type=propdesc href=#propdef-icon>icon</a> property provides the author 2.1012 -the ability to style any arbitrary element with an iconic equivalent. 2.1013 -An element’s icon is not used/rendered 2.1014 -unless the <a class=property data-link-type=propdesc href=#propdef-content>content</a> property is set 2.1015 -to the value <span class=css>icon</span>(see above). 2.1016 -Documents whose elements have icons assigned to them 2.1017 -can be more easily viewed by users who find too much text distracting.</p> 2.1018 - 2.1019 -<div class=example><p style=display:none>Example(s): 2.1020 -<h4 class="no-num no-toc heading settled" id=icon-example><span class=content>Representing elements with icons</span><a class=self-link href=#icon-example></a></h4> 2.1021 - 2.1022 -<p>This example uses the above icon features to display icons in place of images and objects.</p> 2.1023 -<pre><code class=lang-css>img,object { content:icon } 2.1024 - /* note that the CSS3 Generated Content module [[CSS3GENCON]] 2.1025 - expands the 'content’property to apply to all elements. */ 2.1026 - 2.1027 -img { icon:url(imgicon.png); } 2.1028 - /* provide a custom icon for images */ 2.1029 - 2.1030 -object { icon:url(objicon.png); } 2.1031 - /* provide a different custom icon for objects */ 2.1032 -</code></pre> 2.1033 -</div> 2.1034 - 2.1035 -<p class=note role=note>Note: The <a class=property data-link-type=propdesc href=#propdef-icon>icon</a> property is at risk.</p> 2.1036 - 2.1037 -<h2 class="heading settled" data-level=5 id=box-model><span class=secno>5. </span><span class=content>Box Model addition</span><a class=self-link href=#box-model></a></h2> 2.1038 - 2.1039 -<h3 class="heading settled" data-level=5.1 id=box-sizing><span class=secno>5.1. </span><span class=content><a class=property data-link-type=propdesc href=#propdef-box-sizing>box-sizing</a> property</span><a class=self-link href=#box-sizing></a></h3> 2.1040 - 2.1041 -<table class=propdef><tbody> 2.1042 -<tr><th>Name:<td><dfn class=css data-dfn-type=property data-export="" id=propdef-box-sizing>box-sizing<a class=self-link href=#propdef-box-sizing></a></dfn></tr> 2.1043 -<tr><th>Value:<td> 2.1044 + 2.1045 + <p>A list of radio buttons can also be selected with the <span class="css">::choices</span> pseudo-element, 2.1046 +and the currently chosen radio button can be selected with the <span class="css">::value</span> pseudo-element.</p> 2.1047 + 2.1048 + 2.1049 + <h2 class="heading settled" data-level="4" id="box-model"><span class="secno">4. </span><span class="content">Box Model addition</span><a class="self-link" href="#box-model"></a></h2> 2.1050 + 2.1051 + 2.1052 + <h3 class="heading settled" data-level="4.1" id="box-sizing"><span class="secno">4.1. </span><span class="content"><a class="property" data-link-type="propdesc" href="#propdef-box-sizing">box-sizing</a> property</span><a class="self-link" href="#box-sizing"></a></h3> 2.1053 + 2.1054 + 2.1055 + <table class="propdef"> 2.1056 + <tbody> 2.1057 + 2.1058 + <tr> 2.1059 + <th>Name:</th> 2.1060 + <td><dfn class="css" data-dfn-type="property" data-export="" id="propdef-box-sizing">box-sizing<a class="self-link" href="#propdef-box-sizing"></a></dfn></td></tr> 2.1061 + 2.1062 + 2.1063 + <tr> 2.1064 + <th>Value:</th> 2.1065 + <td> 2.1066 content-box | 2.1067 padding-box | 2.1068 border-box | 2.1069 -inherit</tr> 2.1070 -<tr><th>Initial:<td>content-box</tr> 2.1071 -<tr><th>Applies to:<td>all elements that accept width or height</tr> 2.1072 -<tr><th>Inherited:<td>no</tr> 2.1073 -<tr><th>Percentages:<td>N/A</tr> 2.1074 -<tr><th>Media:<td>visual</tr> 2.1075 -<tr><th>Computed value:<td>specified value</tr> 2.1076 -<tr><th>Animatable:<td>no</tr> 2.1077 -</table> 2.1078 - 2.1079 -<dl> 2.1080 -<dt>content-box</dt> 2.1081 -<dd>This is the behavior of width and height as specified by CSS2.1. 2.1082 +inherit</td></tr> 2.1083 + 2.1084 + 2.1085 + <tr> 2.1086 + <th>Initial:</th> 2.1087 + <td>content-box</td></tr> 2.1088 + 2.1089 + 2.1090 + <tr> 2.1091 + <th>Applies to:</th> 2.1092 + <td>all elements that accept width or height</td></tr> 2.1093 + 2.1094 + 2.1095 + <tr> 2.1096 + <th>Inherited:</th> 2.1097 + <td>no</td></tr> 2.1098 + 2.1099 + 2.1100 + <tr> 2.1101 + <th>Percentages:</th> 2.1102 + <td>N/A</td></tr> 2.1103 + 2.1104 + 2.1105 + <tr> 2.1106 + <th>Media:</th> 2.1107 + <td>visual</td></tr> 2.1108 + 2.1109 + 2.1110 + <tr> 2.1111 + <th>Computed value:</th> 2.1112 + <td>specified value</td></tr> 2.1113 + 2.1114 + 2.1115 + <tr> 2.1116 + <th>Animatable:</th> 2.1117 + <td>no</td></tr> 2.1118 + 2.1119 + 2.1120 + </tbody></table> 2.1121 + 2.1122 + 2.1123 + <dl> 2.1124 + 2.1125 + <dt>content-box</dt> 2.1126 + 2.1127 + <dd>This is the behavior of width and height as specified by CSS2.1. 2.1128 The specified width and height (and respective min/max properties) 2.1129 apply to the width and height respectively of the content box of the element. 2.1130 The padding and border of the element are laid out 2.1131 and drawn outside the specified width and height.</dd> 2.1132 -<dt>padding-box</dt> 2.1133 -<dd> 2.1134 + 2.1135 + <dt>padding-box</dt> 2.1136 + 2.1137 + <dd> 2.1138 The specified width and height (and respective min/max properties) 2.1139 on this element determine the padding box of the element. 2.1140 That is, any padding specified on the element is laid out 2.1141 and drawn inside this specified width and height. 2.1142 The content width and height are calculated by 2.1143 subtracting the padding widths of the respective sides 2.1144 -from the specified <a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css2/visudet.html#propdef-width>width</a> and 2.1145 -<a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css2/visudet.html#propdef-height>height</a> properties. 2.1146 +from the specified <a class="property" data-link-type="propdesc" href="http://dev.w3.org/csswg/css2/visudet.html#propdef-width">width</a> and 2.1147 +<a class="property" data-link-type="propdesc" href="http://dev.w3.org/csswg/css2/visudet.html#propdef-height">height</a> properties. 2.1148 As the content width and height 2.1149 -<a href=http://www.w3.org/TR/CSS21/visudet.html#the-width-property> 2.1150 -cannot be negative</a> (<a data-biblio-type=normative data-link-type=biblio href=#biblio-css21 title=CSS21>[CSS21]</a>, section 10.2), 2.1151 +<a href="http://www.w3.org/TR/CSS21/visudet.html#the-width-property"> 2.1152 +cannot be negative</a> (<a data-biblio-type="normative" data-link-type="biblio" href="#biblio-css21" title="CSS21">[CSS21]</a>, section 10.2), 2.1153 this computation is floored at 0. 2.1154 </dd> 2.1155 -<dt>border-box</dt> 2.1156 -<dd>The specified width and height (and respective min/max properties) on this element 2.1157 + 2.1158 + <dt>border-box</dt> 2.1159 + 2.1160 + <dd>The specified width and height (and respective min/max properties) on this element 2.1161 determine the border box of the element. 2.1162 That is, any padding or border specified on the element 2.1163 is laid out and drawn inside this specified width and height. 2.1164 The content width and height are calculated 2.1165 by subtracting the border and padding widths of the respective sides 2.1166 -from the specified <a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css2/visudet.html#propdef-width>width</a> 2.1167 -and <a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css2/visudet.html#propdef-height>height</a> properties. 2.1168 +from the specified <a class="property" data-link-type="propdesc" href="http://dev.w3.org/csswg/css2/visudet.html#propdef-width">width</a> 2.1169 +and <a class="property" data-link-type="propdesc" href="http://dev.w3.org/csswg/css2/visudet.html#propdef-height">height</a> properties. 2.1170 As the content width and height 2.1171 -<a href=http://www.w3.org/TR/CSS21/visudet.html#the-width-property>cannot be negative</a> (<a data-biblio-type=normative data-link-type=biblio href=#biblio-css21 title=CSS21>[CSS21]</a>, section 10.2), 2.1172 +<a href="http://www.w3.org/TR/CSS21/visudet.html#the-width-property">cannot be negative</a> (<a data-biblio-type="normative" data-link-type="biblio" href="#biblio-css21" title="CSS21">[CSS21]</a>, section 10.2), 2.1173 this computation is floored at 0. 2.1174 2.1175 -<p class=note role=note>Note: This is the behavior of width and height as commonly implemented 2.1176 + 2.1177 + <p class="note" role="note">Note: This is the behavior of width and height as commonly implemented 2.1178 by legacy HTML user agents for replaced elements and input elements.</p> 2.1179 </dd> 2.1180 </dl> 2.1181 2.1182 2.1183 -<div class=example><p style=display:none>Example(s): 2.1184 -<h4 class="no-num no-toc heading settled" id=box-sizing-example><span class=content>Using box-sizing to evenly share space</span><a class=self-link href=#box-sizing-example></a></h4> 2.1185 - 2.1186 -<p>This example uses box-sizing to evenly horizontally split 2.1187 + 2.1188 + <div class="example"> 2.1189 + <p style="display:none">Example(s): 2.1190 +</p> 2.1191 + <h4 class="no-num no-toc heading settled" id="box-sizing-example"><span class="content">Using box-sizing to evenly share space</span><a class="self-link" href="#box-sizing-example"></a></h4> 2.1192 + 2.1193 + 2.1194 + <p>This example uses box-sizing to evenly horizontally split 2.1195 two divs with fixed size borders inside a div container, 2.1196 which would otherwise require additional markup.</p> 2.1197 2.1198 -<p>sample CSS:</p> 2.1199 -<pre><code class=lang-css>div.container { 2.1200 + 2.1201 + <p>sample CSS:</p> 2.1202 + 2.1203 + <pre><code class="lang-css">div.container { 2.1204 width:38em; 2.1205 border:1em solid black; 2.1206 } 2.1207 @@ -1290,101 +1184,276 @@ 2.1208 } 2.1209 </code></pre> 2.1210 2.1211 -<p>sample HTML fragment:</p> 2.1212 -<pre><code class=lang-markup><div class="container"> 2.1213 -<div class="split">This div occupies the left half.</div> 2.1214 -<div class="split">This div occupies the right half.</div> 2.1215 -</div> 2.1216 + 2.1217 + <p>sample HTML fragment:</p> 2.1218 + 2.1219 + <pre><code class="lang-markup"><div class="container"> 2.1220 +<div class="split">This div occupies the left half.</div> 2.1221 +<div class="split">This div occupies the right half.</div> 2.1222 +</div> 2.1223 </code></pre> 2.1224 2.1225 -<p>demonstration of sample CSS and HTML:</p> 2.1226 -<div style="width:38em; border:1em solid black"><div style="box-sizing:border-box; width:50%; border:1em silver ridge; float:left">This div should occupy the left half.</div><div style="box-sizing:border-box; width:50%; border:1em silver ridge; float:left">This div should occupy the right half.</div>The two divs above should appear side by side, each (including borders) 50% of the content width of their container. If instead they are stacked one on top of the other then your browser does not support <a class=property data-link-type=propdesc href=#propdef-box-sizing>box-sizing</a>. 2.1227 + 2.1228 + <p>demonstration of sample CSS and HTML:</p> 2.1229 + 2.1230 + <div style="width:38em; border:1em solid black"> 2.1231 + <div style="box-sizing:border-box; width:50%; border:1em silver ridge; float:left">This div should occupy the left half.</div> 2.1232 + <div style="box-sizing:border-box; width:50%; border:1em silver ridge; float:left">This div should occupy the right half.</div>The two divs above should appear side by side, each (including borders) 50% of the content width of their container. If instead they are stacked one on top of the other then your browser does not support <a class="property" data-link-type="propdesc" href="#propdef-box-sizing">box-sizing</a>. 2.1233 </div> 2.1234 </div> 2.1235 2.1236 -<p class=note role=note>Note: The <a class=css data-link-type=maybe href=http://dev.w3.org/fxtf/masking/#valuedef-padding-box0>padding-box</a> value is at risk.</p> 2.1237 - 2.1238 -<h2 class="heading settled" data-level=6 id=outline-props><span class=secno>6. </span><span class=content>Outline properties</span><a class=self-link href=#outline-props></a></h2> 2.1239 - 2.1240 -<p>At times, style sheet authors may want to create outlines around 2.1241 + 2.1242 + <p class="note" role="note">Note: The <a class="css" data-link-type="maybe" href="http://dev.w3.org/fxtf/masking/#valuedef-padding-box0">padding-box</a> value is at risk.</p> 2.1243 + 2.1244 + 2.1245 + <h2 class="heading settled" data-level="5" id="outline-props"><span class="secno">5. </span><span class="content">Outline properties</span><a class="self-link" href="#outline-props"></a></h2> 2.1246 + 2.1247 + 2.1248 + <p>At times, style sheet authors may want to create outlines around 2.1249 visual objects such as buttons, active form fields, image maps, etc., 2.1250 to make them stand out. Outlines differ from borders in the following 2.1251 ways:</p> 2.1252 2.1253 -<ol> 2.1254 -<li>Outlines do not take up space. 2.1255 -<li>Outlines may be non-rectangular. 2.1256 -</ol> 2.1257 - 2.1258 -<p>The outline properties control the style of these dynamic outlines.</p> 2.1259 - 2.1260 -<h3 class="heading settled" data-level=6.1 id=outline><span class=secno>6.1. </span><span class=content><a class=property data-link-type=propdesc href=#propdef-outline>outline</a> property</span><a class=self-link href=#outline></a></h3> 2.1261 - 2.1262 -<table class=propdef><tbody> 2.1263 -<tr><th>Name:<td><dfn class=css data-dfn-type=property data-export="" id=propdef-outline>outline<a class=self-link href=#propdef-outline></a></dfn></tr> 2.1264 -<tr><th>Value:<td> 2.1265 -[ <<a class=property data-link-type=propdesc href=#propdef-outline-color>outline-color</a>> || <<a class=property data-link-type=propdesc href=#propdef-outline-style>outline-style</a>> || 2.1266 -<<a class=property data-link-type=propdesc href=#propdef-outline-width>outline-width</a>> ] | 2.1267 + 2.1268 + <ol> 2.1269 + 2.1270 + <li>Outlines do not take up space. 2.1271 +</li> 2.1272 + <li>Outlines may be non-rectangular. 2.1273 +</li></ol> 2.1274 + 2.1275 + 2.1276 + <p>The outline properties control the style of these dynamic outlines.</p> 2.1277 + 2.1278 + 2.1279 + <h3 class="heading settled" data-level="5.1" id="outline"><span class="secno">5.1. </span><span class="content"><a class="property" data-link-type="propdesc" href="#propdef-outline">outline</a> property</span><a class="self-link" href="#outline"></a></h3> 2.1280 + 2.1281 + 2.1282 + <table class="propdef"> 2.1283 + <tbody> 2.1284 + 2.1285 + <tr> 2.1286 + <th>Name:</th> 2.1287 + <td><dfn class="css" data-dfn-type="property" data-export="" id="propdef-outline">outline<a class="self-link" href="#propdef-outline"></a></dfn></td></tr> 2.1288 + 2.1289 + 2.1290 + <tr> 2.1291 + <th>Value:</th> 2.1292 + <td> 2.1293 +[ <<a class="property" data-link-type="propdesc" href="#propdef-outline-color">outline-color</a>> || <<a class="property" data-link-type="propdesc" href="#propdef-outline-style">outline-style</a>> || 2.1294 +<<a class="property" data-link-type="propdesc" href="#propdef-outline-width">outline-width</a>> ] | 2.1295 inherit 2.1296 -</tr> 2.1297 -<tr><th>Initial:<td>see individual properties</tr> 2.1298 -<tr><th>Applies to:<td>all elements</tr> 2.1299 -<tr><th>Inherited:<td>no</tr> 2.1300 -<tr><th>Percentages:<td>N/A</tr> 2.1301 -<tr><th>Media:<td>visual</tr> 2.1302 -<tr><th>Computed value:<td>see individual properties</tr> 2.1303 -<tr><th>Animatable:<td>see individual properties</tr> 2.1304 -</table> 2.1305 - 2.1306 -<h3 class="heading settled" data-level=6.2 id=outline-width><span class=secno>6.2. </span><span class=content><a class=property data-link-type=propdesc href=#propdef-outline-width>outline-width</a> property</span><a class=self-link href=#outline-width></a></h3> 2.1307 - 2.1308 -<table class=propdef><tbody> 2.1309 -<tr><th>Name:<td><dfn class=css data-dfn-type=property data-export="" id=propdef-outline-width>outline-width<a class=self-link href=#propdef-outline-width></a></dfn></tr> 2.1310 -<tr><th>Value:<td><a class=production data-link-type=propdesc href=http://dev.w3.org/csswg/css2/box.html#propdef-border-width title=border-width><‘border-width’></a> | inherit</tr> 2.1311 -<tr><th>Initial:<td>medium</tr> 2.1312 -<tr><th>Applies to:<td>all elements</tr> 2.1313 -<tr><th>Inherited:<td>no</tr> 2.1314 -<tr><th>Percentages:<td>N/A</tr> 2.1315 -<tr><th>Media:<td>visual</tr> 2.1316 -<tr><th>Computed value:<td>absolute length; <span class=css>0</span> if the outline style is <a class=css data-link-type=maybe href=http://dev.w3.org/csswg/css-animations-1/#valuedef-none0>none</a>.</tr> 2.1317 -<tr><th>Animatable:<td>as <a href=http://dev.w3.org/csswg/css3-transitions/#animtype-length>length</a></tr> 2.1318 -</table> 2.1319 - 2.1320 -<h3 class="heading settled" data-level=6.3 id=outline-style><span class=secno>6.3. </span><span class=content><a class=property data-link-type=propdesc href=#propdef-outline-style>outline-style</a> property</span><a class=self-link href=#outline-style></a></h3> 2.1321 - 2.1322 -<table class=propdef><tbody> 2.1323 -<tr><th>Name:<td><dfn class=css data-dfn-type=property data-export="" id=propdef-outline-style>outline-style<a class=self-link href=#propdef-outline-style></a></dfn></tr> 2.1324 -<tr><th>Value:<td>auto | <a class=production data-link-type=propdesc href=http://dev.w3.org/csswg/css2/box.html#propdef-border-style title=border-style><‘border-style’></a> | inherit</tr> 2.1325 -<tr><th>Initial:<td>none</tr> 2.1326 -<tr><th>Applies to:<td>all elements</tr> 2.1327 -<tr><th>Inherited:<td>no</tr> 2.1328 -<tr><th>Percentages:<td>N/A</tr> 2.1329 -<tr><th>Media:<td>visual</tr> 2.1330 -<tr><th>Computed value:<td>specified value</tr> 2.1331 -<tr><th>Animatable:<td>no</tr> 2.1332 -</table> 2.1333 - 2.1334 -<h3 class="heading settled" data-level=6.4 id=outline-color><span class=secno>6.4. </span><span class=content><a class=property data-link-type=propdesc href=#propdef-outline-color>outline-color</a> property</span><a class=self-link href=#outline-color></a></h3> 2.1335 - 2.1336 -<table class=propdef><tbody> 2.1337 -<tr><th>Name:<td><dfn class=css data-dfn-type=property data-export="" id=propdef-outline-color>outline-color<a class=self-link href=#propdef-outline-color></a></dfn></tr> 2.1338 -<tr><th>Value:<td><a class="production css" data-link-type=type href=http://dev.w3.org/csswg/css-color-3/#valuea-def-color><color></a> | invert | inherit</tr> 2.1339 -<tr><th>Initial:<td>invert</tr> 2.1340 -<tr><th>Applies to:<td>all elements</tr> 2.1341 -<tr><th>Inherited:<td>no</tr> 2.1342 -<tr><th>Percentages:<td>N/A</tr> 2.1343 -<tr><th>Media:<td>visual</tr> 2.1344 -<tr><th>Computed value:<td>The computed value for <a class=css data-link-type=maybe href=http://dev.w3.org/csswg/css2/ui.html#value-def-invert>invert</a> is <a class=css data-link-type=maybe href=http://dev.w3.org/csswg/css2/ui.html#value-def-invert>invert</a>. For <color> values, the computed value is as defined for the <a data-biblio-type=normative data-link-type=biblio href=#biblio-css3color title=CSS3COLOR>[CSS3COLOR]</a> <a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css-color-3/#color0>color</a> property.</tr> 2.1345 -<tr><th>Animatable:<td>as <a href=http://dev.w3.org/csswg/css3-transitions/#animtype-color>color</a></tr> 2.1346 -</table> 2.1347 - 2.1348 -<p>The outline created with the outline properties is drawn "over" a box, 2.1349 +</td></tr> 2.1350 + 2.1351 + 2.1352 + <tr> 2.1353 + <th>Initial:</th> 2.1354 + <td>see individual properties</td></tr> 2.1355 + 2.1356 + 2.1357 + <tr> 2.1358 + <th>Applies to:</th> 2.1359 + <td>all elements</td></tr> 2.1360 + 2.1361 + 2.1362 + <tr> 2.1363 + <th>Inherited:</th> 2.1364 + <td>no</td></tr> 2.1365 + 2.1366 + 2.1367 + <tr> 2.1368 + <th>Percentages:</th> 2.1369 + <td>N/A</td></tr> 2.1370 + 2.1371 + 2.1372 + <tr> 2.1373 + <th>Media:</th> 2.1374 + <td>visual</td></tr> 2.1375 + 2.1376 + 2.1377 + <tr> 2.1378 + <th>Computed value:</th> 2.1379 + <td>see individual properties</td></tr> 2.1380 + 2.1381 + 2.1382 + <tr> 2.1383 + <th>Animatable:</th> 2.1384 + <td>see individual properties</td></tr> 2.1385 + 2.1386 + 2.1387 + </tbody></table> 2.1388 + 2.1389 + 2.1390 + <h3 class="heading settled" data-level="5.2" id="outline-width"><span class="secno">5.2. </span><span class="content"><a class="property" data-link-type="propdesc" href="#propdef-outline-width">outline-width</a> property</span><a class="self-link" href="#outline-width"></a></h3> 2.1391 + 2.1392 + 2.1393 + <table class="propdef"> 2.1394 + <tbody> 2.1395 + 2.1396 + <tr> 2.1397 + <th>Name:</th> 2.1398 + <td><dfn class="css" data-dfn-type="property" data-export="" id="propdef-outline-width">outline-width<a class="self-link" href="#propdef-outline-width"></a></dfn></td></tr> 2.1399 + 2.1400 + 2.1401 + <tr> 2.1402 + <th>Value:</th> 2.1403 + <td><a class="production" data-link-type="propdesc" href="http://dev.w3.org/csswg/css2/box.html#propdef-border-width" title="border-width"><‘border-width’></a> | inherit</td></tr> 2.1404 + 2.1405 + 2.1406 + <tr> 2.1407 + <th>Initial:</th> 2.1408 + <td>medium</td></tr> 2.1409 + 2.1410 + 2.1411 + <tr> 2.1412 + <th>Applies to:</th> 2.1413 + <td>all elements</td></tr> 2.1414 + 2.1415 + 2.1416 + <tr> 2.1417 + <th>Inherited:</th> 2.1418 + <td>no</td></tr> 2.1419 + 2.1420 + 2.1421 + <tr> 2.1422 + <th>Percentages:</th> 2.1423 + <td>N/A</td></tr> 2.1424 + 2.1425 + 2.1426 + <tr> 2.1427 + <th>Media:</th> 2.1428 + <td>visual</td></tr> 2.1429 + 2.1430 + 2.1431 + <tr> 2.1432 + <th>Computed value:</th> 2.1433 + <td>absolute length; <span class="css">0</span> if the outline style is <a class="css" data-link-type="maybe" href="http://dev.w3.org/csswg/css-animations-1/#valuedef-none0">none</a>.</td></tr> 2.1434 + 2.1435 + 2.1436 + <tr> 2.1437 + <th>Animatable:</th> 2.1438 + <td>as <a href="http://dev.w3.org/csswg/css3-transitions/#animtype-length">length</a></td></tr> 2.1439 + 2.1440 + 2.1441 + </tbody></table> 2.1442 + 2.1443 + 2.1444 + <h3 class="heading settled" data-level="5.3" id="outline-style"><span class="secno">5.3. </span><span class="content"><a class="property" data-link-type="propdesc" href="#propdef-outline-style">outline-style</a> property</span><a class="self-link" href="#outline-style"></a></h3> 2.1445 + 2.1446 + 2.1447 + <table class="propdef"> 2.1448 + <tbody> 2.1449 + 2.1450 + <tr> 2.1451 + <th>Name:</th> 2.1452 + <td><dfn class="css" data-dfn-type="property" data-export="" id="propdef-outline-style">outline-style<a class="self-link" href="#propdef-outline-style"></a></dfn></td></tr> 2.1453 + 2.1454 + 2.1455 + <tr> 2.1456 + <th>Value:</th> 2.1457 + <td>auto | <a class="production" data-link-type="propdesc" href="http://dev.w3.org/csswg/css2/box.html#propdef-border-style" title="border-style"><‘border-style’></a> | inherit</td></tr> 2.1458 + 2.1459 + 2.1460 + <tr> 2.1461 + <th>Initial:</th> 2.1462 + <td>none</td></tr> 2.1463 + 2.1464 + 2.1465 + <tr> 2.1466 + <th>Applies to:</th> 2.1467 + <td>all elements</td></tr> 2.1468 + 2.1469 + 2.1470 + <tr> 2.1471 + <th>Inherited:</th> 2.1472 + <td>no</td></tr> 2.1473 + 2.1474 + 2.1475 + <tr> 2.1476 + <th>Percentages:</th> 2.1477 + <td>N/A</td></tr> 2.1478 + 2.1479 + 2.1480 + <tr> 2.1481 + <th>Media:</th> 2.1482 + <td>visual</td></tr> 2.1483 + 2.1484 + 2.1485 + <tr> 2.1486 + <th>Computed value:</th> 2.1487 + <td>specified value</td></tr> 2.1488 + 2.1489 + 2.1490 + <tr> 2.1491 + <th>Animatable:</th> 2.1492 + <td>no</td></tr> 2.1493 + 2.1494 + 2.1495 + </tbody></table> 2.1496 + 2.1497 + 2.1498 + <h3 class="heading settled" data-level="5.4" id="outline-color"><span class="secno">5.4. </span><span class="content"><a class="property" data-link-type="propdesc" href="#propdef-outline-color">outline-color</a> property</span><a class="self-link" href="#outline-color"></a></h3> 2.1499 + 2.1500 + 2.1501 + <table class="propdef"> 2.1502 + <tbody> 2.1503 + 2.1504 + <tr> 2.1505 + <th>Name:</th> 2.1506 + <td><dfn class="css" data-dfn-type="property" data-export="" id="propdef-outline-color">outline-color<a class="self-link" href="#propdef-outline-color"></a></dfn></td></tr> 2.1507 + 2.1508 + 2.1509 + <tr> 2.1510 + <th>Value:</th> 2.1511 + <td><a class="production css" data-link-type="type" href="http://dev.w3.org/csswg/css-color-3/#valuea-def-color"><color></a> | invert | inherit</td></tr> 2.1512 + 2.1513 + 2.1514 + <tr> 2.1515 + <th>Initial:</th> 2.1516 + <td>invert</td></tr> 2.1517 + 2.1518 + 2.1519 + <tr> 2.1520 + <th>Applies to:</th> 2.1521 + <td>all elements</td></tr> 2.1522 + 2.1523 + 2.1524 + <tr> 2.1525 + <th>Inherited:</th> 2.1526 + <td>no</td></tr> 2.1527 + 2.1528 + 2.1529 + <tr> 2.1530 + <th>Percentages:</th> 2.1531 + <td>N/A</td></tr> 2.1532 + 2.1533 + 2.1534 + <tr> 2.1535 + <th>Media:</th> 2.1536 + <td>visual</td></tr> 2.1537 + 2.1538 + 2.1539 + <tr> 2.1540 + <th>Computed value:</th> 2.1541 + <td>The computed value for <a class="css" data-link-type="maybe" href="http://dev.w3.org/csswg/css2/ui.html#value-def-invert">invert</a> is <a class="css" data-link-type="maybe" href="http://dev.w3.org/csswg/css2/ui.html#value-def-invert">invert</a>. For <color> values, the computed value is as defined for the <a data-biblio-type="normative" data-link-type="biblio" href="#biblio-css3color" title="CSS3COLOR">[CSS3COLOR]</a> <a class="property" data-link-type="propdesc" href="http://dev.w3.org/csswg/css-color-3/#color0">color</a> property.</td></tr> 2.1542 + 2.1543 + 2.1544 + <tr> 2.1545 + <th>Animatable:</th> 2.1546 + <td>as <a href="http://dev.w3.org/csswg/css3-transitions/#animtype-color">color</a></td></tr> 2.1547 + 2.1548 + 2.1549 + </tbody></table> 2.1550 + 2.1551 + 2.1552 + <p>The outline created with the outline properties is drawn "over" a box, 2.1553 i.e., the outline is always on top, 2.1554 and doesn’t influence the position or size of the box, 2.1555 or of any other boxes. 2.1556 Therefore, displaying or suppressing outlines does not cause reflow.</p> 2.1557 2.1558 -<p>Outlines may be non-rectangular. 2.1559 + 2.1560 + <p>Outlines may be non-rectangular. 2.1561 For example, if the element is broken across several lines, 2.1562 the outline should be an outline or minimum set of outlines 2.1563 that encloses all the element’s boxes. 2.1564 @@ -1397,20 +1466,22 @@ 2.1565 the outline that encloses a region appropriate 2.1566 for conveying the concept of focus to the user.</p> 2.1567 2.1568 -<p>The <a class=property data-link-type=propdesc href=#propdef-outline-width>outline-width</a> property accepts 2.1569 + 2.1570 + <p>The <a class="property" data-link-type="propdesc" href="#propdef-outline-width">outline-width</a> property accepts 2.1571 the same values as 2.1572 - <a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css2/box.html#propdef-border-width>border-width</a> 2.1573 -(<a data-biblio-type=normative data-link-type=biblio href=#biblio-css21 title=CSS21>[CSS21]</a>, section 8.5.1).</p> 2.1574 - 2.1575 -<p>The <a class=property data-link-type=propdesc href=#propdef-outline-style>outline-style</a> property accepts 2.1576 + <a class="property" data-link-type="propdesc" href="http://dev.w3.org/csswg/css2/box.html#propdef-border-width">border-width</a> 2.1577 +(<a data-biblio-type="normative" data-link-type="biblio" href="#biblio-css21" title="CSS21">[CSS21]</a>, section 8.5.1).</p> 2.1578 + 2.1579 + 2.1580 + <p>The <a class="property" data-link-type="propdesc" href="#propdef-outline-style">outline-style</a> property accepts 2.1581 the same values as 2.1582 - <a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css2/box.html#propdef-border-style>border-style</a> 2.1583 -(<a data-biblio-type=normative data-link-type=biblio href=#biblio-css21 title=CSS21>[CSS21]</a>, section 8.5.3), except that 2.1584 -<a class=css data-link-type=maybe href=http://dev.w3.org/csswg/css-backgrounds-3/#hidden>hidden</a> is not a legal outline style. 2.1585 + <a class="property" data-link-type="propdesc" href="http://dev.w3.org/csswg/css2/box.html#propdef-border-style">border-style</a> 2.1586 +(<a data-biblio-type="normative" data-link-type="biblio" href="#biblio-css21" title="CSS21">[CSS21]</a>, section 8.5.3), except that 2.1587 +<a class="css" data-link-type="maybe" href="http://dev.w3.org/csswg/css-backgrounds-3/#hidden">hidden</a> is not a legal outline style. 2.1588 In addition, in CSS3, 2.1589 -<a class=property data-link-type=propdesc href=#propdef-outline-style>outline-style</a> 2.1590 -accepts the value <a class=css data-link-type=maybe href=http://dev.w3.org/csswg/css-align-3/#valdef-justify-content-align-content-auto>auto</a>. 2.1591 -The <a class=css data-link-type=maybe href=http://dev.w3.org/csswg/css-align-3/#valdef-justify-content-align-content-auto>auto</a> value permits the user agent 2.1592 +<a class="property" data-link-type="propdesc" href="#propdef-outline-style">outline-style</a> 2.1593 +accepts the value <a class="css" data-link-type="maybe" href="http://dev.w3.org/csswg/css-align-3/#valdef-justify-content-align-content-auto">auto</a>. 2.1594 +The <a class="css" data-link-type="maybe" href="http://dev.w3.org/csswg/css-align-3/#valdef-justify-content-align-content-auto">auto</a> value permits the user agent 2.1595 to render a custom outline style, 2.1596 typically a style which is either a user interface default for the platform, 2.1597 or perhaps a style that is richer 2.1598 @@ -1418,199 +1489,326 @@ 2.1599 e.g. a rounded edge outline with semi-translucent outer pixels 2.1600 that appears to glow. 2.1601 As such, this specification does not define how the 2.1602 -<a class=property data-link-type=propdesc href=#propdef-outline-color>outline-color</a> 2.1603 +<a class="property" data-link-type="propdesc" href="#propdef-outline-color">outline-color</a> 2.1604 is incorporated or used (if at all) when rendering 2.1605 -<a class=css data-link-type=maybe href=http://dev.w3.org/csswg/css-align-3/#valdef-justify-content-align-content-auto>auto</a> style outlines. 2.1606 -User agents may treat <a class=css data-link-type=maybe href=http://dev.w3.org/csswg/css-align-3/#valdef-justify-content-align-content-auto>auto</a> as 2.1607 -<a class=css data-link-type=maybe href=http://dev.w3.org/csswg/css-backgrounds-3/#solid>solid</a>.</p> 2.1608 - 2.1609 -<p>The <a class=property data-link-type=propdesc href=#propdef-outline-color>outline-color</a> property 2.1610 -accepts all colors, as well as the keyword <dfn data-dfn-type=dfn data-noexport="" id=invert>invert<a class=self-link href=#invert></a></dfn>. 2.1611 -<a class=css data-link-type=maybe href=http://dev.w3.org/csswg/css2/ui.html#value-def-invert>Invert</a> is expected to perform a color inversion on the pixels on the screen. 2.1612 +<a class="css" data-link-type="maybe" href="http://dev.w3.org/csswg/css-align-3/#valdef-justify-content-align-content-auto">auto</a> style outlines. 2.1613 +User agents may treat <a class="css" data-link-type="maybe" href="http://dev.w3.org/csswg/css-align-3/#valdef-justify-content-align-content-auto">auto</a> as 2.1614 +<a class="css" data-link-type="maybe" href="http://dev.w3.org/csswg/css-backgrounds-3/#solid">solid</a>.</p> 2.1615 + 2.1616 + 2.1617 + <p>The <a class="property" data-link-type="propdesc" href="#propdef-outline-color">outline-color</a> property 2.1618 +accepts all colors, as well as the keyword <dfn data-dfn-type="dfn" data-noexport="" id="invert">invert<a class="self-link" href="#invert"></a></dfn>. 2.1619 +<a class="css" data-link-type="maybe" href="http://dev.w3.org/csswg/css2/ui.html#value-def-invert">Invert</a> is expected to perform a color inversion on the pixels on the screen. 2.1620 This is a common trick to ensure the focus border is visible, 2.1621 regardless of color background.</p> 2.1622 2.1623 -<p>Conformant UAs may ignore the <a class=css data-link-type=maybe href=http://dev.w3.org/csswg/css2/ui.html#value-def-invert>invert</a> value 2.1624 + 2.1625 + <p>Conformant UAs may ignore the <a class="css" data-link-type="maybe" href="http://dev.w3.org/csswg/css2/ui.html#value-def-invert">invert</a> value 2.1626 on platforms that do not support color inversion of the pixels on the screen. 2.1627 -If the UA does not support the <a class=css data-link-type=maybe href=http://dev.w3.org/csswg/css2/ui.html#value-def-invert>invert</a> value 2.1628 -then the initial value of the <a class=property data-link-type=propdesc href=#propdef-outline-color>outline-color</a> property 2.1629 -is the <a class=css data-link-type=maybe href=http://dev.w3.org/csswg/css-text-decor-3/#valuedef-currentcolor>currentColor</a> <a data-biblio-type=normative data-link-type=biblio href=#biblio-css3color title=CSS3COLOR>[CSS3COLOR]</a> keyword.</p> 2.1630 - 2.1631 -<p>The <a class=property data-link-type=propdesc href=#propdef-outline>outline</a> property is a shorthand property, 2.1632 -and sets all three of <a class=property data-link-type=propdesc href=#propdef-outline-style>outline-style</a>, 2.1633 -<a class=property data-link-type=propdesc href=#propdef-outline-width>outline-width</a>, 2.1634 -and <a class=property data-link-type=propdesc href=#propdef-outline-color>outline-color</a>.</p> 2.1635 - 2.1636 -<p class=note role=note>Note: The outline is the same on all sides. 2.1637 +If the UA does not support the <a class="css" data-link-type="maybe" href="http://dev.w3.org/csswg/css2/ui.html#value-def-invert">invert</a> value 2.1638 +then the initial value of the <a class="property" data-link-type="propdesc" href="#propdef-outline-color">outline-color</a> property 2.1639 +is the <a class="css" data-link-type="maybe" href="http://dev.w3.org/csswg/css-text-decor-3/#valuedef-currentcolor">currentColor</a> <a data-biblio-type="normative" data-link-type="biblio" href="#biblio-css3color" title="CSS3COLOR">[CSS3COLOR]</a> keyword.</p> 2.1640 + 2.1641 + 2.1642 + <p>The <a class="property" data-link-type="propdesc" href="#propdef-outline">outline</a> property is a shorthand property, 2.1643 +and sets all three of <a class="property" data-link-type="propdesc" href="#propdef-outline-style">outline-style</a>, 2.1644 +<a class="property" data-link-type="propdesc" href="#propdef-outline-width">outline-width</a>, 2.1645 +and <a class="property" data-link-type="propdesc" href="#propdef-outline-color">outline-color</a>.</p> 2.1646 + 2.1647 + 2.1648 + <p class="note" role="note">Note: The outline is the same on all sides. 2.1649 In contrast to borders, 2.1650 -there are no <a class=property data-link-type=propdesc>outline-top</a> or <a class=property data-link-type=propdesc>outline-left</a> etc. properties.</p> 2.1651 - 2.1652 -<p>This specification does not define how multiple overlapping outlines are drawn, 2.1653 +there are no <a class="property" data-link-type="propdesc">outline-top</a> or <a class="property" data-link-type="propdesc">outline-left</a> etc. properties.</p> 2.1654 + 2.1655 + 2.1656 + <p>This specification does not define how multiple overlapping outlines are drawn, 2.1657 or how outlines are drawn for boxes that are partially obscured behind other elements.</p> 2.1658 2.1659 -<div class=example><p style=display:none>Example(s): 2.1660 - 2.1661 -<p>Here’s an example of drawing a thick outline around a BUTTON element:</p> 2.1662 -<pre><code class=lang-css>button { outline: thick solid } 2.1663 + 2.1664 + <div class="example"> 2.1665 + <p style="display:none">Example(s): 2.1666 + 2.1667 +</p> 2.1668 + <p>Here’s an example of drawing a thick outline around a BUTTON element:</p> 2.1669 + 2.1670 + <pre><code class="lang-css">button { outline: thick solid } 2.1671 </code></pre> 2.1672 </div> 2.1673 2.1674 -<p>Graphical user interfaces may use outlines around elements 2.1675 + 2.1676 + <p>Graphical user interfaces may use outlines around elements 2.1677 to tell the user which element on the page has the focus. 2.1678 These outlines are in addition to any borders, 2.1679 and switching outlines on and off should not cause the document to reflow. 2.1680 The focus is the subject of user interaction in a document 2.1681 (e.g., for entering text, selecting a button, etc.).</p> 2.1682 2.1683 -<div class=example><p style=display:none>Example(s): 2.1684 - 2.1685 -<p>For example, to draw a thick black line around an element when it has the focus, 2.1686 + 2.1687 + <div class="example"> 2.1688 + <p style="display:none">Example(s): 2.1689 + 2.1690 +</p> 2.1691 + <p>For example, to draw a thick black line around an element when it has the focus, 2.1692 and a thick red line when it is active, 2.1693 the following rules can be used:</p> 2.1694 -<pre><code class=lang-css>:focus { outline: thick solid black } 2.1695 + 2.1696 + <pre><code class="lang-css">:focus { outline: thick solid black } 2.1697 :active { outline: thick solid red } 2.1698 </code></pre> 2.1699 </div> 2.1700 2.1701 -<p class=note role=note>Note: Since the outline does not affect formatting 2.1702 + 2.1703 + <p class="note" role="note">Note: Since the outline does not affect formatting 2.1704 (i.e., no space is left for it in the box model), 2.1705 it may well overlap other elements on the page.</p> 2.1706 2.1707 -<h3 class="heading settled" data-level=6.5 id=outline-offset><span class=secno>6.5. </span><span class=content><a class=property data-link-type=propdesc href=#propdef-outline-offset>outline-offset</a> property</span><a class=self-link href=#outline-offset></a></h3> 2.1708 - 2.1709 -<p>By default, the outline is drawn starting just outside the border edge. 2.1710 + 2.1711 + <h3 class="heading settled" data-level="5.5" id="outline-offset"><span class="secno">5.5. </span><span class="content"><a class="property" data-link-type="propdesc" href="#propdef-outline-offset">outline-offset</a> property</span><a class="self-link" href="#outline-offset"></a></h3> 2.1712 + 2.1713 + 2.1714 + <p>By default, the outline is drawn starting just outside the border edge. 2.1715 However, it is possible to offset the outline and draw it beyond the border edge.</p> 2.1716 2.1717 -<table class=propdef><tbody> 2.1718 -<tr><th>Name:<td><dfn class=css data-dfn-type=property data-export="" id=propdef-outline-offset>outline-offset<a class=self-link href=#propdef-outline-offset></a></dfn></tr> 2.1719 -<tr><th>Value:<td><length> | inherit</tr> 2.1720 -<tr><th>Initial:<td>0</tr> 2.1721 -<tr><th>Applies to:<td>all elements</tr> 2.1722 -<tr><th>Inherited:<td>no</tr> 2.1723 -<tr><th>Percentages:<td>N/A</tr> 2.1724 -<tr><th>Media:<td>visual</tr> 2.1725 -<tr><th>Computed value:<td><length> value in absolute units (px or physical).</tr> 2.1726 -<tr><th>Animatable:<td>as <a href=http://dev.w3.org/csswg/css3-transitions/#animtype-length>length</a></tr> 2.1727 -</table> 2.1728 - 2.1729 -<p>If the computed value of <a class=property data-link-type=propdesc href=#propdef-outline-offset>outline-offset</a> 2.1730 + 2.1731 + <table class="propdef"> 2.1732 + <tbody> 2.1733 + 2.1734 + <tr> 2.1735 + <th>Name:</th> 2.1736 + <td><dfn class="css" data-dfn-type="property" data-export="" id="propdef-outline-offset">outline-offset<a class="self-link" href="#propdef-outline-offset"></a></dfn></td></tr> 2.1737 + 2.1738 + 2.1739 + <tr> 2.1740 + <th>Value:</th> 2.1741 + <td><length> | inherit</td></tr> 2.1742 + 2.1743 + 2.1744 + <tr> 2.1745 + <th>Initial:</th> 2.1746 + <td>0</td></tr> 2.1747 + 2.1748 + 2.1749 + <tr> 2.1750 + <th>Applies to:</th> 2.1751 + <td>all elements</td></tr> 2.1752 + 2.1753 + 2.1754 + <tr> 2.1755 + <th>Inherited:</th> 2.1756 + <td>no</td></tr> 2.1757 + 2.1758 + 2.1759 + <tr> 2.1760 + <th>Percentages:</th> 2.1761 + <td>N/A</td></tr> 2.1762 + 2.1763 + 2.1764 + <tr> 2.1765 + <th>Media:</th> 2.1766 + <td>visual</td></tr> 2.1767 + 2.1768 + 2.1769 + <tr> 2.1770 + <th>Computed value:</th> 2.1771 + <td><length> value in absolute units (px or physical).</td></tr> 2.1772 + 2.1773 + 2.1774 + <tr> 2.1775 + <th>Animatable:</th> 2.1776 + <td>as <a href="http://dev.w3.org/csswg/css3-transitions/#animtype-length">length</a></td></tr> 2.1777 + 2.1778 + 2.1779 + </tbody></table> 2.1780 + 2.1781 + 2.1782 + <p>If the computed value of <a class="property" data-link-type="propdesc" href="#propdef-outline-offset">outline-offset</a> 2.1783 is anything other than 0, 2.1784 then the outline is outset from the border edge by that amount.</p> 2.1785 2.1786 -<div class=example><p style=display:none>Example(s): 2.1787 - 2.1788 -<p>For example, 2.1789 + 2.1790 + <div class="example"> 2.1791 + <p style="display:none">Example(s): 2.1792 + 2.1793 +</p> 2.1794 + <p>For example, 2.1795 to leave 2 pixels of space between a focus outline 2.1796 and the element that has the focus or is active, 2.1797 the following rule can be used:</p> 2.1798 -<pre><code class=lang-css>:focus,:active { outline-offset: 2px } 2.1799 + 2.1800 + <pre><code class="lang-css">:focus,:active { outline-offset: 2px } 2.1801 </code></pre> 2.1802 </div> 2.1803 2.1804 2.1805 -<h2 class="heading settled" data-level=7 id=resizing-and-overflow><span class=secno>7. </span><span class=content>Resizing & Overflow</span><a class=self-link href=#resizing-and-overflow></a></h2> 2.1806 - 2.1807 -<p>CSS2.1 provides a mechanism for controlling the appearance of a scrolling mechanism 2.1808 + 2.1809 + <h2 class="heading settled" data-level="6" id="resizing-and-overflow"><span class="secno">6. </span><span class="content">Resizing & Overflow</span><a class="self-link" href="#resizing-and-overflow"></a></h2> 2.1810 + 2.1811 + 2.1812 + <p>CSS2.1 provides a mechanism for controlling the appearance of a scrolling mechanism 2.1813 (e.g. scrollbars) 2.1814 on block container elements. 2.1815 This specification adds to that a mechanism for controlling 2.1816 user resizability of elements as well as the ability to specify text overflow behavior.</p> 2.1817 2.1818 -<h3 class="heading settled" data-level=7.1 id=resize><span class=secno>7.1. </span><span class=content><a class=property data-link-type=propdesc href=#propdef-resize>resize</a> property</span><a class=self-link href=#resize></a></h3> 2.1819 - 2.1820 -<p>The <a class=property data-link-type=propdesc href=#propdef-resize>resize</a> property allows the author 2.1821 + 2.1822 + <h3 class="heading settled" data-level="6.1" id="resize"><span class="secno">6.1. </span><span class="content"><a class="property" data-link-type="propdesc" href="#propdef-resize">resize</a> property</span><a class="self-link" href="#resize"></a></h3> 2.1823 + 2.1824 + 2.1825 + <p>The <a class="property" data-link-type="propdesc" href="#propdef-resize">resize</a> property allows the author 2.1826 to specify whether or not an element is resizable by the user, 2.1827 and if so, along which axis/axes.</p> 2.1828 2.1829 -<table class=propdef><tbody> 2.1830 -<tr><th>Name:<td><dfn class=css data-dfn-type=property data-export="" id=propdef-resize>resize<a class=self-link href=#propdef-resize></a></dfn></tr> 2.1831 -<tr><th>Value: <td>none | both | horizontal | vertical | inherit</tr> 2.1832 -<tr><th>Initial:<td>none</tr> 2.1833 -<tr><th>Applies to:<td>elements with <a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css-overflow-3/#overflow0>overflow</a> other than visible</tr> 2.1834 -<tr><th>Inherited:<td>no</tr> 2.1835 -<tr><th>Percentages:<td>N/A</tr> 2.1836 -<tr><th>Media:<td>visual</tr> 2.1837 -<tr><th>Computed value:<td>specified value.</tr> 2.1838 -<tr><th>Animatable:<td>no</tr> 2.1839 -</table> 2.1840 - 2.1841 -<dl> 2.1842 -<dt>none</dt> 2.1843 -<dd>The UA does not present a resizing mechanism on the element, 2.1844 + 2.1845 + <table class="propdef"> 2.1846 + <tbody> 2.1847 + 2.1848 + <tr> 2.1849 + <th>Name:</th> 2.1850 + <td><dfn class="css" data-dfn-type="property" data-export="" id="propdef-resize">resize<a class="self-link" href="#propdef-resize"></a></dfn></td></tr> 2.1851 + 2.1852 + 2.1853 + <tr> 2.1854 + <th>Value: </th> 2.1855 + <td>none | both | horizontal | vertical | inherit</td></tr> 2.1856 + 2.1857 + 2.1858 + <tr> 2.1859 + <th>Initial:</th> 2.1860 + <td>none</td></tr> 2.1861 + 2.1862 + 2.1863 + <tr> 2.1864 + <th>Applies to:</th> 2.1865 + <td>elements with <a class="property" data-link-type="propdesc" href="http://dev.w3.org/csswg/css-overflow-3/#overflow0">overflow</a> other than visible</td></tr> 2.1866 + 2.1867 + 2.1868 + <tr> 2.1869 + <th>Inherited:</th> 2.1870 + <td>no</td></tr> 2.1871 + 2.1872 + 2.1873 + <tr> 2.1874 + <th>Percentages:</th> 2.1875 + <td>N/A</td></tr> 2.1876 + 2.1877 + 2.1878 + <tr> 2.1879 + <th>Media:</th> 2.1880 + <td>visual</td></tr> 2.1881 + 2.1882 + 2.1883 + <tr> 2.1884 + <th>Computed value:</th> 2.1885 + <td>specified value.</td></tr> 2.1886 + 2.1887 + 2.1888 + <tr> 2.1889 + <th>Animatable:</th> 2.1890 + <td>no</td></tr> 2.1891 + 2.1892 + 2.1893 + </tbody></table> 2.1894 + 2.1895 + 2.1896 + <dl> 2.1897 + 2.1898 + <dt>none</dt> 2.1899 + 2.1900 + <dd>The UA does not present a resizing mechanism on the element, 2.1901 and the user is given no direct manipulation mechanism to resize the element.</dd> 2.1902 -<dt>both</dt> 2.1903 -<dd>The UA presents a bidirectional resizing mechanism 2.1904 + 2.1905 + <dt>both</dt> 2.1906 + 2.1907 + <dd>The UA presents a bidirectional resizing mechanism 2.1908 to allow the user to adjust both the height and the width of the element.</dd> 2.1909 -<dt>horizontal</dt> 2.1910 -<dd>The UA presents a unidirectional horizontal resizing mechanism 2.1911 + 2.1912 + <dt>horizontal</dt> 2.1913 + 2.1914 + <dd>The UA presents a unidirectional horizontal resizing mechanism 2.1915 to allow the user to adjust only the width of the element.</dd> 2.1916 -<dt>vertical</dt> 2.1917 -<dd>The UA presents a unidirectional vertical resizing mechanism 2.1918 + 2.1919 + <dt>vertical</dt> 2.1920 + 2.1921 + <dd>The UA presents a unidirectional vertical resizing mechanism 2.1922 to allow the user to adjust only the height of the element.</dd> 2.1923 </dl> 2.1924 2.1925 -<p>Currently it is possible to control the appearance of the scrolling mechanism (if any) 2.1926 -on an element using the <a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css-overflow-3/#overflow0>overflow</a> property 2.1927 -(e.g. '<code class=lang-css>overflow: scroll</code>' vs. '<code class=lang-css>overflow: hidden</code>' etc.). 2.1928 -The purpose of the <a class=property data-link-type=propdesc href=#propdef-resize>resize</a> property 2.1929 + 2.1930 + <p>Currently it is possible to control the appearance of the scrolling mechanism (if any) 2.1931 +on an element using the <a class="property" data-link-type="propdesc" href="http://dev.w3.org/csswg/css-overflow-3/#overflow0">overflow</a> property 2.1932 +(e.g. '<code class="lang-css">overflow: scroll</code>' vs. '<code class="lang-css">overflow: hidden</code>' etc.). 2.1933 +The purpose of the <a class="property" data-link-type="propdesc" href="#propdef-resize">resize</a> property 2.1934 is to also allow control over the appearance and function of the resizing mechanism 2.1935 (e.g. a resize box or widget) on the element.</p> 2.1936 2.1937 -<p class=note role=note>Note: The resizing mechanism is NOT the same as the scrolling mechanism. 2.1938 + 2.1939 + <p class="note" role="note">Note: The resizing mechanism is NOT the same as the scrolling mechanism. 2.1940 The scrolling mechanism allows the user 2.1941 to determine which portion of the contents of an element is shown. 2.1942 The resizing mechanism allows the user 2.1943 to determine the size of the element.</p> 2.1944 2.1945 -<p>The <a class=property data-link-type=propdesc href=#propdef-resize>resize</a> property applies to elements 2.1946 -whose computed <a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css-overflow-3/#overflow0>overflow</a> value 2.1947 -is something other than <span class=css>visible</span>.</p> 2.1948 - 2.1949 -<p>When an element is resized by the user, 2.1950 + 2.1951 + <p>The <a class="property" data-link-type="propdesc" href="#propdef-resize">resize</a> property applies to elements 2.1952 +whose computed <a class="property" data-link-type="propdesc" href="http://dev.w3.org/csswg/css-overflow-3/#overflow0">overflow</a> value 2.1953 +is something other than <span class="css">visible</span>.</p> 2.1954 + 2.1955 + 2.1956 + <p>When an element is resized by the user, 2.1957 the user agent keeps track of a resize factor 2.1958 (which is initially 1.0) for the width and height, 2.1959 which it then applies to the computed width and height 2.1960 as part of determining the used width and height. 2.1961 The element’s contents (and surroundings) are reformatted as necessary.</p> 2.1962 2.1963 -<p>The resize factor introduces a step in width/height calculations and formatting 2.1964 -as described in <a href=http://www.w3.org/TR/CSS21/visudet.html>chapter 10 of CSS2.1</a>. 2.1965 + 2.1966 + <p>The resize factor introduces a step in width/height calculations and formatting 2.1967 +as described in <a href="http://www.w3.org/TR/CSS21/visudet.html">chapter 10 of CSS2.1</a>. 2.1968 Specifically the following step is inserted between steps 1 and 2 2.1969 -of the algorithm in <a href=http://www.w3.org/TR/CSS21/visudet.html#min-max-widths>section 10.4</a> 2.1970 -and <a href=http://www.w3.org/TR/CSS21/visudet.html#min-max-heights>10.7</a> in CSS2.1 <a data-biblio-type=normative data-link-type=biblio href=#biblio-css21 title=CSS21>[CSS21]</a>, 2.1971 -where [dimension] is <a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css2/visudet.html#propdef-width>width</a> for 10.4 and <a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css2/visudet.html#propdef-height>height</a> for 10.7.</p> 2.1972 -<blockquote><p style=text-indent:-2em> 2.1973 +of the algorithm in <a href="http://www.w3.org/TR/CSS21/visudet.html#min-max-widths">section 10.4</a> 2.1974 +and <a href="http://www.w3.org/TR/CSS21/visudet.html#min-max-heights">10.7</a> in CSS2.1 <a data-biblio-type="normative" data-link-type="biblio" href="#biblio-css21" title="CSS21">[CSS21]</a>, 2.1975 +where [dimension] is <a class="property" data-link-type="propdesc" href="http://dev.w3.org/csswg/css2/visudet.html#propdef-width">width</a> for 10.4 and <a class="property" data-link-type="propdesc" href="http://dev.w3.org/csswg/css2/visudet.html#propdef-height">height</a> for 10.7.</p> 2.1976 + 2.1977 + <blockquote> 2.1978 + <p style="text-indent:-2em"> 2.1979 1b. If the resize [dimension] factor is not 1.0, 2.1980 then the tentative used [dimension] is multiplied by that factor, 2.1981 and the rules above are applied again, 2.1982 but this time using the result of that multiplication as the computed value for '[dimension]'. 2.1983 -</blockquote> 2.1984 - 2.1985 -<p>With regard to interactivity and the Document Object Model (DOM), 2.1986 +</p></blockquote> 2.1987 + 2.1988 + 2.1989 + <p>With regard to interactivity and the Document Object Model (DOM), 2.1990 the resize factor on an element lasts the lifetime of the element, 2.1991 -however, if the <a class=property data-link-type=propdesc href=#propdef-resize>resize</a> property itself is altered 2.1992 +however, if the <a class="property" data-link-type="propdesc" href="#propdef-resize">resize</a> property itself is altered 2.1993 (e.g. via pseudo-class change or via DOM manipulation), 2.1994 then the resize factor is reset to 1.0.</p> 2.1995 2.1996 -<p>The precise direction of resizing 2.1997 + 2.1998 + <p>The precise direction of resizing 2.1999 (i.e. altering the top left of the element or altering the bottom right) 2.2000 may depend on a number of factors 2.2001 including whether the element is absolutely positioned, 2.2002 -whether it is positioned using the <a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css-position-3/#propdef-right>right</a> 2.2003 -and <a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css-position-3/#propdef-bottom>bottom</a> properties, 2.2004 +whether it is positioned using the <a class="property" data-link-type="propdesc" href="http://dev.w3.org/csswg/css-position-3/#propdef-right">right</a> 2.2005 +and <a class="property" data-link-type="propdesc" href="http://dev.w3.org/csswg/css-position-3/#propdef-bottom">bottom</a> properties, 2.2006 whether the language of the element is right-to-left etc. 2.2007 The precise direction of resizing is left to the UA to properly determine for the platform.</p> 2.2008 2.2009 -<p>The user agent may restrict the resizing range to something suitable, 2.2010 + 2.2011 + <p>The user agent may restrict the resizing range to something suitable, 2.2012 such as between the original formatted size of the element, 2.2013 and large enough to encompass all the element’s contents.</p> 2.2014 2.2015 -<div class=example><p style=display:none>Example(s): 2.2016 - 2.2017 -<p>For example, 2.2018 + 2.2019 + <div class="example"> 2.2020 + <p style="display:none">Example(s): 2.2021 + 2.2022 +</p> 2.2023 + <p>For example, 2.2024 to make iframes scrollable <em>and</em> resizable, 2.2025 the following rule can be used:</p> 2.2026 -<pre><code class=lang-css>iframe,object[type^="text/"], 2.2027 + 2.2028 + <pre><code class="lang-css">iframe,object[type^="text/"], 2.2029 object[type$="+xml"],object[type="application/xml"] 2.2030 { 2.2031 overflow:auto; 2.2032 @@ -1619,246 +1817,363 @@ 2.2033 </code></pre> 2.2034 </div> 2.2035 2.2036 -<p></p> 2.2037 - 2.2038 - 2.2039 -<h3 class="heading settled" data-level=7.2 id=text-overflow><span class=secno>7.2. </span><span class=content> 2.2040 - Overflow Ellipsis: the <a class=property data-link-type=propdesc href=#propdef-text-overflow>text-overflow</a> property</span><a class=self-link href=#text-overflow></a></h3> 2.2041 - 2.2042 -<table class=propdef><tbody> 2.2043 -<tr><th>Name:</th> 2.2044 - <td><dfn class=css data-dfn-type=property data-export="" id=propdef-text-overflow>text-overflow<a class=self-link href=#propdef-text-overflow></a></dfn></tr> 2.2045 -<tr><th>Value:</th> 2.2046 - <td> ( 2.2047 + 2.2048 + <p></p> 2.2049 + 2.2050 + 2.2051 + 2.2052 + <h3 class="heading settled" data-level="6.2" id="text-overflow"><span class="secno">6.2. </span><span class="content"> 2.2053 + Overflow Ellipsis: the <a class="property" data-link-type="propdesc" href="#propdef-text-overflow">text-overflow</a> property</span><a class="self-link" href="#text-overflow"></a></h3> 2.2054 + 2.2055 + 2.2056 + <table class="propdef"> 2.2057 + <tbody> 2.2058 + 2.2059 + <tr> 2.2060 + <th>Name:</th> 2.2061 + 2.2062 + <td><dfn class="css" data-dfn-type="property" data-export="" id="propdef-text-overflow">text-overflow<a class="self-link" href="#propdef-text-overflow"></a></dfn></td></tr> 2.2063 + 2.2064 + 2.2065 + <tr> 2.2066 + <th>Value:</th> 2.2067 + 2.2068 + <td> ( 2.2069 clip | 2.2070 ellipsis | 2.2071 -<a class="production css" data-link-type=type href=http://dev.w3.org/csswg/css-values-3/#string-value><string></a> 2.2072 +<a class="production css" data-link-type="type" href="http://dev.w3.org/csswg/css-values-3/#string-value"><string></a> 2.2073 ){1,2} | 2.2074 inherit 2.2075 -</tr> 2.2076 -<tr><th>Initial:</th> 2.2077 - <td>clip</tr> 2.2078 -<tr><th>Applies to:</th> 2.2079 - <td>block containers</tr> 2.2080 -<tr><th>Inherited:</th> 2.2081 - <td>no</tr> 2.2082 -<tr><th>Percentages:</th> 2.2083 - <td>N/A</tr> 2.2084 -<tr><th>Media:</th> 2.2085 - <td>visual</tr> 2.2086 -<tr><th>Computed value:</th> 2.2087 - <td>as specified</tr> 2.2088 -<tr><th>Animatable:</th> 2.2089 - <td>no</tr> 2.2090 -</table> 2.2091 - 2.2092 -<p>This property specifies rendering when inline content overflows 2.2093 +</td></tr> 2.2094 + 2.2095 + 2.2096 + <tr> 2.2097 + <th>Initial:</th> 2.2098 + 2.2099 + <td>clip</td></tr> 2.2100 + 2.2101 + 2.2102 + <tr> 2.2103 + <th>Applies to:</th> 2.2104 + 2.2105 + <td>block containers</td></tr> 2.2106 + 2.2107 + 2.2108 + <tr> 2.2109 + <th>Inherited:</th> 2.2110 + 2.2111 + <td>no</td></tr> 2.2112 + 2.2113 + 2.2114 + <tr> 2.2115 + <th>Percentages:</th> 2.2116 + 2.2117 + <td>N/A</td></tr> 2.2118 + 2.2119 + 2.2120 + <tr> 2.2121 + <th>Media:</th> 2.2122 + 2.2123 + <td>visual</td></tr> 2.2124 + 2.2125 + 2.2126 + <tr> 2.2127 + <th>Computed value:</th> 2.2128 + 2.2129 + <td>as specified</td></tr> 2.2130 + 2.2131 + 2.2132 + <tr> 2.2133 + <th>Animatable:</th> 2.2134 + 2.2135 + <td>no</td></tr> 2.2136 + 2.2137 + 2.2138 + </tbody></table> 2.2139 + 2.2140 + 2.2141 + <p>This property specifies rendering when inline content overflows 2.2142 its line box edge 2.2143 in the inline progression direction of its block container element ("the block") 2.2144 -that has <a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css-overflow-3/#overflow0>overflow</a> 2.2145 -other than <span class=css>visible</span>. 2.2146 +that has <a class="property" data-link-type="propdesc" href="http://dev.w3.org/csswg/css-overflow-3/#overflow0">overflow</a> 2.2147 +other than <span class="css">visible</span>. 2.2148 Text can overflow for example when it is prevented from wrapping 2.2149 -(e.g. due to '<code class=lang-css>white-space: nowrap</code>' 2.2150 +(e.g. due to '<code class="lang-css">white-space: nowrap</code>' 2.2151 or a single word is too long to fit). 2.2152 Values have the following meanings:</p> 2.2153 2.2154 -<dl class=valuedef data-dfn-for=overflow> 2.2155 - <dt><dfn data-dfn-type=dfn data-noexport="" id=clip>clip<a class=self-link href=#clip></a></dfn></dt> 2.2156 - <dd>Clip inline content that overflows. Characters may be only partially rendered.</dd> 2.2157 - 2.2158 - <dt><dfn data-dfn-type=dfn data-noexport="" id=ellipsis>ellipsis<a class=self-link href=#ellipsis></a></dfn></dt> 2.2159 - <dd> 2.2160 + 2.2161 + <dl class="valuedef" data-dfn-for="overflow"> 2.2162 + 2.2163 + <dt><dfn data-dfn-type="dfn" data-noexport="" id="clip">clip<a class="self-link" href="#clip"></a></dfn></dt> 2.2164 + 2.2165 + <dd>Clip inline content that overflows. Characters may be only partially rendered.</dd> 2.2166 + 2.2167 + 2.2168 + <dt><dfn data-dfn-type="dfn" data-noexport="" id="ellipsis">ellipsis<a class="self-link" href="#ellipsis"></a></dfn></dt> 2.2169 + 2.2170 + <dd> 2.2171 Render an ellipsis character (U+2026) 2.2172 to represent clipped inline content. 2.2173 Implementations may substitute a more language/script-appropriate 2.2174 ellipsis character, 2.2175 or three dots "..." if the ellipsis character is unavailable. 2.2176 </dd> 2.2177 -<dt><a class="production css" data-link-type=type href=http://dev.w3.org/csswg/css-values-3/#string-value><string></a></dt> 2.2178 - <dd> 2.2179 + 2.2180 + <dt><a class="production css" data-link-type="type" href="http://dev.w3.org/csswg/css-values-3/#string-value"><string></a></dt> 2.2181 + 2.2182 + <dd> 2.2183 Render the given string to represent clipped inline content. 2.2184 The given string is treated as an independent paragraph 2.2185 for bidi purposes. 2.2186 </dd> 2.2187 </dl> 2.2188 2.2189 -<p class=note role=note>Note: The <string> value, and the 2-value syntax "{1,2}" 2.2190 + 2.2191 + <p class="note" role="note">Note: The <string> value, and the 2-value syntax "{1,2}" 2.2192 and functionality are all at risk.</p> 2.2193 2.2194 -<p>The term "character" is used in this property definition 2.2195 -for better readability and means "grapheme cluster" <a data-biblio-type=normative data-link-type=biblio href=#biblio-uax29 title=UAX29>[UAX29]</a> 2.2196 + 2.2197 + <p>The term "character" is used in this property definition 2.2198 +for better readability and means "grapheme cluster" <a data-biblio-type="normative" data-link-type="biblio" href="#biblio-uax29" title="UAX29">[UAX29]</a> 2.2199 for implementation purposes.</p> 2.2200 2.2201 -<p>If there is one value, 2.2202 -it applies only to the <a data-link-type=dfn href=http://dev.w3.org/csswg/css-writing-modes-3/#end>end</a> line box edge. 2.2203 + 2.2204 + <p>If there is one value, 2.2205 +it applies only to the <a data-link-type="dfn" href="http://dev.w3.org/csswg/css-writing-modes-3/#end">end</a> line box edge. 2.2206 If there are two values, 2.2207 -the first value applies to the <a data-link-type=dfn href=http://dev.w3.org/csswg/css-writing-modes-3/#line-left>line-left</a> edge, 2.2208 -and the second value applies to the <a data-link-type=dfn href=http://dev.w3.org/csswg/css-writing-modes-3/#line-right>line-right</a> edge. 2.2209 -The terms <a data-link-type=dfn href=http://dev.w3.org/csswg/css-writing-modes-3/#end>end</a>, <a data-link-type=dfn href=http://dev.w3.org/csswg/css-writing-modes-3/#line-left>line-left</a> and <a data-link-type=dfn href=http://dev.w3.org/csswg/css-writing-modes-3/#line-right>line-right</a> are defined in <a data-biblio-type=normative data-link-type=biblio href=#biblio-css3-writing-modes title=CSS3-WRITING-MODES>[CSS3-WRITING-MODES]</a>.</p> 2.2210 - 2.2211 -<p class=note role=note>Note: the use of <a data-link-type=dfn href=http://dev.w3.org/csswg/css-writing-modes-3/#line-left>line-left</a> and <a data-link-type=dfn href=http://dev.w3.org/csswg/css-writing-modes-3/#line-right>line-right</a> 2.2212 -rather than <a data-link-type=dfn href=http://dev.w3.org/csswg/css-writing-modes-3/#start>start</a> and <a data-link-type=dfn href=http://dev.w3.org/csswg/css-writing-modes-3/#end>end</a> 2.2213 +the first value applies to the <a data-link-type="dfn" href="http://dev.w3.org/csswg/css-writing-modes-3/#line-left">line-left</a> edge, 2.2214 +and the second value applies to the <a data-link-type="dfn" href="http://dev.w3.org/csswg/css-writing-modes-3/#line-right">line-right</a> edge. 2.2215 +The terms <a data-link-type="dfn" href="http://dev.w3.org/csswg/css-writing-modes-3/#end">end</a>, <a data-link-type="dfn" href="http://dev.w3.org/csswg/css-writing-modes-3/#line-left">line-left</a> and <a data-link-type="dfn" href="http://dev.w3.org/csswg/css-writing-modes-3/#line-right">line-right</a> are defined in <a data-biblio-type="normative" data-link-type="biblio" href="#biblio-css3-writing-modes" title="CSS3-WRITING-MODES">[CSS3-WRITING-MODES]</a>.</p> 2.2216 + 2.2217 + 2.2218 + <p class="note" role="note">Note: the use of <a data-link-type="dfn" href="http://dev.w3.org/csswg/css-writing-modes-3/#line-left">line-left</a> and <a data-link-type="dfn" href="http://dev.w3.org/csswg/css-writing-modes-3/#line-right">line-right</a> 2.2219 +rather than <a data-link-type="dfn" href="http://dev.w3.org/csswg/css-writing-modes-3/#start">start</a> and <a data-link-type="dfn" href="http://dev.w3.org/csswg/css-writing-modes-3/#end">end</a> 2.2220 when there are two values is intentional, 2.2221 to facilitate the use of directional characters such as arrows.</p> 2.2222 2.2223 -<p>For the ellipsis 2.2224 + 2.2225 + <p>For the ellipsis 2.2226 and string values, 2.2227 implementations must hide characters and 2.2228 -<a href=http://www.w3.org/TR/CSS21/visuren.html#inline-boxes> 2.2229 +<a href="http://www.w3.org/TR/CSS21/visuren.html#inline-boxes"> 2.2230 atomic inline-level elements</a> 2.2231 at the applicable edge(s) of the line as necessary to fit the ellipsis/string. 2.2232 Place the ellipsis/string immediately adjacent 2.2233 to the applicable edge(s) of the remaining inline content. 2.2234 The first character or 2.2235 -<a href=http://www.w3.org/TR/CSS21/visuren.html#inline-boxes> 2.2236 +<a href="http://www.w3.org/TR/CSS21/visuren.html#inline-boxes"> 2.2237 atomic inline-level element</a> 2.2238 on a line 2.2239 must be clipped rather than ellipsed.</p> 2.2240 2.2241 -<h4 class="no-num no-toc heading settled" id=ellipsing-details><span class=content>ellipsing details</span><a class=self-link href=#ellipsing-details></a></h4> 2.2242 -<ul> 2.2243 -<li> 2.2244 + 2.2245 + <h4 class="no-num no-toc heading settled" id="ellipsing-details"><span class="content">ellipsing details</span><a class="self-link" href="#ellipsing-details"></a></h4> 2.2246 + 2.2247 + <ul> 2.2248 + 2.2249 + <li> 2.2250 Ellipsing only affects rendering and must not affect layout 2.2251 nor dispatching of pointer events. 2.2252 -<li> 2.2253 +</li> 2.2254 + <li> 2.2255 The ellipsis is styled and baseline-aligned according to 2.2256 the block. 2.2257 -<li> 2.2258 +</li> 2.2259 + <li> 2.2260 Ellipsing occurs after relative positioning and other graphical transformations. 2.2261 -<li> 2.2262 +</li> 2.2263 + <li> 2.2264 If there is insufficient space for the ellipsis, 2.2265 then clip the rendering of the ellipsis itself 2.2266 (on the same side that neutral characters on the line 2.2267 -would have otherwise been clipped with the <span class=css>clip</span> value). 2.2268 -</ul> 2.2269 - 2.2270 -<h4 class="no-num no-toc heading settled" id=ellipsis-interaction><span class=content>user interaction with ellipsis</span><a class=self-link href=#ellipsis-interaction></a></h4> 2.2271 -<ul> 2.2272 -<li>When the user is interacting with content 2.2273 +would have otherwise been clipped with the <span class="css">clip</span> value). 2.2274 +</li></ul> 2.2275 + 2.2276 + 2.2277 + <h4 class="no-num no-toc heading settled" id="ellipsis-interaction"><span class="content">user interaction with ellipsis</span><a class="self-link" href="#ellipsis-interaction"></a></h4> 2.2278 + 2.2279 + <ul> 2.2280 + 2.2281 + <li>When the user is interacting with content 2.2282 (e.g. editing, selecting, scrolling), 2.2283 -the user agent may treat text-overflow <span class=css>ellipsis</span> or string values as <span class=css>clip</span>. 2.2284 - 2.2285 -<li>Selecting the ellipsis should select the ellipsed text. 2.2286 +the user agent may treat text-overflow <span class="css">ellipsis</span> or string values as <span class="css">clip</span>. 2.2287 + 2.2288 +</li> 2.2289 + <li>Selecting the ellipsis should select the ellipsed text. 2.2290 If all of the ellipsed text is selected, 2.2291 UAs should show selection of the ellipsis. 2.2292 Behavior of partially-selected ellipsed text is up to the UA. 2.2293 2.2294 -</ul> 2.2295 - 2.2296 -<div class=example><p style=display:none>Example(s): 2.2297 -<h4 class="no-num no-toc heading settled" id=text-overflow-examples><span class=content>text-overflow examples</span><a class=self-link href=#text-overflow-examples></a></h4> 2.2298 - 2.2299 -<p>These examples demonstrate setting the text-overflow of a block container element 2.2300 +</li></ul> 2.2301 + 2.2302 + 2.2303 + <div class="example"> 2.2304 + <p style="display:none">Example(s): 2.2305 +</p> 2.2306 + <h4 class="no-num no-toc heading settled" id="text-overflow-examples"><span class="content">text-overflow examples</span><a class="self-link" href="#text-overflow-examples"></a></h4> 2.2307 + 2.2308 + 2.2309 + <p>These examples demonstrate setting the text-overflow of a block container element 2.2310 that has text which overflows its dimensions:</p> 2.2311 2.2312 -<p>sample CSS for a div:</p> 2.2313 -<pre><code class=lang-css>div { font-family:Helvetica,sans-serif; line-height:1.1; 2.2314 + 2.2315 + <p>sample CSS for a div:</p> 2.2316 + 2.2317 + <pre><code class="lang-css">div { font-family:Helvetica,sans-serif; line-height:1.1; 2.2318 width:3.1em; padding:.2em; border:solid .1em black; margin:1em 0; 2.2319 }</code></pre> 2.2320 2.2321 -<p>sample HTML fragments, renderings, and your browser:</p> 2.2322 -<table border=1 cellpadding=5 style=color:#000;background:#fff;><tbody> 2.2323 -<tr><th>HTML<th>sample rendering<th>your browser</tr> 2.2324 -<tr> 2.2325 -<td><pre><code class=lang-markup><div> 2.2326 + 2.2327 + <p>sample HTML fragments, renderings, and your browser:</p> 2.2328 + 2.2329 + <table border="1" cellpadding="5" style="color:#000;background:#fff;"> 2.2330 + <tbody> 2.2331 + 2.2332 + <tr> 2.2333 + <th>HTML</th> 2.2334 + <th>sample rendering</th> 2.2335 + <th>your browser</th></tr> 2.2336 + 2.2337 + 2.2338 + <tr> 2.2339 + 2.2340 + <td> 2.2341 + <pre><code class="lang-markup"><div> 2.2342 CSS IS AWESOME, YES 2.2343 -</div> 2.2344 +</div> 2.2345 </code></pre></td> 2.2346 2.2347 2.2348 -<td> 2.2349 -<object data=cssisawesome.png type=image/png> 2.2350 + 2.2351 + <td> 2.2352 + 2.2353 + <object data="cssisawesome.png" type="image/png"> 2.2354 First, a box with text drawing outside of it. 2.2355 </object> 2.2356 </td> 2.2357 2.2358 -<td> 2.2359 -<div style="width:3.1em; border:solid .1em black; margin:1em 0; padding:.2em; font-family:Helvetica,sans-serif; line-height:1.1;">CSS IS AWESOME, YES</div> 2.2360 + 2.2361 + <td> 2.2362 + 2.2363 + <div style="width:3.1em; border:solid .1em black; margin:1em 0; padding:.2em; font-family:Helvetica,sans-serif; line-height:1.1;">CSS IS AWESOME, YES</div> 2.2364 </td> 2.2365 </tr> 2.2366 - 2.2367 -<tr> 2.2368 -<td><pre><code class=lang-markup><div style="<strong>text-overflow:clip;</strong> overflow:hidden"> 2.2369 + 2.2370 + 2.2371 + 2.2372 + <tr> 2.2373 + 2.2374 + <td> 2.2375 + <pre><code class="lang-markup"><div style="<strong>text-overflow:clip;</strong> overflow:hidden"> 2.2376 CSS IS AWESOME, YES 2.2377 -</div> 2.2378 +</div> 2.2379 </code></pre></td> 2.2380 2.2381 -<td> 2.2382 -<object data=cssisaweso.png type=image/png> 2.2383 + 2.2384 + <td> 2.2385 + 2.2386 + <object data="cssisaweso.png" type="image/png"> 2.2387 Second, a similar box with the text clipped outside the box. 2.2388 </object></td> 2.2389 2.2390 -<td> 2.2391 -<div style="width:3.1em; border:solid .1em black; margin:1em 0; padding:.2em; font-family:Helvetica,sans-serif; line-height:1.1; overflow:hidden;text-overflow:clip;">CSS IS AWESOME, YES</div> 2.2392 + 2.2393 + <td> 2.2394 + 2.2395 + <div style="width:3.1em; border:solid .1em black; margin:1em 0; padding:.2em; font-family:Helvetica,sans-serif; line-height:1.1; overflow:hidden;text-overflow:clip;">CSS IS AWESOME, YES</div> 2.2396 </td> 2.2397 </tr> 2.2398 - 2.2399 -<tr> 2.2400 -<td><pre><code class=lang-markup><div style="<strong>text-overflow:ellipsis;</strong> overflow:hidden"> 2.2401 + 2.2402 + 2.2403 + 2.2404 + <tr> 2.2405 + 2.2406 + <td> 2.2407 + <pre><code class="lang-markup"><div style="<strong>text-overflow:ellipsis;</strong> overflow:hidden"> 2.2408 CSS IS AWESOME, YES 2.2409 -</div> 2.2410 +</div> 2.2411 </code></pre></td> 2.2412 2.2413 -<td> 2.2414 -<object data=cssisaw.png type=image/png> 2.2415 + 2.2416 + <td> 2.2417 + 2.2418 + <object data="cssisaw.png" type="image/png"> 2.2419 Third, a similar box with an ellipsis representing the clipped text. 2.2420 </object> 2.2421 </td> 2.2422 2.2423 -<td> 2.2424 -<div style="width:3.1em; border:solid .1em black; margin:1em 0; padding:.2em; font-family:Helvetica,sans-serif; line-height:1.1; overflow:hidden;text-overflow:ellipsis;">CSS IS AWESOME, YES</div> 2.2425 + 2.2426 + <td> 2.2427 + 2.2428 + <div style="width:3.1em; border:solid .1em black; margin:1em 0; padding:.2em; font-family:Helvetica,sans-serif; line-height:1.1; overflow:hidden;text-overflow:ellipsis;">CSS IS AWESOME, YES</div> 2.2429 </td> 2.2430 </tr> 2.2431 - 2.2432 - 2.2433 -<tr> 2.2434 -<td><pre><code class=lang-markup><div style="<strong>text-overflow:ellipsis;</strong> overflow:hidden"> 2.2435 + 2.2436 + 2.2437 + 2.2438 + 2.2439 + <tr> 2.2440 + 2.2441 + <td> 2.2442 + <pre><code class="lang-markup"><div style="<strong>text-overflow:ellipsis;</strong> overflow:hidden"> 2.2443 NESTED 2.2444 - <p>PARAGRAPH</p> 2.2445 + <p>PARAGRAPH</p> 2.2446 WON’T ELLIPSE. 2.2447 -</div> 2.2448 +</div> 2.2449 </code></pre></td> 2.2450 2.2451 -<td> 2.2452 -<object data=nes.png type=image/png> 2.2453 + 2.2454 + <td> 2.2455 + 2.2456 + <object data="nes.png" type="image/png"> 2.2457 Fourth, a box with a nested paragraph demonstrating anonymous block boxes equivalency and non-inheritance into a nested element. 2.2458 </object> 2.2459 </td> 2.2460 2.2461 -<td> 2.2462 -<div style="width:3.1em; border:solid .1em black; margin:1em 0; padding:.2em; font-family:Helvetica,sans-serif; line-height:1.1; overflow:hidden;text-overflow:ellipsis;">NESTED 2.2463 - <p>PARAGRAPH 2.2464 -WON’T ELLIPSE.</div> 2.2465 + 2.2466 + <td> 2.2467 + 2.2468 + <div style="width:3.1em; border:solid .1em black; margin:1em 0; padding:.2em; font-family:Helvetica,sans-serif; line-height:1.1; overflow:hidden;text-overflow:ellipsis;">NESTED 2.2469 + 2.2470 + <p>PARAGRAPH 2.2471 +WON’T ELLIPSE.</p></div> 2.2472 </td> 2.2473 2.2474 </tr> 2.2475 -</table> 2.2476 + 2.2477 + 2.2478 + </tbody></table> 2.2479 2.2480 </div> 2.2481 2.2482 -<p class=note role=note>Note: the side of the line that the ellipsis is placed depends on the <a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css-writing-modes-3/#propdef-direction>direction</a> of the block. 2.2483 + 2.2484 + <p class="note" role="note">Note: the side of the line that the ellipsis is placed depends on the <a class="property" data-link-type="propdesc" href="http://dev.w3.org/csswg/css-writing-modes-3/#propdef-direction">direction</a> of the block. 2.2485 E.g. an overflow hidden right-to-left 2.2486 -(<code class=lang-css>direction: rtl</code>) 2.2487 -block clips inline content on the <a data-link-type=dfn href=http://dev.w3.org/csswg/css-writing-modes-3/#left>left</a> side, 2.2488 -thus would place a text-overflow ellipsis on the <a data-link-type=dfn href=http://dev.w3.org/csswg/css-writing-modes-3/#left>left</a> 2.2489 +(<code class="lang-css">direction: rtl</code>) 2.2490 +block clips inline content on the <a data-link-type="dfn" href="http://dev.w3.org/csswg/css-writing-modes-3/#left">left</a> side, 2.2491 +thus would place a text-overflow ellipsis on the <a data-link-type="dfn" href="http://dev.w3.org/csswg/css-writing-modes-3/#left">left</a> 2.2492 to represent that clipped content.</p> 2.2493 2.2494 2.2495 2.2496 -<h4 class="no-num no-toc heading settled" id=ellipsis-scrolling><span class=content>ellipsis interaction with scrolling interfaces</span><a class=self-link href=#ellipsis-scrolling></a></h4> 2.2497 - 2.2498 -<p>This section applies to elements with text-overflow other than <span class=css>clip</span> 2.2499 + 2.2500 + <h4 class="no-num no-toc heading settled" id="ellipsis-scrolling"><span class="content">ellipsis interaction with scrolling interfaces</span><a class="self-link" href="#ellipsis-scrolling"></a></h4> 2.2501 + 2.2502 + 2.2503 + <p>This section applies to elements with text-overflow other than <span class="css">clip</span> 2.2504 (non-clip text-overflow) 2.2505 and overflow:scroll.</p> 2.2506 2.2507 -<p>When an element with non-clip text-overflow has overflow of scroll 2.2508 + 2.2509 + <p>When an element with non-clip text-overflow has overflow of scroll 2.2510 in the inline progression dimension of the text, 2.2511 and the browser provides a mechanism for scrolling 2.2512 (e.g. a scrollbar on the element, 2.2513 or a touch interface to swipe-scroll, etc.), 2.2514 there are additional implementation details that provide a better user experience:</p> 2.2515 2.2516 -<p>When an element is scrolled (e.g. by the user, DOM manipulation), 2.2517 + 2.2518 + <p>When an element is scrolled (e.g. by the user, DOM manipulation), 2.2519 more of the element’s content is shown. 2.2520 The value of text-overflow should not affect 2.2521 whether more of the element’s content is shown or not. 2.2522 @@ -1872,34 +2187,49 @@ 2.2523 at which point that content should be displayed 2.2524 rather than an ellipsis/string.</p> 2.2525 2.2526 -<p>As some content is scrolled into view, 2.2527 + 2.2528 + <p>As some content is scrolled into view, 2.2529 it is likely that other content may scroll out of view on the other side. 2.2530 If that content’s block container element is the same 2.2531 that’s doing the scrolling, 2.2532 then implementations should render an ellipsis/string in place of 2.2533 the clipped content, 2.2534 with the same details as described in the value definition above, 2.2535 -except that the ellipsis/string is drawn in the <a data-link-type=dfn href=http://dev.w3.org/csswg/css-writing-modes-3/#start>start</a> 2.2536 -(rather than <a data-link-type=dfn href=http://dev.w3.org/csswg/css-writing-modes-3/#end>end</a>) of 2.2537 +except that the ellipsis/string is drawn in the <a data-link-type="dfn" href="http://dev.w3.org/csswg/css-writing-modes-3/#start">start</a> 2.2538 +(rather than <a data-link-type="dfn" href="http://dev.w3.org/csswg/css-writing-modes-3/#end">end</a>) of 2.2539 the block’s direction (per the direction property).</p> 2.2540 2.2541 -<p>While the content is being scrolled, 2.2542 + 2.2543 + <p>While the content is being scrolled, 2.2544 implementations may adjust their rendering of ellipses/strings 2.2545 (e.g. align to the box edges rather than line edges).</p> 2.2546 2.2547 -<p>If there is insufficient space for both start 2.2548 + 2.2549 + <p>If there is insufficient space for both start 2.2550 and end ellipses/strings, 2.2551 then only the end ellipsis/string should be rendered.</p> 2.2552 2.2553 -<h2 class="heading settled" data-level=8 id=pointing-keyboard><span class=secno>8. </span><span class=content>Pointing Devices and Keyboards</span><a class=self-link href=#pointing-keyboard></a></h2> 2.2554 - 2.2555 -<h3 class="heading settled" data-level=8.1 id=pointer-interaction><span class=secno>8.1. </span><span class=content>Pointer interaction</span><a class=self-link href=#pointer-interaction></a></h3> 2.2556 - 2.2557 -<h4 class="heading settled" data-level=8.1.1 id=cursor><span class=secno>8.1.1. </span><span class=content><a class=property data-link-type=propdesc href=#propdef-cursor>cursor</a> property</span><a class=self-link href=#cursor></a></h4> 2.2558 -<table class=propdef><tbody> 2.2559 -<tr><th>Name:<td><dfn class=css data-dfn-type=property data-export="" id=propdef-cursor>cursor<a class=self-link href=#propdef-cursor></a></dfn></tr> 2.2560 -<tr><th>Value:<td> 2.2561 -[ [<uri> [<x> <y>]?,]* <br> 2.2562 + 2.2563 + <h2 class="heading settled" data-level="7" id="pointing-keyboard"><span class="secno">7. </span><span class="content">Pointing Devices and Keyboards</span><a class="self-link" href="#pointing-keyboard"></a></h2> 2.2564 + 2.2565 + 2.2566 + <h3 class="heading settled" data-level="7.1" id="pointer-interaction"><span class="secno">7.1. </span><span class="content">Pointer interaction</span><a class="self-link" href="#pointer-interaction"></a></h3> 2.2567 + 2.2568 + 2.2569 + <h4 class="heading settled" data-level="7.1.1" id="cursor"><span class="secno">7.1.1. </span><span class="content"><a class="property" data-link-type="propdesc" href="#propdef-cursor">cursor</a> property</span><a class="self-link" href="#cursor"></a></h4> 2.2570 + 2.2571 + <table class="propdef"> 2.2572 + <tbody> 2.2573 + 2.2574 + <tr> 2.2575 + <th>Name:</th> 2.2576 + <td><dfn class="css" data-dfn-type="property" data-export="" id="propdef-cursor">cursor<a class="self-link" href="#propdef-cursor"></a></dfn></td></tr> 2.2577 + 2.2578 + 2.2579 + <tr> 2.2580 + <th>Value:</th> 2.2581 + <td> 2.2582 +[ [<uri> [<x> <y>]?,]* <br> 2.2583 [ auto | default | none |<br> 2.2584 context-menu | help | pointer | progress | wait | <br> 2.2585 cell | crosshair | text | vertical-text | <br> 2.2586 @@ -1910,36 +2240,73 @@ 2.2587 all-scroll 2.2588 | zoom-in | zoom-out 2.2589 <br> 2.2590 -] ] | inherit </tr> 2.2591 -<tr><th>Initial:<td>auto</tr> 2.2592 -<tr><th>Applies to:<td>all elements</tr> 2.2593 -<tr><th>Inherited:<td>yes</tr> 2.2594 -<tr><th>Percentages:<td>N/A</tr> 2.2595 -<tr><th>Media:<td>visual, interactive</tr> 2.2596 -<tr><th>Computed value:<td>as specified, except with any relative URLs converted to absolute</tr> 2.2597 -<tr><th>Animatable:<td>no</tr> 2.2598 -</table> 2.2599 +] ] | inherit </td></tr> 2.2600 + 2.2601 + 2.2602 + <tr> 2.2603 + <th>Initial:</th> 2.2604 + <td>auto</td></tr> 2.2605 + 2.2606 + 2.2607 + <tr> 2.2608 + <th>Applies to:</th> 2.2609 + <td>all elements</td></tr> 2.2610 + 2.2611 + 2.2612 + <tr> 2.2613 + <th>Inherited:</th> 2.2614 + <td>yes</td></tr> 2.2615 + 2.2616 + 2.2617 + <tr> 2.2618 + <th>Percentages:</th> 2.2619 + <td>N/A</td></tr> 2.2620 + 2.2621 + 2.2622 + <tr> 2.2623 + <th>Media:</th> 2.2624 + <td>visual, interactive</td></tr> 2.2625 + 2.2626 + 2.2627 + <tr> 2.2628 + <th>Computed value:</th> 2.2629 + <td>as specified, except with any relative URLs converted to absolute</td></tr> 2.2630 + 2.2631 + 2.2632 + <tr> 2.2633 + <th>Animatable:</th> 2.2634 + <td>no</td></tr> 2.2635 + 2.2636 + 2.2637 + </tbody></table> 2.2638 2.2639 2.2640 This property specifies the type of cursor to be displayed for the pointing device 2.2641 when over the element’s border, padding, and content. 2.2642 Values have the following meanings: 2.2643 2.2644 -<p>image cursors</p> 2.2645 -<dl> 2.2646 -<dt><uri></dt> 2.2647 -<dd>The user agent retrieves the cursor from the resource designated by the URI. 2.2648 + 2.2649 + <p>image cursors</p> 2.2650 + 2.2651 + <dl> 2.2652 + 2.2653 + <dt><uri></dt> 2.2654 + 2.2655 + <dd>The user agent retrieves the cursor from the resource designated by the URI. 2.2656 If the user agent cannot handle the first cursor of a list of cursors, 2.2657 it must attempt to handle the second, etc. 2.2658 If the user agent cannot handle any user-defined cursor, 2.2659 it must use the cursor keyword at the end of the list. 2.2660 -The optional <x> and <y> coordinates 2.2661 +The optional <x> and <y> coordinates 2.2662 identify the exact position within the image which is the pointer position (i.e., the hotspot). 2.2663 </dd> 2.2664 -<dt><x></dt> 2.2665 -<dt><y></dt> 2.2666 -<dd> 2.2667 -Each is a <number>. 2.2668 + 2.2669 + <dt><x></dt> 2.2670 + 2.2671 + <dt><y></dt> 2.2672 + 2.2673 + <dd> 2.2674 +Each is a <number>. 2.2675 The x-coordinate and y-coordinate of the position 2.2676 in the cursor’s coordinate system (left/top relative) 2.2677 which represents the precise position that is being pointed to. 2.2678 @@ -1950,146 +2317,213 @@ 2.2679 </dd> 2.2680 </dl> 2.2681 2.2682 -<p>general purpose cursors</p> 2.2683 -<dl> 2.2684 -<dt style=cursor:auto>auto</dt> 2.2685 -<dd>The UA determines the cursor to display based on the current 2.2686 + 2.2687 + <p>general purpose cursors</p> 2.2688 + 2.2689 + <dl> 2.2690 + 2.2691 + <dt style="cursor:auto">auto</dt> 2.2692 + 2.2693 + <dd>The UA determines the cursor to display based on the current 2.2694 context. 2.2695 </dd> 2.2696 -<dt style=cursor:default>default</dt> 2.2697 -<dd>The platform-dependent default cursor. Often rendered as an arrow. 2.2698 + 2.2699 + <dt style="cursor:default">default</dt> 2.2700 + 2.2701 + <dd>The platform-dependent default cursor. Often rendered as an arrow. 2.2702 </dd> 2.2703 -<dt style=cursor:none>none</dt> 2.2704 -<dd>No cursor is rendered for the element.</dd> 2.2705 + 2.2706 + <dt style="cursor:none">none</dt> 2.2707 + 2.2708 + <dd>No cursor is rendered for the element.</dd> 2.2709 </dl> 2.2710 2.2711 -<p>links and status cursors</p> 2.2712 -<dl> 2.2713 -<dt style=cursor:context-menu>context-menu</dt> 2.2714 -<dd>A context menu is available for the object under the cursor. 2.2715 + 2.2716 + <p>links and status cursors</p> 2.2717 + 2.2718 + <dl> 2.2719 + 2.2720 + <dt style="cursor:context-menu">context-menu</dt> 2.2721 + 2.2722 + <dd>A context menu is available for the object under the cursor. 2.2723 Often rendered as an arrow with a small menu-like graphic next to it.</dd> 2.2724 -<dt style=cursor:help>help</dt> 2.2725 -<dd>Help is available for the object under the cursor. 2.2726 + 2.2727 + <dt style="cursor:help">help</dt> 2.2728 + 2.2729 + <dd>Help is available for the object under the cursor. 2.2730 Often rendered as a question mark or a balloon. 2.2731 </dd> 2.2732 -<dt style=cursor:pointer>pointer</dt> 2.2733 -<dd>The cursor is a pointer that indicates a link. 2.2734 + 2.2735 + <dt style="cursor:pointer">pointer</dt> 2.2736 + 2.2737 + <dd>The cursor is a pointer that indicates a link. 2.2738 </dd> 2.2739 -<dt style=cursor:progress>progress</dt> 2.2740 -<dd>A progress indicator. The program is performing some processing, 2.2741 -but is different from <span class=css>wait</span> in that the user may still interact 2.2742 + 2.2743 + <dt style="cursor:progress">progress</dt> 2.2744 + 2.2745 + <dd>A progress indicator. The program is performing some processing, 2.2746 +but is different from <span class="css">wait</span> in that the user may still interact 2.2747 with the program. Often rendered as a spinning beach ball, 2.2748 or an arrow with a watch or hourglass.</dd> 2.2749 -<dt style=cursor:wait>wait</dt> 2.2750 -<dd>Indicates that the program is busy and the user should wait. 2.2751 + 2.2752 + <dt style="cursor:wait">wait</dt> 2.2753 + 2.2754 + <dd>Indicates that the program is busy and the user should wait. 2.2755 Often rendered as a watch or hourglass. 2.2756 </dd> 2.2757 </dl> 2.2758 2.2759 -<p>selection cursors</p> 2.2760 -<dl> 2.2761 -<dt style=cursor:cell>cell</dt> 2.2762 -<dd>Indicates that a cell or set of cells may be selected. Often rendered as a thick plus-sign with a dot in the middle.</dd> 2.2763 -<dt style=cursor:crosshair>crosshair</dt> 2.2764 -<dd>A simple crosshair (e.g., short line segments resembling a "+" sign). 2.2765 + 2.2766 + <p>selection cursors</p> 2.2767 + 2.2768 + <dl> 2.2769 + 2.2770 + <dt style="cursor:cell">cell</dt> 2.2771 + 2.2772 + <dd>Indicates that a cell or set of cells may be selected. Often rendered as a thick plus-sign with a dot in the middle.</dd> 2.2773 + 2.2774 + <dt style="cursor:crosshair">crosshair</dt> 2.2775 + 2.2776 + <dd>A simple crosshair (e.g., short line segments resembling a "+" sign). 2.2777 Often used to indicate a two dimensional bitmap selection mode. 2.2778 </dd> 2.2779 -<dt style=cursor:text>text</dt> 2.2780 -<dd>Indicates text that may be selected. Often rendered as a vertical I-beam. 2.2781 + 2.2782 + <dt style="cursor:text">text</dt> 2.2783 + 2.2784 + <dd>Indicates text that may be selected. Often rendered as a vertical I-beam. 2.2785 User agents may automatically display a horizontal I-beam/cursor 2.2786 -(e.g. same as the <span class=css>vertical-text</span> keyword) 2.2787 +(e.g. same as the <span class="css">vertical-text</span> keyword) 2.2788 for vertical text, or for that matter, 2.2789 any angle of I-beam/cursor for text that is rendered at any particular angle. 2.2790 </dd> 2.2791 -<dt style=cursor:vertical-text>vertical-text</dt> 2.2792 -<dd>Indicates vertical-text that may be selected. Often rendered as a horizontal I-beam.</dd> 2.2793 + 2.2794 + <dt style="cursor:vertical-text">vertical-text</dt> 2.2795 + 2.2796 + <dd>Indicates vertical-text that may be selected. Often rendered as a horizontal I-beam.</dd> 2.2797 </dl> 2.2798 2.2799 -<p>drag and drop cursors</p> 2.2800 -<dl> 2.2801 -<dt style=cursor:alias>alias</dt> 2.2802 -<dd>Indicates an alias of/shortcut to something is to be created. 2.2803 + 2.2804 + <p>drag and drop cursors</p> 2.2805 + 2.2806 + <dl> 2.2807 + 2.2808 + <dt style="cursor:alias">alias</dt> 2.2809 + 2.2810 + <dd>Indicates an alias of/shortcut to something is to be created. 2.2811 Often rendered as an arrow with a small curved arrow next to it.</dd> 2.2812 2.2813 -<dt style=cursor:copy>copy</dt> 2.2814 -<dd>Indicates something is to be copied. 2.2815 + 2.2816 + <dt style="cursor:copy">copy</dt> 2.2817 + 2.2818 + <dd>Indicates something is to be copied. 2.2819 Often rendered as an arrow with a small plus sign next to it.</dd> 2.2820 2.2821 -<dt style=cursor:move>move</dt> 2.2822 -<dd>Indicates something is to be moved. 2.2823 + 2.2824 + <dt style="cursor:move">move</dt> 2.2825 + 2.2826 + <dd>Indicates something is to be moved. 2.2827 </dd> 2.2828 -<dt style=cursor:no-drop>no-drop</dt> 2.2829 -<dd>Indicates that the dragged item cannot be dropped at the current cursor location. 2.2830 + 2.2831 + <dt style="cursor:no-drop">no-drop</dt> 2.2832 + 2.2833 + <dd>Indicates that the dragged item cannot be dropped at the current cursor location. 2.2834 Often rendered as a hand or pointer with a small circle with a line through it. 2.2835 </dd> 2.2836 -<dt style=cursor:not-allowed>not-allowed</dt> 2.2837 -<dd>Indicates that the requested action will not be carried out. 2.2838 + 2.2839 + <dt style="cursor:not-allowed">not-allowed</dt> 2.2840 + 2.2841 + <dd>Indicates that the requested action will not be carried out. 2.2842 Often rendered as a circle with a line through it. 2.2843 </dd> 2.2844 -<dt style=cursor:grab>grab</dt> 2.2845 -<dd>Indicates that something can be grabbed (dragged to be moved). Often rendered as the backside of an open hand.</dd> 2.2846 -<dt style=cursor:grabbing>grabbing</dt> 2.2847 -<dd>Indicates that something is being grabbed (dragged to be moved). Often rendered as the backside of a hand with fingers closed mostly out of view.</dd> 2.2848 + 2.2849 + <dt style="cursor:grab">grab</dt> 2.2850 + 2.2851 + <dd>Indicates that something can be grabbed (dragged to be moved). Often rendered as the backside of an open hand.</dd> 2.2852 + 2.2853 + <dt style="cursor:grabbing">grabbing</dt> 2.2854 + 2.2855 + <dd>Indicates that something is being grabbed (dragged to be moved). Often rendered as the backside of a hand with fingers closed mostly out of view.</dd> 2.2856 </dl> 2.2857 2.2858 -<p>resizing and scrolling cursors</p> 2.2859 -<dl> 2.2860 -<dt> 2.2861 -<span style=cursor:e-resize>e-resize</span>, 2.2862 -<span style=cursor:n-resize>n-resize</span>, 2.2863 -<span style=cursor:ne-resize>ne-resize</span>, 2.2864 -<span style=cursor:nw-resize>nw-resize</span>, 2.2865 -<span style=cursor:s-resize>s-resize</span>, 2.2866 -<span style=cursor:se-resize>se-resize</span>, 2.2867 -<span style=cursor:sw-resize>sw-resize</span>, 2.2868 -<span style=cursor:w-resize>w-resize</span> 2.2869 + 2.2870 + <p>resizing and scrolling cursors</p> 2.2871 + 2.2872 + <dl> 2.2873 + 2.2874 + <dt> 2.2875 +<span style="cursor:e-resize">e-resize</span>, 2.2876 +<span style="cursor:n-resize">n-resize</span>, 2.2877 +<span style="cursor:ne-resize">ne-resize</span>, 2.2878 +<span style="cursor:nw-resize">nw-resize</span>, 2.2879 +<span style="cursor:s-resize">s-resize</span>, 2.2880 +<span style="cursor:se-resize">se-resize</span>, 2.2881 +<span style="cursor:sw-resize">sw-resize</span>, 2.2882 +<span style="cursor:w-resize">w-resize</span> 2.2883 </dt> 2.2884 -<dd>Indicates that some edge is to be moved. For example, the 2.2885 -<span class=css>se-resize</span> cursor is used when the movement starts from the 2.2886 + 2.2887 + <dd>Indicates that some edge is to be moved. For example, the 2.2888 +<span class="css">se-resize</span> cursor is used when the movement starts from the 2.2889 south-east corner of the box. 2.2890 </dd> 2.2891 -<dt> 2.2892 -<span style=cursor:ew-resize>ew-resize</span>, 2.2893 -<span style=cursor:ns-resize>ns-resize</span>, 2.2894 -<span style=cursor:nesw-resize>nesw-resize</span>, 2.2895 -<span style=cursor:nwse-resize>nwse-resize</span> 2.2896 + 2.2897 + <dt> 2.2898 +<span style="cursor:ew-resize">ew-resize</span>, 2.2899 +<span style="cursor:ns-resize">ns-resize</span>, 2.2900 +<span style="cursor:nesw-resize">nesw-resize</span>, 2.2901 +<span style="cursor:nwse-resize">nwse-resize</span> 2.2902 </dt> 2.2903 -<dd>Indicates a bidirectional resize cursor.</dd> 2.2904 -<dt style=cursor:col-resize>col-resize</dt> 2.2905 -<dd>Indicates that the item/column can be resized horizontally. 2.2906 + 2.2907 + <dd>Indicates a bidirectional resize cursor.</dd> 2.2908 + 2.2909 + <dt style="cursor:col-resize">col-resize</dt> 2.2910 + 2.2911 + <dd>Indicates that the item/column can be resized horizontally. 2.2912 Often rendered as arrows pointing left and right with a vertical bar separating them.</dd> 2.2913 -<dt style=cursor:row-resize>row-resize</dt> 2.2914 -<dd>Indicates that the item/row can be resized vertically. 2.2915 + 2.2916 + <dt style="cursor:row-resize">row-resize</dt> 2.2917 + 2.2918 + <dd>Indicates that the item/row can be resized vertically. 2.2919 Often rendered as arrows pointing up and down with a horizontal bar separating them. 2.2920 </dd> 2.2921 -<dt style=cursor:all-scroll>all-scroll</dt> 2.2922 -<dd>Indicates that the something can be scrolled in any direction. 2.2923 + 2.2924 + <dt style="cursor:all-scroll">all-scroll</dt> 2.2925 + 2.2926 + <dd>Indicates that the something can be scrolled in any direction. 2.2927 Often rendered as arrows pointing up, down, left, and right with a dot in the middle. 2.2928 </dd> 2.2929 </dl> 2.2930 2.2931 -<p>zooming cursors</p> 2.2932 -<dl> 2.2933 -<dt> 2.2934 -<span style=cursor:zoom-in> zoom-in</span>, 2.2935 -<span style=cursor:zoom-out> zoom-out</span> 2.2936 + 2.2937 + <p>zooming cursors</p> 2.2938 + 2.2939 + <dl> 2.2940 + 2.2941 + <dt> 2.2942 +<span style="cursor:zoom-in"> zoom-in</span>, 2.2943 +<span style="cursor:zoom-out"> zoom-out</span> 2.2944 </dt> 2.2945 -<dd> 2.2946 + 2.2947 + <dd> 2.2948 Indicates that something can be zoomed (magnified) in or out, and 2.2949 -often rendered as a magnifying glass with a "+" or "-" in the center of the glass, for <span class=css>zoom-in</span> and <span class=css>zoom-out</span> respectively. 2.2950 +often rendered as a magnifying glass with a "+" or "-" in the center of the glass, for <span class="css">zoom-in</span> and <span class="css">zoom-out</span> respectively. 2.2951 </dd> 2.2952 </dl> 2.2953 2.2954 -<p>The UA may treat unsupported values as <a class=css data-link-type=maybe href=http://dev.w3.org/csswg/css-align-3/#valdef-justify-content-align-content-auto>auto</a>. 2.2955 -E.g. on platforms that do not have a concept of a <span class=css>context-menu</span> cursor, 2.2956 -the UA may render <span class=css>default</span> or whatever is appropriate.</p> 2.2957 - 2.2958 -<div class=example> 2.2959 - 2.2960 -<p>Example: cursor fallback</p> 2.2961 - 2.2962 -<p>Here is an example of using several cursor values.</p> 2.2963 -<pre><code class=lang-css>:link,:visited { 2.2964 + 2.2965 + <p>The UA may treat unsupported values as <a class="css" data-link-type="maybe" href="http://dev.w3.org/csswg/css-align-3/#valdef-justify-content-align-content-auto">auto</a>. 2.2966 +E.g. on platforms that do not have a concept of a <span class="css">context-menu</span> cursor, 2.2967 +the UA may render <span class="css">default</span> or whatever is appropriate.</p> 2.2968 + 2.2969 + 2.2970 + <div class="example"> 2.2971 + 2.2972 + 2.2973 + <p>Example: cursor fallback</p> 2.2974 + 2.2975 + 2.2976 + <p>Here is an example of using several cursor values.</p> 2.2977 + 2.2978 + <pre><code class="lang-css">:link,:visited { 2.2979 cursor: url(example.svg#linkcursor), 2.2980 url(hyper.cur), 2.2981 url(hyper.png) 2 3, 2.2982 @@ -2097,240 +2531,292 @@ 2.2983 } 2.2984 </code></pre> 2.2985 2.2986 -<p>This example sets the cursor on all hyperlinks (whether visited or not) 2.2987 -to an external <a href=http://www.w3.org/TR/SVG/interact.html#CursorElement>SVG cursor</a> (<a data-biblio-type=informative data-link-type=biblio href=#biblio-svg10 title=SVG10>[SVG10]</a>, section 16.8.3). 2.2988 + 2.2989 + <p>This example sets the cursor on all hyperlinks (whether visited or not) 2.2990 +to an external <a href="http://www.w3.org/TR/SVG/interact.html#CursorElement">SVG cursor</a> (<a data-biblio-type="informative" data-link-type="biblio" href="#biblio-svg10" title="SVG10">[SVG10]</a>, section 16.8.3). 2.2991 User agents that don’t support SVG cursors would simply skip 2.2992 to the next value and attempt to use the "hyper.cur" cursor. 2.2993 If that cursor format was also not supported, 2.2994 the UA could attempt to use the "hyper.png" cursor with the explicit hot spot. 2.2995 Finally if the UA does not support any of those image cursor formats, the UA would skip to the last value 2.2996 -and simply render the <span class=css>pointer</span> cursor.</p> 2.2997 +and simply render the <span class="css">pointer</span> cursor.</p> 2.2998 </div> 2.2999 2.3000 2.3001 2.3002 -<h3 class="heading settled" data-level=8.2 id=keyboard><span class=secno>8.2. </span><span class=content>Keyboard control</span><a class=self-link href=#keyboard></a></h3> 2.3003 - 2.3004 -<h4 class="heading settled" data-level=8.2.1 id=nav-index><span class=secno>8.2.1. </span><span class=content>Sequential navigation order: the <a class=property data-link-type=propdesc href=#propdef-nav-index>nav-index</a> property</span><a class=self-link href=#nav-index></a></h4> 2.3005 - 2.3006 -<p>The <a class=property data-link-type=propdesc href=#propdef-nav-index>nav-index</a> property is an input-method-neutral way of specifying the sequential navigation order (also known as "tabbing order").</p> 2.3007 -<table class=propdef> 2.3008 -<tr><th>Name:<td><dfn class=css data-dfn-type=property data-export="" id=propdef-nav-index>nav-index<a class=self-link href=#propdef-nav-index></a></dfn></tr> 2.3009 -<tr><th>Value: <td>auto | <number> | inherit</tr> 2.3010 -<tr><th>Initial:<td>auto</tr> 2.3011 -<tr><th>Applies to:<td>all enabled elements</tr> 2.3012 -<tr><th>Inherited:<td>no</tr> 2.3013 -<tr><th>Percentages:<td>n/a</tr> 2.3014 -<tr><th>Media:<td>interactive</tr> 2.3015 -<tr><th>Computed value:<td>specified value.</tr> 2.3016 -<tr><th>Animatable:<td>as <a href=http://dev.w3.org/csswg/css3-transitions/#animtype-number>number</a></tr> 2.3017 -</table> 2.3018 -<dl> 2.3019 -<dt>auto</dt> 2.3020 -<dd>The element’s sequential navigation order is assigned automatically by the user agent.</dd> 2.3021 -<dt><number></dt> 2.3022 -<dd>The number (which is non-zero and positive) indicates 2.3023 -the sequential navigation order for the element. 2.3024 -<span class=css>1</span> means first. 2.3025 -Elements with the same nav-index value are navigated 2.3026 -in document order when that nav-index value is being navigated. 2.3027 + <h3 class="heading settled" data-level="7.2" id="keyboard"><span class="secno">7.2. </span><span class="content">Keyboard control</span><a class="self-link" href="#keyboard"></a></h3> 2.3028 + 2.3029 + 2.3030 + <h4 class="heading settled" data-level="7.2.1" id="nav-dir"><span class="secno">7.2.1. </span><span class="content">Directional focus navigation: the <a class="property" data-link-type="propdesc" href="#propdef-nav-up">nav-up</a>, <a class="property" data-link-type="propdesc" href="#propdef-nav-right">nav-right</a>, <a class="property" data-link-type="propdesc" href="#propdef-nav-down">nav-down</a>, <a class="property" data-link-type="propdesc" href="#propdef-nav-left">nav-left</a> properties</span><a class="self-link" href="#nav-dir"></a></h4> 2.3031 + 2.3032 + <table class="propdef"> 2.3033 + <tbody> 2.3034 + 2.3035 + <tr> 2.3036 + <th>Name: </th> 2.3037 + <td><dfn class="css" data-dfn-type="property" data-export="" id="propdef-nav-up">nav-up<a class="self-link" href="#propdef-nav-up"></a></dfn>, <dfn class="css" data-dfn-type="property" data-export="" id="propdef-nav-right">nav-right<a class="self-link" href="#propdef-nav-right"></a></dfn>, <dfn class="css" data-dfn-type="property" data-export="" id="propdef-nav-down">nav-down<a class="self-link" href="#propdef-nav-down"></a></dfn>, <dfn class="css" data-dfn-type="property" data-export="" id="propdef-nav-left">nav-left<a class="self-link" href="#propdef-nav-left"></a></dfn></td></tr> 2.3038 + 2.3039 + 2.3040 + <tr> 2.3041 + <th>Value: </th> 2.3042 + <td>auto | <id> [ current | root | <target-name> ]? | inherit</td></tr> 2.3043 + 2.3044 + 2.3045 + <tr> 2.3046 + <th>Initial:</th> 2.3047 + <td>auto</td></tr> 2.3048 + 2.3049 + 2.3050 + <tr> 2.3051 + <th>Applies to:</th> 2.3052 + <td>all enabled elements</td></tr> 2.3053 + 2.3054 + 2.3055 + <tr> 2.3056 + <th>Inherited:</th> 2.3057 + <td>no</td></tr> 2.3058 + 2.3059 + 2.3060 + <tr> 2.3061 + <th>Percentages:</th> 2.3062 + <td>N/A</td></tr> 2.3063 + 2.3064 + 2.3065 + <tr> 2.3066 + <th>Media:</th> 2.3067 + <td>interactive</td></tr> 2.3068 + 2.3069 + 2.3070 + <tr> 2.3071 + <th>Computed value:</th> 2.3072 + <td>as specified</td></tr> 2.3073 + 2.3074 + 2.3075 + <tr> 2.3076 + <th>Animatable:</th> 2.3077 + <td>no</td></tr> 2.3078 + 2.3079 + 2.3080 + </tbody></table> 2.3081 + 2.3082 + 2.3083 + <dl> 2.3084 + 2.3085 + <dt>auto</dt> 2.3086 + 2.3087 + <dd>The user agent automatically determines which element to navigate the focus to in response to directional navigational input.</dd> 2.3088 + 2.3089 + <dt><id></dt> 2.3090 + 2.3091 + <dd> 2.3092 + <p>The <id> value is an ID selector <a data-biblio-type="informative" data-link-type="biblio" href="#biblio-select" title="SELECT">[SELECT]</a>. 2.3093 +In response to directional navigation input corresponding to the property, 2.3094 +the focus is navigated to the first element in tree order matching the selector. 2.3095 + 2.3096 +</p> 2.3097 + <p>If this refers to the currently focused element, 2.3098 +the directional navigation input respective to the nav- property is ignored — 2.3099 +there is no need to refocus the same element.</p> 2.3100 + 2.3101 + 2.3102 + <p>If no element matches the selector, 2.3103 +the user agent automatically determines which element to navigate the focus to.</p> 2.3104 +</dd> 2.3105 + 2.3106 + <dt><target-name></dt> 2.3107 + 2.3108 + <dd> 2.3109 +The <target-name> parameter indicates the target frame for the focus navigation. 2.3110 +It is a string and it cannot start with the underscore "_" character. 2.3111 +If the specified target frame does not exist, 2.3112 +the parameter will be treated as the keyword <span class="css">current</span>, 2.3113 +which means to simply use the frame that the element is in. 2.3114 +The keyword <span class="css">root</span> indicates that the user agent should target the full window. 2.3115 </dd> 2.3116 </dl> 2.3117 2.3118 -<p>This property is a replacement for the HTML4/XHTML1 attribute 2.3119 -'<a href=http://www.w3.org/TR/html401/interact/forms.html#h-17.11.1>tabindex</a>' (<a data-biblio-type=informative data-link-type=biblio href=#biblio-html401 title=HTML401>[HTML401]</a>, section 17.11.1). 2.3120 -Borrowed and slightly rephrased from the HTML4 Recommendation:</p> 2.3121 - 2.3122 -<p>This property specifies the position of the current element in the sequential navigation order for the current document.</p> 2.3123 - 2.3124 -<p>The sequential navigation order defines the order 2.3125 -in which elements will receive focus when navigated by the user via the keyboard. 2.3126 -The sequential navigation order may include elements nested within other elements.</p> 2.3127 - 2.3128 -<p>Elements that may receive focus should be navigated by user agents according to the following rules:</p> 2.3129 -<ol> 2.3130 -<li>Those elements that support the nav-index property 2.3131 -and assign a positive value to it are navigated first. 2.3132 -Navigation proceeds from the element with the lowest nav-index value 2.3133 -to the element with the highest value. 2.3134 -Values need not be sequential nor must they begin with any particular value. 2.3135 -Elements that have identical nav-index values should be navigated in document order. 2.3136 -<li>Those elements that do not support the nav-index property 2.3137 -or support it and assign it a value of <a class=css data-link-type=maybe href=http://dev.w3.org/csswg/css-align-3/#valdef-justify-content-align-content-auto>auto</a> 2.3138 -are navigated next. 2.3139 -These elements are navigated in document order. 2.3140 -<li>Elements that are disabled do not participate in the sequential navigation order. 2.3141 -</ol> 2.3142 - 2.3143 -<p>The actual key sequence that causes sequential navigation or element activation 2.3144 -depends on the configuration of the user agent 2.3145 -(e.g., the "tab" key is often used for sequential navigation, 2.3146 -and the "enter" key is used to activate a selected element).</p> 2.3147 - 2.3148 -<p>User agents may also define key sequences to navigate the sequential navigation order in reverse. 2.3149 -When the end (or beginning) of the tabbing order is reached, 2.3150 -user agents may circle back to the beginning (or end). 2.3151 -The key combination "shift-tab" is often used for reverse sequential navigation.</p> 2.3152 - 2.3153 -<p class=note role=note>Note: The <a class=property data-link-type=propdesc href=#propdef-nav-index>nav-index</a> property is at risk.</p> 2.3154 - 2.3155 -<h4 class="heading settled" data-level=8.2.2 id=nav-dir><span class=secno>8.2.2. </span><span class=content>Directional focus navigation: the <a class=property data-link-type=propdesc href=#propdef-nav-up>nav-up</a>, <a class=property data-link-type=propdesc href=#propdef-nav-right>nav-right</a>, <a class=property data-link-type=propdesc href=#propdef-nav-down>nav-down</a>, <a class=property data-link-type=propdesc href=#propdef-nav-left>nav-left</a> properties</span><a class=self-link href=#nav-dir></a></h4> 2.3156 -<table class=propdef><tbody> 2.3157 -<tr><th>Name: <td><dfn class=css data-dfn-type=property data-export="" id=propdef-nav-up>nav-up<a class=self-link href=#propdef-nav-up></a></dfn>, <dfn class=css data-dfn-type=property data-export="" id=propdef-nav-right>nav-right<a class=self-link href=#propdef-nav-right></a></dfn>, <dfn class=css data-dfn-type=property data-export="" id=propdef-nav-down>nav-down<a class=self-link href=#propdef-nav-down></a></dfn>, <dfn class=css data-dfn-type=property data-export="" id=propdef-nav-left>nav-left<a class=self-link href=#propdef-nav-left></a></dfn></tr> 2.3158 -<tr><th>Value: <td>auto | <id> [ current | root | <target-name> ]? | inherit</tr> 2.3159 -<tr><th>Initial:<td>auto</tr> 2.3160 -<tr><th>Applies to:<td>all enabled elements</tr> 2.3161 -<tr><th>Inherited:<td>no</tr> 2.3162 -<tr><th>Percentages:<td>N/A</tr> 2.3163 -<tr><th>Media:<td>interactive</tr> 2.3164 -<tr><th>Computed value:<td>as specified</tr> 2.3165 -<tr><th>Animatable:<td>no</tr> 2.3166 -</table> 2.3167 - 2.3168 -<dl> 2.3169 -<dt>auto</dt> 2.3170 -<dd>The user agent automatically determines which element to navigate the focus to in response to directional navigational input.</dd> 2.3171 -<dt><id></dt> 2.3172 -<dd><p>The <id> value is an ID selector <a data-biblio-type=informative data-link-type=biblio href=#biblio-select title=SELECT>[SELECT]</a>. 2.3173 -In response to directional navigation input corresponding to the property, 2.3174 -the focus is navigated to the first element in tree order matching the selector. 2.3175 - 2.3176 -<p>If this refers to the currently focused element, 2.3177 -the directional navigation input respective to the nav- property is ignored — 2.3178 -there is no need to refocus the same element.</p> 2.3179 - 2.3180 -<p>If no element matches the selector, 2.3181 -the user agent automatically determines which element to navigate the focus to.</p> 2.3182 -</dd> 2.3183 -<dt><target-name></dt> 2.3184 -<dd> 2.3185 -The <target-name> parameter indicates the target frame for the focus navigation. 2.3186 -It is a string and it cannot start with the underscore "_" character. 2.3187 -If the specified target frame does not exist, 2.3188 -the parameter will be treated as the keyword <span class=css>current</span>, 2.3189 -which means to simply use the frame that the element is in. 2.3190 -The keyword <span class=css>root</span> indicates that the user agent should target the full window. 2.3191 -</dd> 2.3192 -</dl> 2.3193 - 2.3194 -<p>User agents for devices with directional navigation keys 2.3195 + 2.3196 + <p>User agents for devices with directional navigation keys 2.3197 respond by navigating the focus according to four respective nav-* directional navigation properties 2.3198 (nav-up, nav-right, nav-down, nav-left). 2.3199 This specification does not define which keys of a device are directional navigational keys.</p> 2.3200 2.3201 -<p class=note role=note>Note: Typical personal computers have keyboards with four arrow keys. 2.3202 + 2.3203 + <p class="note" role="note">Note: Typical personal computers have keyboards with four arrow keys. 2.3204 One possible implementation would be to use those four arrow keys for directional navigation. 2.3205 For accessibility and user convenience, 2.3206 user agents should allow configuration of which keys on a keyboard are used for directional navigation.</p> 2.3207 2.3208 -<div class=example> 2.3209 - 2.3210 -<p>Example: positioned buttons</p> 2.3211 - 2.3212 -<p>Here is an example of buttons positioned in a diamond shape 2.3213 + 2.3214 + <div class="example"> 2.3215 + 2.3216 + 2.3217 + <p>Example: positioned buttons</p> 2.3218 + 2.3219 + 2.3220 + <p>Here is an example of buttons positioned in a diamond shape 2.3221 whose navigation order and directional focus navigation is set in such a way 2.3222 to navigate the focus clockwise (or counter-clockwise) around the diamond shape 2.3223 when the user chooses to navigate sequentially or directionally.</p> 2.3224 -<pre><code class=lang-css>button { position:absolute } 2.3225 + 2.3226 + <pre><code class="lang-css">button { position:absolute } 2.3227 2.3228 button#b1 { 2.3229 top:0; left:50%; 2.3230 - nav-index:1; 2.3231 nav-right:#b2; nav-left:#b4; 2.3232 nav-down:#b2; nav-up:#b4; 2.3233 } 2.3234 2.3235 button#b2 { 2.3236 top:50%; left:100%; 2.3237 - nav-index:2; 2.3238 nav-right:#b3; nav-left:#b1; 2.3239 nav-down:#b3; nav-up:#b1; 2.3240 } 2.3241 2.3242 button#b3 { 2.3243 top:100%; left:50%; 2.3244 - nav-index:3; 2.3245 nav-right:#b4; nav-left:#b2; 2.3246 nav-down:#b4; nav-up:#b2; 2.3247 } 2.3248 2.3249 button#b4 { 2.3250 top:50%; left:0; 2.3251 - nav-index:4; 2.3252 nav-right:#b1; nav-left:#b3; 2.3253 nav-down:#b1; nav-up:#b3; 2.3254 } 2.3255 </code></pre> 2.3256 2.3257 -<p>Whatever markup sequence the buttons may have 2.3258 + 2.3259 + <p>Whatever markup sequence the buttons may have 2.3260 (which is not specified in this example) 2.3261 is irrelevant in this case because they are positioned, and yet, 2.3262 it is still important to ensure focus navigation behaviors which relate reasonably to the specified layout.</p> 2.3263 </div> 2.3264 2.3265 -<h4 class="heading settled" data-level=8.2.3 id=input-method-editor><span class=secno>8.2.3. </span><span class=content>Input method editor: the <a class=property data-link-type=propdesc href=#propdef-ime-mode>ime-mode</a> property</span><a class=self-link href=#input-method-editor></a></h4> 2.3266 - 2.3267 -<table class=propdef><tbody> 2.3268 -<tr><th>Name: <td><dfn class=css data-dfn-type=property data-export="" id=propdef-ime-mode>ime-mode<a class=self-link href=#propdef-ime-mode></a></dfn></tr> 2.3269 -<tr><th>Value: <td>auto | normal | active | inactive | disabled | inherit</tr> 2.3270 -<tr><th>Initial:<td>auto</tr> 2.3271 -<tr><th>Applies to:<td>text fields</tr> 2.3272 -<tr><th>Inherited:<td>no</tr> 2.3273 -<tr><th>Percentages:<td>N/A</tr> 2.3274 -<tr><th>Media:<td>interactive</tr> 2.3275 -<tr><th>Computed value:<td>as specified</tr> 2.3276 -<tr><th>Animatable:<td>no</tr> 2.3277 -</table> 2.3278 - 2.3279 -<p>The <a class=property data-link-type=propdesc href=#propdef-ime-mode>ime-mode</a> CSS property controls the state of the input method editor for text fields.</p> 2.3280 - 2.3281 -<dl> 2.3282 -<dt>auto</dt> 2.3283 -<dd> 2.3284 + 2.3285 + <h4 class="heading settled" data-level="7.2.2" id="input-method-editor"><span class="secno">7.2.2. </span><span class="content">Input method editor: the <a class="property" data-link-type="propdesc" href="#propdef-ime-mode">ime-mode</a> property</span><a class="self-link" href="#input-method-editor"></a></h4> 2.3286 + 2.3287 + 2.3288 + <table class="propdef"> 2.3289 + <tbody> 2.3290 + 2.3291 + <tr> 2.3292 + <th>Name: </th> 2.3293 + <td><dfn class="css" data-dfn-type="property" data-export="" id="propdef-ime-mode">ime-mode<a class="self-link" href="#propdef-ime-mode"></a></dfn></td></tr> 2.3294 + 2.3295 + 2.3296 + <tr> 2.3297 + <th>Value: </th> 2.3298 + <td>auto | normal | active | inactive | disabled | inherit</td></tr> 2.3299 + 2.3300 + 2.3301 + <tr> 2.3302 + <th>Initial:</th> 2.3303 + <td>auto</td></tr> 2.3304 + 2.3305 + 2.3306 + <tr> 2.3307 + <th>Applies to:</th> 2.3308 + <td>text fields</td></tr> 2.3309 + 2.3310 + 2.3311 + <tr> 2.3312 + <th>Inherited:</th> 2.3313 + <td>no</td></tr> 2.3314 + 2.3315 + 2.3316 + <tr> 2.3317 + <th>Percentages:</th> 2.3318 + <td>N/A</td></tr> 2.3319 + 2.3320 + 2.3321 + <tr> 2.3322 + <th>Media:</th> 2.3323 + <td>interactive</td></tr> 2.3324 + 2.3325 + 2.3326 + <tr> 2.3327 + <th>Computed value:</th> 2.3328 + <td>as specified</td></tr> 2.3329 + 2.3330 + 2.3331 + <tr> 2.3332 + <th>Animatable:</th> 2.3333 + <td>no</td></tr> 2.3334 + 2.3335 + 2.3336 + </tbody></table> 2.3337 + 2.3338 + 2.3339 + <p>The <a class="property" data-link-type="propdesc" href="#propdef-ime-mode">ime-mode</a> CSS property controls the state of the input method editor for text fields.</p> 2.3340 + 2.3341 + 2.3342 + <dl> 2.3343 + 2.3344 + <dt>auto</dt> 2.3345 + 2.3346 + <dd> 2.3347 No change is made to the current input method editor state. This is the default. 2.3348 </dd> 2.3349 -<dt>normal</dt> 2.3350 -<dd> 2.3351 + 2.3352 + <dt>normal</dt> 2.3353 + 2.3354 + <dd> 2.3355 The IME state should be normal; 2.3356 this value can be used in a user style sheet to override the page setting. 2.3357 </dd> 2.3358 -<dt>active</dt> 2.3359 -<dd> 2.3360 + 2.3361 + <dt>active</dt> 2.3362 + 2.3363 + <dd> 2.3364 The input method editor is initially active; 2.3365 text entry is performed using it unless the user specifically dismisses it. 2.3366 </dd> 2.3367 -<dt>inactive</dt> 2.3368 -<dd> 2.3369 + 2.3370 + <dt>inactive</dt> 2.3371 + 2.3372 + <dd> 2.3373 The input method editor is initially inactive, 2.3374 but the user may activate it if they wish. 2.3375 </dd> 2.3376 -<dt>disabled</dt> 2.3377 -<dd> 2.3378 + 2.3379 + <dt>disabled</dt> 2.3380 + 2.3381 + <dd> 2.3382 The input method editor is disabled and may not be activated by the user. 2.3383 </dd> 2.3384 </dl> 2.3385 2.3386 -<div class=example> 2.3387 -<p>Example: disabling input method support 2.3388 -<pre><code class=lang-markup><input type="text" name="name" value="initial value" style="ime-mode: disabled"> 2.3389 + 2.3390 + <div class="example"> 2.3391 + 2.3392 + <p>Example: disabling input method support 2.3393 +</p> 2.3394 + <pre><code class="lang-markup"><input type="text" name="name" value="initial value" style="ime-mode: disabled"> 2.3395 </code></pre> 2.3396 2.3397 -<p>This example disables input method support for a field; 2.3398 + 2.3399 + <p>This example disables input method support for a field; 2.3400 this might be necessary for fields that enter data 2.3401 into a database that doesn’t support extended character sets, 2.3402 for example.</p> 2.3403 </div> 2.3404 2.3405 -<div class=example> 2.3406 -<p>Example: user preference 2.3407 -<pre><code class=lang-css>input[type=password] { ime-mode: auto !important; 2.3408 + 2.3409 + <div class="example"> 2.3410 + 2.3411 + <p>Example: user preference 2.3412 +</p> 2.3413 + <pre><code class="lang-css">input[type=password] { ime-mode: auto !important; 2.3414 } 2.3415 </code></pre> 2.3416 2.3417 -<p>This example CSS may be placed into a user style sheet file to force password input fields to behave in a default manner.</p> 2.3418 + 2.3419 + <p>This example CSS may be placed into a user style sheet file to force password input fields to behave in a default manner.</p> 2.3420 </div> 2.3421 2.3422 -<p class=note role=note>Note: In general, it’s not appropriate for a public web site 2.3423 + 2.3424 + <p class="note" role="note">Note: In general, it’s not appropriate for a public web site 2.3425 to manipulate the IME mode setting. 2.3426 This property should be used for web applications and the like. 2.3427 Authors should not rely on disabling IME 2.3428 @@ -2338,16 +2824,21 @@ 2.3429 Even with IME disabled, users can still paste extended characters 2.3430 into a form’s fields.</p> 2.3431 2.3432 -<p class=note role=note>Note: The <a class=property data-link-type=propdesc href=#propdef-ime-mode>ime-mode</a> property is at risk.</p> 2.3433 - 2.3434 -<hr title="Separator from footer"> 2.3435 - 2.3436 - 2.3437 -<h2 class="no-num heading settled" id=acknowledgments><span class=content>Appendix A. Acknowledgments</span><a class=self-link href=#acknowledgments></a></h2> 2.3438 - 2.3439 -<p>This appendix is <em>informative</em>.</p> 2.3440 - 2.3441 -<p>Thanks to feedback and contributions from 2.3442 + 2.3443 + <p class="note" role="note">Note: The <a class="property" data-link-type="propdesc" href="#propdef-ime-mode">ime-mode</a> property is at risk.</p> 2.3444 + 2.3445 + 2.3446 + <hr title="Separator from footer"> 2.3447 + 2.3448 + 2.3449 + 2.3450 + <h2 class="no-num heading settled" id="acknowledgments"><span class="content">Appendix A. Acknowledgments</span><a class="self-link" href="#acknowledgments"></a></h2> 2.3451 + 2.3452 + 2.3453 + <p>This appendix is <em>informative</em>.</p> 2.3454 + 2.3455 + 2.3456 + <p>Thanks to feedback and contributions from 2.3457 L. David Baron, 2.3458 Bert Bos, 2.3459 Matthew Brealey, 2.3460 @@ -2371,67 +2862,87 @@ 2.3461 David Woolley 2.3462 and Domel.</p> 2.3463 2.3464 -<h2 class="no-num heading settled" id=changes><span class=content>Appendix B. Changes</span><a class=self-link href=#changes></a></h2> 2.3465 - 2.3466 -<p>This appendix is <em>informative</em>.</p> 2.3467 - 2.3468 -<p>In general this draft contains numerous 2.3469 + 2.3470 + <h2 class="no-num heading settled" id="changes"><span class="content">Appendix B. Changes</span><a class="self-link" href="#changes"></a></h2> 2.3471 + 2.3472 + 2.3473 + <p>This appendix is <em>informative</em>.</p> 2.3474 + 2.3475 + 2.3476 + <p>In general this draft contains numerous 2.3477 editorial/grammatical/spelling corrections, 2.3478 and several new informative examples. 2.3479 This appendix describes minor functional changes from the 2.3480 -<a href=http://www.w3.org/TR/2004/CR-css3-ui-20040511/>Candidate Recommendation (CR) of 11 May 2004</a> 2.3481 +<a href="http://www.w3.org/TR/2004/CR-css3-ui-20040511/">Candidate Recommendation (CR) of 11 May 2004</a> 2.3482 that were made to reflect implementer adoption (or lack thereof) 2.3483 in the seven years since. 2.3484 In particular, changes since the CR fall into one of 2.3485 three categories:</p> 2.3486 2.3487 -<ul> 2.3488 -<li>Minor refinements to features based on implementation experience. 2.3489 + 2.3490 + <ul> 2.3491 + 2.3492 + <li>Minor refinements to features based on implementation experience. 2.3493 2.3494 2.3495 -<li>Dropping features that were not implemented, 2.3496 +</li> 2.3497 + <li>Dropping features that were not implemented, 2.3498 or were insufficiently implemented to exit CR. 2.3499 2.3500 -<li>Adding a small number of new but already interoperably 2.3501 +</li> 2.3502 + <li>Adding a small number of new but already interoperably 2.3503 implemented features. 2.3504 2.3505 2.3506 -</ul> 2.3507 - 2.3508 -<h3 class="no-num heading settled" id=changes-list><span class=content>List of substantial changes</span><a class=self-link href=#changes-list></a></h3> 2.3509 - 2.3510 -<ul> 2.3511 -<li>System Appearance has been dropped, 2.3512 +</li></ul> 2.3513 + 2.3514 + 2.3515 + <h3 class="no-num heading settled" id="changes-list"><span class="content">List of substantial changes</span><a class="self-link" href="#changes-list"></a></h3> 2.3516 + 2.3517 + 2.3518 + <ul> 2.3519 + 2.3520 + <li>System Appearance has been dropped, 2.3521 including appearance values & property, 2.3522 -and system fonts / extension of the <a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css-fonts-3/#propdef-font>font</a> property shorthand. 2.3523 - 2.3524 - 2.3525 -<li>The ::selection pseudo-element has been dropped since 2.3526 +and system fonts / extension of the <a class="property" data-link-type="propdesc" href="http://dev.w3.org/csswg/css-fonts-3/#propdef-font">font</a> property shorthand. 2.3527 + 2.3528 + 2.3529 +</li> 2.3530 + <li>The ::selection pseudo-element has been dropped since 2.3531 it was dropped from Selectors after testing found 2.3532 interoperability problems and further details to explore/define. 2.3533 2.3534 2.3535 -<li><a class=property data-link-type=propdesc href=#propdef-box-sizing>box-sizing</a> property. Added <a class=css data-link-type=maybe href=http://dev.w3.org/fxtf/masking/#valuedef-padding-box0>padding-box</a> value. 2.3536 - 2.3537 -<li><a class=property data-link-type=propdesc href=#propdef-cursor>cursor</a> property. Added detail about applying to the border, padding, and content areas of the element. 2.3538 - 2.3539 -<li><a class=property data-link-type=propdesc href=#propdef-ime-mode>ime-mode</a> property - new! 2.3540 - 2.3541 -<li><a class=property data-link-type=propdesc href=#propdef-text-overflow>text-overflow</a> property - new! 2.3542 - 2.3543 -<li>2013-nov-28: <a class=property data-link-type=propdesc href=#propdef-nav-up>nav-up</a>, <a class=property data-link-type=propdesc href=#propdef-nav-right>nav-right</a>, <a class=property data-link-type=propdesc href=#propdef-nav-down>nav-down</a>, and <a class=property data-link-type=propdesc href=#propdef-nav-left>nav-left</a> properties removed from the "at risk" list 2.3544 - 2.3545 -</ul> 2.3546 - 2.3547 - 2.3548 - 2.3549 -<h2 class="no-num heading settled" id=default-style-sheet><span class=content>Appendix C. Default style sheet additions for HTML</span><a class=self-link href=#default-style-sheet></a></h2> 2.3550 - 2.3551 -<p>This appendix is <em>informative</em>.</p> 2.3552 - 2.3553 -<p>Potential additions to the base style sheet to express HTML form controls, and a few dynamic presentation attributes:</p> 2.3554 - 2.3555 -<pre class=lang-css>:enabled:focus { 2.3556 +</li> 2.3557 + <li><a class="property" data-link-type="propdesc" href="#propdef-box-sizing">box-sizing</a> property. Added <a class="css" data-link-type="maybe" href="http://dev.w3.org/fxtf/masking/#valuedef-padding-box0">padding-box</a> value. 2.3558 + 2.3559 +</li> 2.3560 + <li><a class="property" data-link-type="propdesc" href="#propdef-cursor">cursor</a> property. Added detail about applying to the border, padding, and content areas of the element. 2.3561 + 2.3562 +</li> 2.3563 + <li><a class="property" data-link-type="propdesc" href="#propdef-ime-mode">ime-mode</a> property - new! 2.3564 + 2.3565 +</li> 2.3566 + <li><a class="property" data-link-type="propdesc" href="#propdef-text-overflow">text-overflow</a> property - new! 2.3567 + 2.3568 +</li> 2.3569 + <li>2013-nov-28: <a class="property" data-link-type="propdesc" href="#propdef-nav-up">nav-up</a>, <a class="property" data-link-type="propdesc" href="#propdef-nav-right">nav-right</a>, <a class="property" data-link-type="propdesc" href="#propdef-nav-down">nav-down</a>, and <a class="property" data-link-type="propdesc" href="#propdef-nav-left">nav-left</a> properties removed from the "at risk" list 2.3570 + 2.3571 +</li></ul> 2.3572 + 2.3573 + 2.3574 + 2.3575 + 2.3576 + <h2 class="no-num heading settled" id="default-style-sheet"><span class="content">Appendix C. Default style sheet additions for HTML</span><a class="self-link" href="#default-style-sheet"></a></h2> 2.3577 + 2.3578 + 2.3579 + <p>This appendix is <em>informative</em>.</p> 2.3580 + 2.3581 + 2.3582 + <p>Potential additions to the base style sheet to express HTML form controls, and a few dynamic presentation attributes:</p> 2.3583 + 2.3584 + 2.3585 + <pre class="lang-css">:enabled:focus { 2.3586 outline: 2px inset; 2.3587 } 2.3588 2.3589 @@ -2499,14 +3010,14 @@ 2.3590 2.3591 select[size] 2.3592 { 2.3593 -/* HTML4/XHTML1 <select> w/ size more than 1 - appearance of list */ 2.3594 +/* HTML4/XHTML1 <select> w/ size more than 1 - appearance of list */ 2.3595 display: inline-block; 2.3596 height: attr(size,em); 2.3597 } 2.3598 2.3599 select,select[size=1] 2.3600 { 2.3601 -/* HTML4/XHTML1 <select> without size, or size=1 - popup-menu */ 2.3602 +/* HTML4/XHTML1 <select> without size, or size=1 - popup-menu */ 2.3603 display: inline-block; 2.3604 height: 1em; 2.3605 overflow: hidden; 2.3606 @@ -2514,7 +3025,7 @@ 2.3607 2.3608 select[size]:active 2.3609 { 2.3610 -/* active HTML4/XHTML <select> w/ size more than 1 - appearance of active list */ 2.3611 +/* active HTML4/XHTML <select> w/ size more than 1 - appearance of active list */ 2.3612 display: inline-block; 2.3613 } 2.3614 2.3615 @@ -2535,9 +3046,6 @@ 2.3616 content: check; 2.3617 } 2.3618 2.3619 -*[tabindex] { nav-index:attr(tabindex,number) } 2.3620 - 2.3621 - 2.3622 /* Though FRAME resizing is not directly addressed by this specification, 2.3623 the following rules may provide an approximation of reasonable behavior. */ 2.3624 2.3625 @@ -2551,27 +3059,34 @@ 2.3626 </pre> 2.3627 2.3628 2.3629 -<h2 class="no-num heading settled" id=test-suite><span class=content>Appendix D: Test Suite</span><a class=self-link href=#test-suite></a></h2> 2.3630 - 2.3631 -<p>This appendix is <em>informative</em>.</p> 2.3632 - 2.3633 -<p>This specification shall refer to a test suite 2.3634 -written according to the <a href=http://www.w3.org/Style/CSS/Test/testsuitedocumentation>CSS Test Suite Documentation</a> 2.3635 -and following the <a href=http://www.w3.org/Style/CSS/Test/guidelines.html>CSS2.1 Test Case Authoring Guidelines</a>. 2.3636 + 2.3637 + <h2 class="no-num heading settled" id="test-suite"><span class="content">Appendix D: Test Suite</span><a class="self-link" href="#test-suite"></a></h2> 2.3638 + 2.3639 + 2.3640 + <p>This appendix is <em>informative</em>.</p> 2.3641 + 2.3642 + 2.3643 + <p>This specification shall refer to a test suite 2.3644 +written according to the <a href="http://www.w3.org/Style/CSS/Test/testsuitedocumentation">CSS Test Suite Documentation</a> 2.3645 +and following the <a href="http://www.w3.org/Style/CSS/Test/guidelines.html">CSS2.1 Test Case Authoring Guidelines</a>. 2.3646 The test suite shall allow user agents to verify their basic conformance to the specification. 2.3647 This test suite does not pretend to be exhaustive and does not cover all possible combinations of user interface related features. 2.3648 -These tests will be made available from the <a href=http://www.w3.org/Style/CSS/Test/>CSS Test Suites</a> home page.</p> 2.3649 - 2.3650 -<p>Related issue: 2.3651 - <a href=http://wiki.csswg.org/spec/css3-ui#issue-1>1</a>.</p> 2.3652 +These tests will be made available from the <a href="http://www.w3.org/Style/CSS/Test/">CSS Test Suites</a> home page.</p> 2.3653 + 2.3654 + 2.3655 + <p>Related issue: 2.3656 + <a href="http://wiki.csswg.org/spec/css3-ui#issue-1">1</a>.</p> 2.3657 2.3658 </main> 2.3659 -<h2 class="no-ref no-num heading settled" id=conformance><span class=content> 2.3660 -Conformance</span><a class=self-link href=#conformance></a></h2> 2.3661 - 2.3662 -<h3 class="no-ref heading settled" id=conventions><span class=content> 2.3663 -Document conventions</span><a class=self-link href=#conventions></a></h3> 2.3664 - 2.3665 + 2.3666 + <h2 class="no-ref no-num heading settled" id="conformance"><span class="content"> 2.3667 +Conformance</span><a class="self-link" href="#conformance"></a></h2> 2.3668 + 2.3669 + 2.3670 + <h3 class="no-ref heading settled" id="conventions"><span class="content"> 2.3671 +Document conventions</span><a class="self-link" href="#conventions"></a></h3> 2.3672 + 2.3673 + 2.3674 <p>Conformance requirements are expressed with a combination of 2.3675 descriptive assertions and RFC 2119 terminology. The key words "MUST", 2.3676 "MUST NOT", "REQUIRED", "SHALL", "SHALL NOT", "SHOULD", "SHOULD NOT", 2.3677 @@ -2580,53 +3095,74 @@ 2.3678 However, for readability, these words do not appear in all uppercase 2.3679 letters in this specification. 2.3680 2.3681 + </p> 2.3682 <p>All of the text of this specification is normative except sections 2.3683 - explicitly marked as non-normative, examples, and notes. <a data-biblio-type=normative data-link-type=biblio href=#biblio-rfc2119 title=RFC2119>[RFC2119]</a></p> 2.3684 - 2.3685 + explicitly marked as non-normative, examples, and notes. <a data-biblio-type="normative" data-link-type="biblio" href="#biblio-rfc2119" title="RFC2119">[RFC2119]</a></p> 2.3686 + 2.3687 + 2.3688 <p>Examples in this specification are introduced with the words "for example" 2.3689 or are set apart from the normative text with <code>class="example"</code>, 2.3690 like this: 2.3691 2.3692 - <div class=example> 2.3693 - <p>This is an example of an informative example.</p> 2.3694 + </p> 2.3695 + <div class="example"> 2.3696 + 2.3697 + <p>This is an example of an informative example.</p> 2.3698 + 2.3699 + 2.3700 </div> 2.3701 2.3702 + 2.3703 <p>Informative notes begin with the word "Note" and are set apart from the 2.3704 normative text with <code>class="note"</code>, like this: 2.3705 2.3706 - <p class=note role=note>Note, this is an informative note.</p> 2.3707 - 2.3708 + </p> 2.3709 + <p class="note" role="note">Note, this is an informative note.</p> 2.3710 + 2.3711 + 2.3712 <p>Advisements are normative sections styled to evoke special attention and are 2.3713 - set apart from other normative text with <code><strong class="advisement"></code>, like 2.3714 + set apart from other normative text with <code><strong class="advisement"></code>, like 2.3715 this: 2.3716 2.3717 - <strong class=advisement> 2.3718 + <strong class="advisement"> 2.3719 UAs MUST provide an accessible alternative. 2.3720 </strong> 2.3721 2.3722 -<h3 class="no-ref heading settled" id=conformance-classes><span class=content> 2.3723 -Conformance classes</span><a class=self-link href=#conformance-classes></a></h3> 2.3724 - 2.3725 +</p> 2.3726 + <h3 class="no-ref heading settled" id="conformance-classes"><span class="content"> 2.3727 +Conformance classes</span><a class="self-link" href="#conformance-classes"></a></h3> 2.3728 + 2.3729 + 2.3730 <p>Conformance to this specification 2.3731 is defined for three conformance classes: 2.3732 + </p> 2.3733 <dl> 2.3734 - <dt>style sheet 2.3735 - <dd>A <a href=http://www.w3.org/TR/CSS21/conform.html#style-sheet>CSS 2.3736 + 2.3737 + <dt>style sheet 2.3738 + </dt> 2.3739 + <dd>A <a href="http://www.w3.org/TR/CSS21/conform.html#style-sheet">CSS 2.3740 style sheet</a>. 2.3741 - <dt>renderer 2.3742 - <dd>A <a href=http://www.w3.org/TR/CSS21/conform.html#user-agent>UA</a> 2.3743 + </dd> 2.3744 + <dt>renderer 2.3745 + </dt> 2.3746 + <dd>A <a href="http://www.w3.org/TR/CSS21/conform.html#user-agent">UA</a> 2.3747 that interprets the semantics of a style sheet and renders 2.3748 documents that use them. 2.3749 - <dt>authoring tool 2.3750 - <dd>A <a href=http://www.w3.org/TR/CSS21/conform.html#user-agent>UA</a> 2.3751 + </dd> 2.3752 + <dt>authoring tool 2.3753 + </dt> 2.3754 + <dd>A <a href="http://www.w3.org/TR/CSS21/conform.html#user-agent">UA</a> 2.3755 that writes a style sheet. 2.3756 + </dd> 2.3757 </dl> 2.3758 2.3759 + 2.3760 <p>A style sheet is conformant to this specification 2.3761 if all of its statements that use syntax defined in this module are valid 2.3762 according to the generic CSS grammar and the individual grammars of each 2.3763 feature defined in this module. 2.3764 2.3765 + </p> 2.3766 <p>A renderer is conformant to this specification 2.3767 if, in addition to interpreting the style sheet as defined by the 2.3768 appropriate specifications, it supports all the features defined 2.3769 @@ -2636,18 +3172,21 @@ 2.3770 does not make the UA non-conformant. (For example, a UA is not 2.3771 required to render color on a monochrome monitor.) 2.3772 2.3773 + </p> 2.3774 <p>An authoring tool is conformant to this specification 2.3775 if it writes style sheets that are syntactically correct according to the 2.3776 generic CSS grammar and the individual grammars of each feature in 2.3777 this module, and meet all other conformance requirements of style sheets 2.3778 as described in this module. 2.3779 2.3780 -<h3 class="no-ref heading settled" id=partial><span class=content> 2.3781 -Partial implementations</span><a class=self-link href=#partial></a></h3> 2.3782 - 2.3783 +</p> 2.3784 + <h3 class="no-ref heading settled" id="partial"><span class="content"> 2.3785 +Partial implementations</span><a class="self-link" href="#partial"></a></h3> 2.3786 + 2.3787 + 2.3788 <p>So that authors can exploit the forward-compatible parsing rules to 2.3789 assign fallback values, CSS renderers <strong>must</strong> 2.3790 - treat as invalid (and <a href=http://www.w3.org/TR/CSS21/conform.html#ignore>ignore 2.3791 + treat as invalid (and <a href="http://www.w3.org/TR/CSS21/conform.html#ignore">ignore 2.3792 as appropriate</a>) any at-rules, properties, property values, keywords, 2.3793 and other syntactic constructs for which they have no usable level of 2.3794 support. In particular, user agents <strong>must not</strong> selectively 2.3795 @@ -2656,13 +3195,16 @@ 2.3796 (as unsupported values must be), CSS requires that the entire declaration 2.3797 be ignored.</p> 2.3798 2.3799 -<h3 class="no-ref heading settled" id=experimental><span class=content> 2.3800 -Experimental implementations</span><a class=self-link href=#experimental></a></h3> 2.3801 - 2.3802 + 2.3803 + <h3 class="no-ref heading settled" id="experimental"><span class="content"> 2.3804 +Experimental implementations</span><a class="self-link" href="#experimental"></a></h3> 2.3805 + 2.3806 + 2.3807 <p>To avoid clashes with future CSS features, the CSS2.1 specification 2.3808 - reserves a <a href=http://www.w3.org/TR/CSS21/syndata.html#vendor-keywords>prefixed 2.3809 + reserves a <a href="http://www.w3.org/TR/CSS21/syndata.html#vendor-keywords">prefixed 2.3810 syntax</a> for proprietary and experimental extensions to CSS. 2.3811 2.3812 + </p> 2.3813 <p>Prior to a specification reaching the Candidate Recommendation stage 2.3814 in the W3C process, all implementations of a CSS feature are considered 2.3815 experimental. The CSS Working Group recommends that implementations 2.3816 @@ -2671,14 +3213,17 @@ 2.3817 in the draft. 2.3818 </p> 2.3819 2.3820 -<h3 class="no-ref heading settled" id=testing><span class=content> 2.3821 -Non-experimental implementations</span><a class=self-link href=#testing></a></h3> 2.3822 - 2.3823 + 2.3824 + <h3 class="no-ref heading settled" id="testing"><span class="content"> 2.3825 +Non-experimental implementations</span><a class="self-link" href="#testing"></a></h3> 2.3826 + 2.3827 + 2.3828 <p>Once a specification reaches the Candidate Recommendation stage, 2.3829 non-experimental implementations are possible, and implementors should 2.3830 release an unprefixed implementation of any CR-level feature they 2.3831 can demonstrate to be correctly implemented according to spec. 2.3832 2.3833 + </p> 2.3834 <p>To establish and maintain the interoperability of CSS across 2.3835 implementations, the CSS Working Group requests that non-experimental 2.3836 CSS renderers submit an implementation report (and, if necessary, the 2.3837 @@ -2687,26 +3232,187 @@ 2.3838 submitted to W3C are subject to review and correction by the CSS 2.3839 Working Group. 2.3840 2.3841 + </p> 2.3842 <p>Further information on submitting testcases and implementation reports 2.3843 can be found from on the CSS Working Group’s website at 2.3844 - <a href=http://www.w3.org/Style/CSS/Test/>http://www.w3.org/Style/CSS/Test/</a>. 2.3845 + <a href="http://www.w3.org/Style/CSS/Test/">http://www.w3.org/Style/CSS/Test/</a>. 2.3846 Questions should be directed to the 2.3847 - <a href=http://lists.w3.org/Archives/Public/public-css-testsuite>public-css-testsuite@w3.org</a> 2.3848 + <a href="http://lists.w3.org/Archives/Public/public-css-testsuite">public-css-testsuite@w3.org</a> 2.3849 mailing list. 2.3850 2.3851 2.3852 2.3853 -<h2 class="no-num heading settled" id=references><span class=content>References</span><a class=self-link href=#references></a></h2><h3 class="no-num heading settled" id=normative><span class=content>Normative References</span><a class=self-link href=#normative></a></h3><dl><dt id=biblio-css21 title=CSS21><a class=self-link href=#biblio-css21></a>[CSS21]<dd>Bert Bos; et al. <a href=http://www.w3.org/TR/2011/REC-CSS2-20110607>Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification</a>. 7 June 2011. W3C Recommendation. URL: <a href=http://www.w3.org/TR/2011/REC-CSS2-20110607>http://www.w3.org/TR/2011/REC-CSS2-20110607</a><dt id=biblio-css3-writing-modes title=CSS3-WRITING-MODES><a class=self-link href=#biblio-css3-writing-modes></a>[CSS3-WRITING-MODES]<dd>Elika J. Etemad; Koji Ishii. <a href=http://www.w3.org/TR/2012/WD-css3-writing-modes-20121115/>CSS Writing Modes Module Level 3</a>. 15 November 2012. W3C Working Draft. (Work in progress.) URL: <a href=http://www.w3.org/TR/2012/WD-css3-writing-modes-20121115/>http://www.w3.org/TR/2012/WD-css3-writing-modes-20121115/</a><dt id=biblio-css3color title=CSS3COLOR><a class=self-link href=#biblio-css3color></a>[CSS3COLOR]<dd>Tantek Çelik; Chris Lilley; L. David Baron. <a href=http://www.w3.org/TR/2011/REC-css3-color-20110607>CSS Color Module Level 3</a>. 7 June 2011. W3C Recommendation. URL: <a href=http://www.w3.org/TR/2011/REC-css3-color-20110607>http://www.w3.org/TR/2011/REC-css3-color-20110607</a><dt id=biblio-css3val title=CSS3VAL><a class=self-link href=#biblio-css3val></a>[CSS3VAL]<dd>Håkon Wium Lie; Tab Atkins; Elika J. Etemad. <a href=http://www.w3.org/TR/2013/CR-css3-values-20130730/>CSS Values and Units Module Level 3</a>. 30 July 2013. W3C Candidate Recommendation. (Work in progress.) URL: <a href=http://www.w3.org/TR/2013/CR-css3-values-20130730/>http://www.w3.org/TR/2013/CR-css3-values-20130730/</a><dt id=biblio-select title=SELECT><a class=self-link href=#biblio-select></a>[SELECT]<dd>Tantek Çelik; et al. <a href=http://www.w3.org/TR/2011/REC-css3-selectors-20110929/>Selectors Level 3</a>. 29 September 2011. W3C Recommendation. URL: <a href=http://www.w3.org/TR/2011/REC-css3-selectors-20110929/>http://www.w3.org/TR/2011/REC-css3-selectors-20110929/</a><dt id=biblio-uax29 title=UAX29><a class=self-link href=#biblio-uax29></a>[UAX29]<dd>Mark Davis. <a href=http://www.unicode.org/unicode/reports/tr29/tr29-9.html>Text Boundaries</a>. 25 March 2005. Unicode Standard Annex #29. URL: <a href=http://www.unicode.org/unicode/reports/tr29/tr29-9.html>http://www.unicode.org/unicode/reports/tr29/tr29-9.html</a><dt id=biblio-uri title=URI><a class=self-link href=#biblio-uri></a>[URI]<dd>T. Berners-Lee; R. Fielding; L. Masinter. <a href=http://www.ietf.org/rfc/rfc3986.txt>Uniform Resource Identifiers (URI): generic syntax</a>. January 2005. URL: <a href=http://www.ietf.org/rfc/rfc3986.txt>http://www.ietf.org/rfc/rfc3986.txt</a><dt id=biblio-rfc1738 title=rfc1738><a class=self-link href=#biblio-rfc1738></a>[rfc1738]<dd>T. Berners-Lee; L. Masinter; M. McCahill. <a href=https://tools.ietf.org/html/rfc1738>Uniform Resource Locators (URL)</a>. December 1994. Proposed Standard. URL: <a href=https://tools.ietf.org/html/rfc1738>https://tools.ietf.org/html/rfc1738</a><dt id=biblio-rfc1808 title=rfc1808><a class=self-link href=#biblio-rfc1808></a>[rfc1808]<dd>R. Fielding. <a href=https://tools.ietf.org/html/rfc1808>Relative Uniform Resource Locators</a>. June 1995. Proposed Standard. URL: <a href=https://tools.ietf.org/html/rfc1808>https://tools.ietf.org/html/rfc1808</a><dt id=biblio-rfc2119 title=rfc2119><a class=self-link href=#biblio-rfc2119></a>[rfc2119]<dd>S. Bradner. <a href=https://tools.ietf.org/html/rfc2119>Key words for use in RFCs to Indicate Requirement Levels</a>. March 1997. Best Current Practice. URL: <a href=https://tools.ietf.org/html/rfc2119>https://tools.ietf.org/html/rfc2119</a></dl><h3 class="no-num heading settled" id=informative><span class=content>Informative References</span><a class=self-link href=#informative></a></h3><dl><dt id=biblio-css1 title=CSS1><a class=self-link href=#biblio-css1></a>[CSS1]<dd>Håkon Wium Lie; Bert Bos. <a href=http://www.w3.org/TR/CSS1/>Cascading Style Sheets (CSS1) Level 1 Specification</a>. 11 April 2008. REC. URL: <a href=http://www.w3.org/TR/CSS1/>http://www.w3.org/TR/CSS1/</a><dt id=biblio-css2 title=CSS2><a class=self-link href=#biblio-css2></a>[CSS2]<dd>Bert Bos; et al. <a href=http://www.w3.org/TR/CSS2>Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification</a>. 7 June 2011. REC. URL: <a href=http://www.w3.org/TR/CSS2>http://www.w3.org/TR/CSS2</a><dt id=biblio-css3gencon title=CSS3GENCON><a class=self-link href=#biblio-css3gencon></a>[CSS3GENCON]<dd>Ian Hickson. <a href=http://www.w3.org/TR/2003/WD-css3-content-20030514>CSS3 Generated and Replaced Content Module</a>. 14 May 2003. W3C Working Draft. (Work in progress.) URL: <a href=http://www.w3.org/TR/2003/WD-css3-content-20030514>http://www.w3.org/TR/2003/WD-css3-content-20030514</a><dt id=biblio-cssui title=CSSUI><a class=self-link href=#biblio-cssui></a>[CSSUI]<dd>Tantek Çelik. <a href=http://www.w3.org/TR/2002/WD-css3-userint-20020802>User Interface for CSS3</a>. 16 February 2000. W3C Working Draft. (Superseded) URL: <a href=http://www.w3.org/TR/2002/WD-css3-userint-20020802>http://www.w3.org/TR/2002/WD-css3-userint-20020802</a><dt id=biblio-svg10 title=SVG10><a class=self-link href=#biblio-svg10></a>[SVG10]<dd>Jon Ferraiolo. <a href=http://www.w3.org/TR/2001/REC-SVG-20010904>Scalable Vector Graphics (SVG) 1.0 Specification</a>. 4 September 2001. W3C Recommendation. URL: <a href=http://www.w3.org/TR/2001/REC-SVG-20010904>http://www.w3.org/TR/2001/REC-SVG-20010904</a><dt id=biblio-uaag10 title=UAAG10><a class=self-link href=#biblio-uaag10></a>[UAAG10]<dd>Ian Jacobs; Jon Gunderson; Eric Hansen. <a href=http://www.w3.org/TR/UAAG10/>User Agent Accessibility Guidelines 1.0</a>. 17 December 2002. REC. URL: <a href=http://www.w3.org/TR/UAAG10/>http://www.w3.org/TR/UAAG10/</a><dt id=biblio-xhtml10 title=XHTML10><a class=self-link href=#biblio-xhtml10></a>[XHTML10]<dd>Steven Pemberton. <a href=http://www.w3.org/TR/2002/REC-xhtml1-20020801>XHTML™ 1.0 The Extensible HyperText Markup Language (Second Edition)</a>. 1 August 2002. W3C Recommendation. URL: <a href=http://www.w3.org/TR/2002/REC-xhtml1-20020801>http://www.w3.org/TR/2002/REC-xhtml1-20020801</a><dt id=biblio-xml10 title=XML10><a class=self-link href=#biblio-xml10></a>[XML10]<dd>C. M. Sperberg-McQueen; et al. <a href=http://www.w3.org/TR/2008/REC-xml-20081126/>Extensible Markup Language (XML) 1.0 (Fifth Edition)</a>. 26 November 2008. W3C Recommendation. URL: <a href=http://www.w3.org/TR/2008/REC-xml-20081126/>http://www.w3.org/TR/2008/REC-xml-20081126/</a><dt id=biblio-html401 title=html401><a class=self-link href=#biblio-html401></a>[html401]<dd>Dave Raggett; Arnaud Le Hors; Ian Jacobs. <a href=http://www.w3.org/TR/html401>HTML 4.01 Specification</a>. 24 December 1999. REC. URL: <a href=http://www.w3.org/TR/html401>http://www.w3.org/TR/html401</a><dt id=biblio-html5 title=html5><a class=self-link href=#biblio-html5></a>[html5]<dd>Ian Hickson; et al. <a href=http://www.w3.org/TR/html5/>HTML5</a>. 28 October 2014. REC. URL: <a href=http://www.w3.org/TR/html5/>http://www.w3.org/TR/html5/</a><dt id=biblio-xforms11 title=xforms11><a class=self-link href=#biblio-xforms11></a>[xforms11]<dd>John Boyer. <a href=http://www.w3.org/TR/xforms11/>XForms 1.1</a>. 20 October 2009. REC. URL: <a href=http://www.w3.org/TR/xforms11/>http://www.w3.org/TR/xforms11/</a><dt id=biblio-xhtml11 title=xhtml11><a class=self-link href=#biblio-xhtml11></a>[xhtml11]<dd>Shane McCarron; Masayasu Ishikawa. <a href=http://www.w3.org/TR/xhtml11/>XHTML™ 1.1 - Module-based XHTML - Second Edition</a>. 23 November 2010. REC. URL: <a href=http://www.w3.org/TR/xhtml11/>http://www.w3.org/TR/xhtml11/</a></dl><h2 class="no-num heading settled" id=index><span class=content>Index</span><a class=self-link href=#index></a></h2><ul class=indexlist><li>box-sizing, <a href=#propdef-box-sizing title="section 5.1">5.1</a><li>clip, <a href=#clip title="section 7.2">7.2</a><li>content, <a href=#propdef-content title="section 4.1">4.1</a><li>cursor, <a href=#propdef-cursor title="section 8.1.1">8.1.1</a><li>ellipsis, <a href=#ellipsis title="section 7.2">7.2</a><li>icon, <a href=#propdef-icon title="section 4.2">4.2</a><li>ime-mode, <a href=#propdef-ime-mode title="section 8.2.3">8.2.3</a><li>invert, <a href=#invert title="section 6.4">6.4</a><li>nav-down, <a href=#propdef-nav-down title="section 8.2.2">8.2.2</a><li>nav-index, <a href=#propdef-nav-index title="section 8.2.1">8.2.1</a><li>nav-left, <a href=#propdef-nav-left title="section 8.2.2">8.2.2</a><li>nav-right, <a href=#propdef-nav-right title="section 8.2.2">8.2.2</a><li>nav-up, <a href=#propdef-nav-up title="section 8.2.2">8.2.2</a><li>outline, <a href=#propdef-outline title="section 6.1">6.1</a><li>outline-color, <a href=#propdef-outline-color title="section 6.4">6.4</a><li>outline-offset, <a href=#propdef-outline-offset title="section 6.5">6.5</a><li>outline-style, <a href=#propdef-outline-style title="section 6.3">6.3</a><li>outline-width, <a href=#propdef-outline-width title="section 6.2">6.2</a><li>resize, <a href=#propdef-resize title="section 7.1">7.1</a><li>text-overflow, <a href=#propdef-text-overflow title="section 7.2">7.2</a></ul><h2 class="no-num heading settled" id=property-index><span class=content>Property Index</span><a class=self-link href=#property-index></a></h2><table class="proptable data"><thead><tr><th scope=col>Name<th scope=col>Value<th scope=col>Initial<th scope=col>Applies to<th scope=col>Inh.<th scope=col>%ages<th scope=col>Media<th scope=col>Animatable<th scope=col>Computed value<th scope=col>New value(s)<tbody><tr><th scope=row><a class=css data-link-type=property href=#propdef-content>content</a><td><td>same as CSS 2.1<td>same as CSS 2.1<td>same as CSS 2.1<td>same as CSS 2.1<td>same as CSS 2.1<td>no<td>the keyword icon if specified as such, otherwise same as CSS 2.1<td>icon<tr><th scope=row><a class=css data-link-type=property href=#propdef-icon>icon</a><td>auto | <uri> [, <uri>]* | inherit<td>auto<td>all elements<td>no<td>N/A<td>all<td>no<td>as specified, except with any relative URLs converted to absolute<td><tr><th scope=row><a class=css data-link-type=property href=#propdef-box-sizing>box-sizing</a><td>content-box | 2.3854 +</p> 2.3855 + <h2 class="no-num heading settled" id="references"><span class="content">References</span><a class="self-link" href="#references"></a></h2> 2.3856 + <h3 class="no-num heading settled" id="normative"><span class="content">Normative References</span><a class="self-link" href="#normative"></a></h3> 2.3857 + <dl> 2.3858 + <dt id="biblio-css21" title="CSS21"><a class="self-link" href="#biblio-css21"></a>[CSS21]</dt> 2.3859 + <dd>Bert Bos; et al. <a href="http://www.w3.org/TR/2011/REC-CSS2-20110607">Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification</a>. 7 June 2011. W3C Recommendation. URL: <a href="http://www.w3.org/TR/2011/REC-CSS2-20110607">http://www.w3.org/TR/2011/REC-CSS2-20110607</a></dd> 2.3860 + <dt id="biblio-css3-writing-modes" title="CSS3-WRITING-MODES"><a class="self-link" href="#biblio-css3-writing-modes"></a>[CSS3-WRITING-MODES]</dt> 2.3861 + <dd>Elika J. Etemad; Koji Ishii. <a href="http://www.w3.org/TR/2012/WD-css3-writing-modes-20121115/">CSS Writing Modes Module Level 3</a>. 15 November 2012. W3C Working Draft. (Work in progress.) URL: <a href="http://www.w3.org/TR/2012/WD-css3-writing-modes-20121115/">http://www.w3.org/TR/2012/WD-css3-writing-modes-20121115/</a></dd> 2.3862 + <dt id="biblio-css3color" title="CSS3COLOR"><a class="self-link" href="#biblio-css3color"></a>[CSS3COLOR]</dt> 2.3863 + <dd>Tantek Çelik; Chris Lilley; L. David Baron. <a href="http://www.w3.org/TR/2011/REC-css3-color-20110607">CSS Color Module Level 3</a>. 7 June 2011. W3C Recommendation. URL: <a href="http://www.w3.org/TR/2011/REC-css3-color-20110607">http://www.w3.org/TR/2011/REC-css3-color-20110607</a></dd> 2.3864 + <dt id="biblio-css3val" title="CSS3VAL"><a class="self-link" href="#biblio-css3val"></a>[CSS3VAL]</dt> 2.3865 + <dd>Håkon Wium Lie; Tab Atkins; Elika J. Etemad. <a href="http://www.w3.org/TR/2013/CR-css3-values-20130730/">CSS Values and Units Module Level 3</a>. 30 July 2013. W3C Candidate Recommendation. (Work in progress.) URL: <a href="http://www.w3.org/TR/2013/CR-css3-values-20130730/">http://www.w3.org/TR/2013/CR-css3-values-20130730/</a></dd> 2.3866 + <dt id="biblio-select" title="SELECT"><a class="self-link" href="#biblio-select"></a>[SELECT]</dt> 2.3867 + <dd>Tantek Çelik; et al. <a href="http://www.w3.org/TR/2011/REC-css3-selectors-20110929/">Selectors Level 3</a>. 29 September 2011. W3C Recommendation. URL: <a href="http://www.w3.org/TR/2011/REC-css3-selectors-20110929/">http://www.w3.org/TR/2011/REC-css3-selectors-20110929/</a></dd> 2.3868 + <dt id="biblio-uax29" title="UAX29"><a class="self-link" href="#biblio-uax29"></a>[UAX29]</dt> 2.3869 + <dd>Mark Davis. <a href="http://www.unicode.org/unicode/reports/tr29/tr29-9.html">Text Boundaries</a>. 25 March 2005. Unicode Standard Annex #29. URL: <a href="http://www.unicode.org/unicode/reports/tr29/tr29-9.html">http://www.unicode.org/unicode/reports/tr29/tr29-9.html</a></dd> 2.3870 + <dt id="biblio-rfc2119" title="rfc2119"><a class="self-link" href="#biblio-rfc2119"></a>[rfc2119]</dt> 2.3871 + <dd>S. Bradner. <a href="https://tools.ietf.org/html/rfc2119">Key words for use in RFCs to Indicate Requirement Levels</a>. March 1997. Best Current Practice. URL: <a href="https://tools.ietf.org/html/rfc2119">https://tools.ietf.org/html/rfc2119</a></dd> 2.3872 + </dl> 2.3873 + <h3 class="no-num heading settled" id="informative"><span class="content">Informative References</span><a class="self-link" href="#informative"></a></h3> 2.3874 + <dl> 2.3875 + <dt id="biblio-css1" title="CSS1"><a class="self-link" href="#biblio-css1"></a>[CSS1]</dt> 2.3876 + <dd>Håkon Wium Lie; Bert Bos. <a href="http://www.w3.org/TR/CSS1/">Cascading Style Sheets (CSS1) Level 1 Specification</a>. 11 April 2008. REC. URL: <a href="http://www.w3.org/TR/CSS1/">http://www.w3.org/TR/CSS1/</a></dd> 2.3877 + <dt id="biblio-css2" title="CSS2"><a class="self-link" href="#biblio-css2"></a>[CSS2]</dt> 2.3878 + <dd>Bert Bos; et al. <a href="http://www.w3.org/TR/CSS2">Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification</a>. 7 June 2011. REC. URL: <a href="http://www.w3.org/TR/CSS2">http://www.w3.org/TR/CSS2</a></dd> 2.3879 + <dt id="biblio-svg10" title="SVG10"><a class="self-link" href="#biblio-svg10"></a>[SVG10]</dt> 2.3880 + <dd>Jon Ferraiolo. <a href="http://www.w3.org/TR/2001/REC-SVG-20010904">Scalable Vector Graphics (SVG) 1.0 Specification</a>. 4 September 2001. W3C Recommendation. URL: <a href="http://www.w3.org/TR/2001/REC-SVG-20010904">http://www.w3.org/TR/2001/REC-SVG-20010904</a></dd> 2.3881 + <dt id="biblio-uaag10" title="UAAG10"><a class="self-link" href="#biblio-uaag10"></a>[UAAG10]</dt> 2.3882 + <dd>Ian Jacobs; Jon Gunderson; Eric Hansen. <a href="http://www.w3.org/TR/UAAG10/">User Agent Accessibility Guidelines 1.0</a>. 17 December 2002. REC. URL: <a href="http://www.w3.org/TR/UAAG10/">http://www.w3.org/TR/UAAG10/</a></dd> 2.3883 + <dt id="biblio-html401" title="html401"><a class="self-link" href="#biblio-html401"></a>[html401]</dt> 2.3884 + <dd>Dave Raggett; Arnaud Le Hors; Ian Jacobs. <a href="http://www.w3.org/TR/html401">HTML 4.01 Specification</a>. 24 December 1999. REC. URL: <a href="http://www.w3.org/TR/html401">http://www.w3.org/TR/html401</a></dd> 2.3885 + <dt id="biblio-html5" title="html5"><a class="self-link" href="#biblio-html5"></a>[html5]</dt> 2.3886 + <dd>Ian Hickson; et al. <a href="http://www.w3.org/TR/html5/">HTML5</a>. 28 October 2014. REC. URL: <a href="http://www.w3.org/TR/html5/">http://www.w3.org/TR/html5/</a></dd> 2.3887 + </dl> 2.3888 + <h2 class="no-num heading settled" id="index"><span class="content">Index</span><a class="self-link" href="#index"></a></h2> 2.3889 + <ul class="indexlist"> 2.3890 + <li>box-sizing, <a href="#propdef-box-sizing" title="section 4.1">4.1</a></li> 2.3891 + <li>clip, <a href="#clip" title="section 6.2">6.2</a></li> 2.3892 + <li>cursor, <a href="#propdef-cursor" title="section 7.1.1">7.1.1</a></li> 2.3893 + <li>ellipsis, <a href="#ellipsis" title="section 6.2">6.2</a></li> 2.3894 + <li>ime-mode, <a href="#propdef-ime-mode" title="section 7.2.2">7.2.2</a></li> 2.3895 + <li>invert, <a href="#invert" title="section 5.4">5.4</a></li> 2.3896 + <li>nav-down, <a href="#propdef-nav-down" title="section 7.2.1">7.2.1</a></li> 2.3897 + <li>nav-left, <a href="#propdef-nav-left" title="section 7.2.1">7.2.1</a></li> 2.3898 + <li>nav-right, <a href="#propdef-nav-right" title="section 7.2.1">7.2.1</a></li> 2.3899 + <li>nav-up, <a href="#propdef-nav-up" title="section 7.2.1">7.2.1</a></li> 2.3900 + <li>outline, <a href="#propdef-outline" title="section 5.1">5.1</a></li> 2.3901 + <li>outline-color, <a href="#propdef-outline-color" title="section 5.4">5.4</a></li> 2.3902 + <li>outline-offset, <a href="#propdef-outline-offset" title="section 5.5">5.5</a></li> 2.3903 + <li>outline-style, <a href="#propdef-outline-style" title="section 5.3">5.3</a></li> 2.3904 + <li>outline-width, <a href="#propdef-outline-width" title="section 5.2">5.2</a></li> 2.3905 + <li>resize, <a href="#propdef-resize" title="section 6.1">6.1</a></li> 2.3906 + <li>text-overflow, <a href="#propdef-text-overflow" title="section 6.2">6.2</a></li> 2.3907 + </ul> 2.3908 + <h2 class="no-num heading settled" id="property-index"><span class="content">Property Index</span><a class="self-link" href="#property-index"></a></h2> 2.3909 + <table class="proptable data"> 2.3910 + <thead> 2.3911 + <tr> 2.3912 + <th scope="col">Name</th> 2.3913 + <th scope="col">Value</th> 2.3914 + <th scope="col">Initial</th> 2.3915 + <th scope="col">Applies to</th> 2.3916 + <th scope="col">Inh.</th> 2.3917 + <th scope="col">%ages</th> 2.3918 + <th scope="col">Media</th> 2.3919 + <th scope="col">Animatable</th> 2.3920 + <th scope="col">Computed value</th> 2.3921 + </tr> 2.3922 + </thead> 2.3923 + <tbody> 2.3924 + <tr> 2.3925 + <th scope="row"><a class="css" data-link-type="property" href="#propdef-box-sizing">box-sizing</a></th> 2.3926 + <td>content-box | 2.3927 padding-box | 2.3928 border-box | 2.3929 -inherit<td>content-box<td>all elements that accept width or height<td>no<td>N/A<td>visual<td>no<td>specified value<td><tr><th scope=row><a class=css data-link-type=property href=#propdef-outline>outline</a><td>[ <outline-color> || <outline-style> || 2.3930 -<outline-width> ] | 2.3931 -inherit<td>see individual properties<td>all elements<td>no<td>N/A<td>visual<td>see individual properties<td>see individual properties<td><tr><th scope=row><a class=css data-link-type=property href=#propdef-outline-width>outline-width</a><td><‘border-width’> | inherit<td>medium<td>all elements<td>no<td>N/A<td>visual<td>as length<td>absolute length; 0 if the outline style is none.<td><tr><th scope=row><a class=css data-link-type=property href=#propdef-outline-style>outline-style</a><td>auto | <‘border-style’> | inherit<td>none<td>all elements<td>no<td>N/A<td>visual<td>no<td>specified value<td><tr><th scope=row><a class=css data-link-type=property href=#propdef-outline-color>outline-color</a><td><color> | invert | inherit<td>invert<td>all elements<td>no<td>N/A<td>visual<td>as color<td>The computed value for invert is invert. For <color> values, the computed value is as defined for the [CSS3COLOR] color property.<td><tr><th scope=row><a class=css data-link-type=property href=#propdef-outline-offset>outline-offset</a><td><length> | inherit<td>0<td>all elements<td>no<td>N/A<td>visual<td>as length<td><length> value in absolute units (px or physical).<td><tr><th scope=row><a class=css data-link-type=property href=#propdef-resize>resize</a><td>none | both | horizontal | vertical | inherit<td>none<td>elements with overflow other than visible<td>no<td>N/A<td>visual<td>no<td>specified value.<td><tr><th scope=row><a class=css data-link-type=property href=#propdef-text-overflow>text-overflow</a><td>( 2.3932 +inherit</td> 2.3933 + <td>content-box</td> 2.3934 + <td>all elements that accept width or height</td> 2.3935 + <td>no</td> 2.3936 + <td>N/A</td> 2.3937 + <td>visual</td> 2.3938 + <td>no</td> 2.3939 + <td>specified value</td> 2.3940 + </tr> 2.3941 + <tr> 2.3942 + <th scope="row"><a class="css" data-link-type="property" href="#propdef-outline">outline</a></th> 2.3943 + <td>[ <outline-color> || <outline-style> || 2.3944 +<outline-width> ] | 2.3945 +inherit</td> 2.3946 + <td>see individual properties</td> 2.3947 + <td>all elements</td> 2.3948 + <td>no</td> 2.3949 + <td>N/A</td> 2.3950 + <td>visual</td> 2.3951 + <td>see individual properties</td> 2.3952 + <td>see individual properties</td> 2.3953 + </tr> 2.3954 + <tr> 2.3955 + <th scope="row"><a class="css" data-link-type="property" href="#propdef-outline-width">outline-width</a></th> 2.3956 + <td><‘border-width’> | inherit</td> 2.3957 + <td>medium</td> 2.3958 + <td>all elements</td> 2.3959 + <td>no</td> 2.3960 + <td>N/A</td> 2.3961 + <td>visual</td> 2.3962 + <td>as length</td> 2.3963 + <td>absolute length; 0 if the outline style is none.</td> 2.3964 + </tr> 2.3965 + <tr> 2.3966 + <th scope="row"><a class="css" data-link-type="property" href="#propdef-outline-style">outline-style</a></th> 2.3967 + <td>auto | <‘border-style’> | inherit</td> 2.3968 + <td>none</td> 2.3969 + <td>all elements</td> 2.3970 + <td>no</td> 2.3971 + <td>N/A</td> 2.3972 + <td>visual</td> 2.3973 + <td>no</td> 2.3974 + <td>specified value</td> 2.3975 + </tr> 2.3976 + <tr> 2.3977 + <th scope="row"><a class="css" data-link-type="property" href="#propdef-outline-color">outline-color</a></th> 2.3978 + <td><color> | invert | inherit</td> 2.3979 + <td>invert</td> 2.3980 + <td>all elements</td> 2.3981 + <td>no</td> 2.3982 + <td>N/A</td> 2.3983 + <td>visual</td> 2.3984 + <td>as color</td> 2.3985 + <td>The computed value for invert is invert. For <color> values, the computed value is as defined for the [CSS3COLOR] color property.</td> 2.3986 + </tr> 2.3987 + <tr> 2.3988 + <th scope="row"><a class="css" data-link-type="property" href="#propdef-outline-offset">outline-offset</a></th> 2.3989 + <td><length> | inherit</td> 2.3990 + <td>0</td> 2.3991 + <td>all elements</td> 2.3992 + <td>no</td> 2.3993 + <td>N/A</td> 2.3994 + <td>visual</td> 2.3995 + <td>as length</td> 2.3996 + <td><length> value in absolute units (px or physical).</td> 2.3997 + </tr> 2.3998 + <tr> 2.3999 + <th scope="row"><a class="css" data-link-type="property" href="#propdef-resize">resize</a></th> 2.4000 + <td>none | both | horizontal | vertical | inherit</td> 2.4001 + <td>none</td> 2.4002 + <td>elements with overflow other than visible</td> 2.4003 + <td>no</td> 2.4004 + <td>N/A</td> 2.4005 + <td>visual</td> 2.4006 + <td>no</td> 2.4007 + <td>specified value.</td> 2.4008 + </tr> 2.4009 + <tr> 2.4010 + <th scope="row"><a class="css" data-link-type="property" href="#propdef-text-overflow">text-overflow</a></th> 2.4011 + <td>( 2.4012 clip | 2.4013 ellipsis | 2.4014 -<string> 2.4015 +<string> 2.4016 ){1,2} | 2.4017 -inherit<td>clip<td>block containers<td>no<td>N/A<td>visual<td>no<td>as specified<td><tr><th scope=row><a class=css data-link-type=property href=#propdef-cursor>cursor</a><td>[ [<uri> [<x> <y>]?,]* 2.4018 +inherit</td> 2.4019 + <td>clip</td> 2.4020 + <td>block containers</td> 2.4021 + <td>no</td> 2.4022 + <td>N/A</td> 2.4023 + <td>visual</td> 2.4024 + <td>no</td> 2.4025 + <td>as specified</td> 2.4026 + </tr> 2.4027 + <tr> 2.4028 + <th scope="row"><a class="css" data-link-type="property" href="#propdef-cursor">cursor</a></th> 2.4029 + <td>[ [<uri> [<x> <y>]?,]* 2.4030 [ auto | default | none | 2.4031 context-menu | help | pointer | progress | wait | 2.4032 cell | crosshair | text | vertical-text | 2.4033 @@ -2717,4 +3423,70 @@ 2.4034 all-scroll 2.4035 | zoom-in | zoom-out 2.4036 2.4037 -] ] | inherit<td>auto<td>all elements<td>yes<td>N/A<td>visual, interactive<td>no<td>as specified, except with any relative URLs converted to absolute<td><tr><th scope=row><a class=css data-link-type=property href=#propdef-nav-index>nav-index</a><td>auto | <number> | inherit<td>auto<td>all enabled elements<td>no<td>n/a<td>interactive<td>as number<td>specified value.<td><tr><th scope=row><a class=css data-link-type=property href=#propdef-nav-up>nav-up</a><td>auto | <id> [ current | root | <target-name> ]? | inherit<td>auto<td>all enabled elements<td>no<td>N/A<td>interactive<td>no<td>as specified<td><tr><th scope=row><a class=css data-link-type=property href=#propdef-nav-right>nav-right</a><td>auto | <id> [ current | root | <target-name> ]? | inherit<td>auto<td>all enabled elements<td>no<td>N/A<td>interactive<td>no<td>as specified<td><tr><th scope=row><a class=css data-link-type=property href=#propdef-nav-down>nav-down</a><td>auto | <id> [ current | root | <target-name> ]? | inherit<td>auto<td>all enabled elements<td>no<td>N/A<td>interactive<td>no<td>as specified<td><tr><th scope=row><a class=css data-link-type=property href=#propdef-nav-left>nav-left</a><td>auto | <id> [ current | root | <target-name> ]? | inherit<td>auto<td>all enabled elements<td>no<td>N/A<td>interactive<td>no<td>as specified<td><tr><th scope=row><a class=css data-link-type=property href=#propdef-ime-mode>ime-mode</a><td>auto | normal | active | inactive | disabled | inherit<td>auto<td>text fields<td>no<td>N/A<td>interactive<td>no<td>as specified<td></table> 2.4038 \ No newline at end of file 2.4039 +] ] | inherit</td> 2.4040 + <td>auto</td> 2.4041 + <td>all elements</td> 2.4042 + <td>yes</td> 2.4043 + <td>N/A</td> 2.4044 + <td>visual, interactive</td> 2.4045 + <td>no</td> 2.4046 + <td>as specified, except with any relative URLs converted to absolute</td> 2.4047 + </tr> 2.4048 + <tr> 2.4049 + <th scope="row"><a class="css" data-link-type="property" href="#propdef-nav-up">nav-up</a></th> 2.4050 + <td>auto | <id> [ current | root | <target-name> ]? | inherit</td> 2.4051 + <td>auto</td> 2.4052 + <td>all enabled elements</td> 2.4053 + <td>no</td> 2.4054 + <td>N/A</td> 2.4055 + <td>interactive</td> 2.4056 + <td>no</td> 2.4057 + <td>as specified</td> 2.4058 + </tr> 2.4059 + <tr> 2.4060 + <th scope="row"><a class="css" data-link-type="property" href="#propdef-nav-right">nav-right</a></th> 2.4061 + <td>auto | <id> [ current | root | <target-name> ]? | inherit</td> 2.4062 + <td>auto</td> 2.4063 + <td>all enabled elements</td> 2.4064 + <td>no</td> 2.4065 + <td>N/A</td> 2.4066 + <td>interactive</td> 2.4067 + <td>no</td> 2.4068 + <td>as specified</td> 2.4069 + </tr> 2.4070 + <tr> 2.4071 + <th scope="row"><a class="css" data-link-type="property" href="#propdef-nav-down">nav-down</a></th> 2.4072 + <td>auto | <id> [ current | root | <target-name> ]? | inherit</td> 2.4073 + <td>auto</td> 2.4074 + <td>all enabled elements</td> 2.4075 + <td>no</td> 2.4076 + <td>N/A</td> 2.4077 + <td>interactive</td> 2.4078 + <td>no</td> 2.4079 + <td>as specified</td> 2.4080 + </tr> 2.4081 + <tr> 2.4082 + <th scope="row"><a class="css" data-link-type="property" href="#propdef-nav-left">nav-left</a></th> 2.4083 + <td>auto | <id> [ current | root | <target-name> ]? | inherit</td> 2.4084 + <td>auto</td> 2.4085 + <td>all enabled elements</td> 2.4086 + <td>no</td> 2.4087 + <td>N/A</td> 2.4088 + <td>interactive</td> 2.4089 + <td>no</td> 2.4090 + <td>as specified</td> 2.4091 + </tr> 2.4092 + <tr> 2.4093 + <th scope="row"><a class="css" data-link-type="property" href="#propdef-ime-mode">ime-mode</a></th> 2.4094 + <td>auto | normal | active | inactive | disabled | inherit</td> 2.4095 + <td>auto</td> 2.4096 + <td>text fields</td> 2.4097 + <td>no</td> 2.4098 + <td>N/A</td> 2.4099 + <td>interactive</td> 2.4100 + <td>no</td> 2.4101 + <td>as specified</td> 2.4102 + </tr> 2.4103 + </tbody> 2.4104 + </table></body> 2.4105 +</html> 2.4106 \ No newline at end of file
