css3-ui/Overview.html@0df32ea51959
css3-ui/Overview.html
Thu, 07 Feb 2013 23:25:50 -0800
- author
- L. David Baron <dbaron@dbaron.org>
- date
- Thu, 07 Feb 2013 23:25:50 -0800
- changeset 7401
- 0df32ea51959
- parent 7354
- 2d69376aaded
- child 7414
- 9839b4934df4
- permissions
- -rw-r--r--
[css3-ui] Add "Animatable:" lines to propdef tables.
Note that the line for nav-index matches the current value, which may
be incorrect (number vs. integer).
Required manual adjustment for preprocessor (pre- and post-processing)
to deal with New Value(s): line for 'content' property.
The Animatable lines are as resolved in Tucson face-to-face at
2013-02-04 11:40:47 -0700, and edited by me per discussion starting at
2013-02-05 11:11:38 -0700.
1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
2 "http://www.w3.org/TR/html4/strict.dtd">
4 <html>
5 <head profile="http://dublincore.org/documents/2008/08/04/dc-html/ ">
6 <meta content="text/html; charset=utf-8" http-equiv=Content-Type>
7 <meta content="text/css" http-equiv=Content-Style-Type>
8 <meta content=en http-equiv=Content-Language>
9 <meta content="Tantek Çelik" lang=tr name=author>
10 <title>CSS Basic User Interface Module Level 3 (CSS3 UI)</title>
12 <link href="http://purl.org/dc/terms/" rel=schema.dcterms>
13 <link href="http://www.w3.org/Consortium/Legal/ipr-notice#Copyright"
14 rel=dcterms.rights>
15 <meta content="CSS Basic User Interface Module Level 3 (CSS3 UI)"
16 name=dcterms.title>
17 <meta content=text name=dcterms.type>
18 <meta content=2013-02-08 name=dcterms.issued>
19 <meta content="http://dev.w3.org/csswg/css3-ui/" name=dcterms.creator>
20 <meta content=W3C name=dcterms.publisher>
21 <meta content="http://www.w3.org/TR/2013/ED-css3-ui-20130208/"
22 name=dcterms.identifier>
23 <link href="../default.css" rel=stylesheet title=Default type="text/css">
24 <style type="text/css">
25 .subtoc ul,.subtoc ol { list-style-type: none }
26 ol.objectives { list-style: decimal }
27 ol.issues { list-style: decimal }
28 .html4ss { font-size:90%}
29 h1 {font-size:200%; clear:both}
30 h2 {font-size:170%; clear:both}
31 h3 {font-size:150%; clear:both}
32 h4 {font-size:130%}
33 h5 {font-size:120%}
34 h6 {font-size:110%}
35 h1+h2 {page-break-before: avoid}
36 h2 {page-break-before: always}
37 dd p:first-child { margin-top:0 }
39 </style>
40 <link href="http://www.w3.org/StyleSheets/TR/W3C-ED" rel=stylesheet
41 type="text/css"><!-- toggle to W3C-WD for TR publication, W3C-ED for editing -->
43 <body class=h-entry>
44 <div class=head> <a href="http://www.w3.org/"><img alt=W3C height=48
45 src="http://www.w3.org/Icons/w3c_home" width=72> </a>
46 <h1 class=p-name>CSS Basic User Interface Module Level 3 (CSS3 UI)</h1>
48 <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft <time
49 class=dt-updated datetime=20130208> 8 February 2013</time></h2>
51 <dl>
52 <dt>This version:</dt>
53 <!-- TR "This version". Update "WD" below as needed to CR/PR/REC -->
54 <!-- <dd><a href="http://www.w3.org/TR/2013/WD-css3-ui-20130208/">
55 http://www.w3.org/TR/2013/WD-css3-ui-20130208/</a>
56 </dd> -->
57 <!-- editor's draft "This version" -->
59 <dd><a class=u-url href="http://dev.w3.org/csswg/css3-ui/">
60 http://dev.w3.org/csswg/css3-ui/</a>
62 <dt>Latest version:
64 <dd><a
65 href="http://www.w3.org/TR/css3-ui/">http://www.w3.org/TR/css3-ui/</a>
67 <dt>Editor's draft:
69 <dd><a
70 href="http://dev.w3.org/csswg/css3-ui/">http://dev.w3.org/csswg/css3-ui/</a>
72 <dt>Previous version:
74 <dd><a href="http://www.w3.org/TR/2012/WD-css3-ui-20120117/"
75 rel=previous>http://www.w3.org/TR/2012/WD-css3-ui-20120117/</a>
77 <dt>Issues list:
79 <dd><a href="http://wiki.csswg.org/spec/css3-ui"
80 rel=issues>http://wiki.csswg.org/spec/css3-ui</a>
82 <dt>Discussion:
84 <dd><a
85 href="mailto:www-style@w3.org?subject=%5Bcss3-ui%5D%20feedback">www-style@w3.org</a>
86 with subject line “<kbd>[css3-ui] <var>… message topic
87 …</var></kbd>” (<a
88 href="http://lists.w3.org/Archives/Public/www-style/"
89 rel=discussion>archives</a>)
91 <dt>Editor:
93 <dd class="p-author h-card vcard"> <a class="p-name fn u-url url"
94 href="http://tantek.com" lang=tr rel=author> Tantek Çelik</a> (<a
95 class="company h-org org" href="http://www.mozilla.org/">Mozilla
96 Foundation</a>, and before at <a
97 href="http://www.microsoft.com/">Microsoft Corporation</a>) <<a
98 class="u-email email"
99 href="mailto:tantek@cs.stanford.edu">tantek@cs.stanford.edu</a>>
100 </dl>
101 <!--begin-copyright-->
102 <p class=copyright><a
103 href="http://www.w3.org/Consortium/Legal/ipr-notice#Copyright"
104 rel=license>Copyright</a> © 2013 <a href="http://www.w3.org/"><abbr
105 title="World Wide Web Consortium">W3C</abbr></a><sup>®</sup> (<a
106 href="http://www.csail.mit.edu/"><abbr
107 title="Massachusetts Institute of Technology">MIT</abbr></a>, <a
108 href="http://www.ercim.eu/"><abbr
109 title="European Research Consortium for Informatics and Mathematics">ERCIM</abbr></a>,
110 <a href="http://www.keio.ac.jp/">Keio</a>, <a
111 href="http://ev.buaa.edu.cn/">Beihang</a>), All Rights Reserved. W3C <a
112 href="http://www.w3.org/Consortium/Legal/ipr-notice#Legal_Disclaimer">liability</a>,
113 <a
114 href="http://www.w3.org/Consortium/Legal/ipr-notice#W3C_Trademarks">trademark</a>
115 and <a
116 href="http://www.w3.org/Consortium/Legal/copyright-documents">document
117 use</a> rules apply.</p>
118 <!--end-copyright-->
119 <hr title="Separator for header">
120 </div>
122 <h2 class="no-num no-toc" id=abstract>Abstract</h2>
124 <p>This section is <em>informative</em>.
126 <p>CSS (Cascading Style Sheets) is a language for describing the rendering
127 of HTML and XML documents on screen, on paper, in speech, etc. It uses
128 various selectors, properties and values to style basic user interface
129 elements in a document. <span class=p-summary> This specification
130 describes those user interface related selectors, properties and values
131 that are proposed for CSS level 3 to style HTML and XML (including XHTML
132 and XForms). It includes and extends user interface related features from
133 the selectors, properties and values of CSS level 2 revision 1 and
134 Selectors specifications. </span>
136 <h2 class="no-num no-toc" id=status style="page-break-before:auto">Status
137 of this document</h2>
138 <!--begin-status-->
140 <p>This is a public copy of the editors' draft. It is provided for
141 discussion only and may change at any moment. Its publication here does
142 not imply endorsement of its contents by W3C. Don't cite this document
143 other than as work in progress.
145 <p>The (<a
146 href="http://lists.w3.org/Archives/Public/www-style/">archived</a>) public
147 mailing list <a
148 href="mailto:www-style@w3.org?Subject=%5Bcss3-ui%5D%20PUT%20SUBJECT%20HERE">
149 www-style@w3.org</a> (see <a
150 href="http://www.w3.org/Mail/Request">instructions</a>) is preferred for
151 discussion of this specification. When sending e-mail, please put the text
152 “css3-ui” in the subject, preferably like this:
153 “[<!---->css3-ui<!---->] <em>…summary of comment…</em>”
155 <p>This document was produced by the <a href="/Style/CSS/members">CSS
156 Working Group</a> (part of the <a href="/Style/">Style Activity</a>).
158 <p>This document was produced by a group operating under the <a
159 href="/Consortium/Patent-Policy-20040205/">5 February 2004 W3C Patent
160 Policy</a>. W3C maintains a <a href="/2004/01/pp-impl/32061/status"
161 rel=disclosure>public list of any patent disclosures</a> made in
162 connection with the deliverables of the group; that page also includes
163 instructions for disclosing a patent. An individual who has actual
164 knowledge of a patent which the individual believes contains <a
165 href="/Consortium/Patent-Policy-20040205/#def-essential">Essential
166 Claim(s)</a> must disclose the information in accordance with <a
167 href="/Consortium/Patent-Policy-20040205/#sec-Disclosure">section 6 of the
168 W3C Patent Policy</a>.</p>
169 <!--end-status-->
171 <p>This specification is a <strong>Last Call Working Draft</strong>,
172 although it was previously a Candidate Recommendation. It has been
173 returned to Last Call Working Draft because this draft removes features
174 that were not implemented sufficiently to advance to Proposed
175 Recommendation, and had not been previously listed as at risk, as <a
176 href="http://www.w3.org/2005/10/Process-20051014/tr.html#cfi">required</a>
177 by the W3C Process. This draft also adds a couple of new properties and
178 values. See <a href="#changes">Appendix C. Changes</a> for further
179 details. <!-- This specification may advance directly to Proposed
180 Recommendation following the last call, depending on comments and
181 implementation reports. -->
182 All persons are encouraged to review this document and send comments to
183 the <a href="http://lists.w3.org/Archives/Public/www-style/">www-style
184 mailing list</a> as described above. The <strong>deadline for
185 comments</strong> is four weeks after the date of publication in the
186 header or 14 February 2012, whichever is sooner.
188 <h3 class="no-num no-toc" id=crec>Candidate Recommendation Exit Criteria</h3>
190 <p>For this specification to enter the Proposed Recommendation stage, the
191 following conditions shall be met:
193 <ol>
194 <li>
195 <p>There must be at least two interoperable implementations for every
196 feature. For the purposes of this criterion, we define the following
197 terms:
199 <dl>
200 <dt>feature
202 <dd>
203 <p> A section or subsection of the specification.
205 <dt>interoperable
207 <dd>
208 <p>passing the respective test cases in the test suite, or, if the
209 implementation is not a web browser, equivalent tests. Every relevant
210 test in the test suite should have an equivalent test created if such
211 a user agent (UA) is to be used to claim interoperability. In addition
212 if such a UA is to be used to claim interoperability, then there must
213 one or more additional UAs which can also pass those equivalent tests
214 in the same way for the purpose of interoperability. The equivalent
215 tests must be made publicly available for the purposes of peer review.
217 <dt>implementation
219 <dd>
220 <p>a user agent which:
222 <ol class=inline>
223 <li>implements the feature.
225 <li>is available (i.e. publicly downloadable or available through some
226 other public point of sale mechanism). This is the "show me"
227 requirement.
229 <li>is shipping (i.e. development, private or unofficial versions are
230 insufficient).
232 <li>is not experimental (i.e. is intended for a wide audience and
233 could be used on a daily basis).
234 </ol>
235 </dl>
237 <li>
238 <p>A minimum of six months of the CR period must have elapsed. This is to
239 ensure that enough time is given for any remaining major errors to be
240 caught.
242 <li>
243 <p>The CR period will be extended if implementations are slow to appear.
245 <li>
246 <p>Features that are <em>at risk</em> (see the below list) will be
247 dropped (thus reducing the list of "all" features mentioned above) if
248 two or more interoperable implementations of those features are not
249 found by the end of the CR period, or if sufficient and adequate tests
250 (by judgment of the Working Group) have not been produced for those
251 features by the end of the CR period.
252 </ol>
254 <p>A <a href="/Style/CSS/Test/">test suite</a> and a <a
255 href="/Style/css3-updates/css3-ui-implementations">report on
256 implementations</a> will be provided before the document becomes a
257 Proposed Recommendation.
259 <h3 class="no-num no-toc" id=atrisk>Features at risk</h3>
261 <p>The Working Group has identified the following features as at risk of
262 being removed from CSS Basic User Interface Module Level 3 when exiting
263 CR. Implementors are urged to implement these features, if they wish to
264 see these features remain in this specification. All other features are
265 either defined in a normative reference (e.g. CSS 2.1 <a href="#CSS21"
266 rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a> or Selectors <a
267 href="#SELECT" rel=biblioentry>[SELECT]<!--{{!SELECT}}--></a>) or are
268 believed to have two or more implementations, and thus will not be dropped
269 without returning to last call.
271 <ul><!--
272 At risk due to only one implementation, or obsolete dependency:
273 XForms is defunct on the web.
274 <li>XForms needs: :default :valid :invalid :in-range :out-of-range :required :optional :read-only :read-write ::value ::choices ::repeat-item ::repeat-index</li>
276 <li>box-sizing: padding-box - only FF supports in prefixed version</li>
278 <li>ime-mode: new - not sure about IE5+ vs FF3+ interop
279 </li>
281 <li>nav-index, nav-up, nav-down, nav-right, nav-left, properties
282 implemented for sure only by Opera, http://www.opera.com/docs/specs/presto22/#css
283 possibly obsolete: Tasman v1 internal implementation
284 possibly current: MSTV Tasman
285 required (depended on) by non-web DVB-HTML, ATSC standards
286 - unknown if any DVB-HTML or ATSC simulators
287 </li>
289 Not at risk:
290 <li>CSS2.1: :hover :active :focus</li>
291 <li>Selectors: :enabled :disabled :checked</li>
292 <li>:indeterminate implemented by FF3.6, IE9, Opera 10.6, Saf3</li>
294 <li>box-sizing implemented by IE5/Mac, Opera
295 -moz-box-sizing implemented by Mozilla
296 </li>
297 <li>outline, outline-width, outline-color, outline-style all in CSS 2.1</li>
298 <li>outline-offset property
299 implemented by Safari 1.2
300 </li>
301 <li>cursor property:
302 CSS2.1: auto | default | help | pointer | wait | crosshair | text |
303 e-resize | n-resize | ne-resize | nw-resize | s-resize | se-resize | sw-resize | w-resize
304 IE5/Mac implements: none | progress | cell
305 IE6/Windows implements: <uri> | progress | not-allowed | no-drop | vertical-text | all-scroll | col-resize | row-resize | move |
306 Mozilla implements: progress | cell(as -moz-cell) | alias(as -moz-alias) | copy(as -moz-copy) | context-menu(as -moz-context-menu) |
307 freedesktop.org copied all the cursors from the CSS3-UI LC Working Draft
308 by FredrikHoeglund - 14 Oct 2003
309 http://freedesktop.org/Standards/cursor-spec
310 </li>
311 <li>'cursor' property values: ew-resize | ns-resize | nesw-resize | nwse-resize
312 implemented by Firefox and Safari
313 </li>
314 <li>'resize' property
315 implemented by Firefox 4 and Safari
316 </li>
317 -->
319 <li>::value ::choices ::repeat-item ::repeat-index pseudo-elements
321 <li>‘<a href="#box-sizing0"><code
322 class=property>box-sizing</code></a>’ property value: padding-box
324 <li>‘<a href="#content"><code class=property>content</code></a>’
325 property value: icon
327 <li>‘<a href="#icon"><code class=property>icon</code></a>’ property
329 <li>‘<a href="#ime-mode"><code class=property>ime-mode</code></a>’
330 property
332 <li>‘<a href="#nav-index0"><code class=property>nav-index</code></a>’,
333 ‘<a href="#nav-up"><code class=property>nav-up</code></a>’, ‘<a
334 href="#nav-down"><code class=property>nav-down</code></a>’, ‘<a
335 href="#nav-right"><code class=property>nav-right</code></a>’, ‘<a
336 href="#nav-left"><code class=property>nav-left</code></a>’ properties
338 <li>‘<a href="#text-overflow0"><code
339 class=property>text-overflow</code></a>’ property value: <string>
341 <li>‘<a href="#text-overflow0"><code
342 class=property>text-overflow</code></a>’ property 2-value syntax and
343 definition.
344 </ul>
346 <h2 class="no-num no-toc" id=summary>Overview</h2>
348 <p>This section is <em>informative</em>.
350 <p>This document is one of the "modules" for the upcoming CSS3
351 specification. It not only describes the user interface related properties
352 and values that already exist in <a
353 href="http://www.w3.org/TR/REC-CSS1">CSS1</a> <a href="#CSS1"
354 rel=biblioentry>[CSS1]<!--{{CSS1}}--></a> and <a
355 href="http://www.w3.org/TR/CSS21">CSS2.1</a> <a href="#CSS21"
356 rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>, but introduces new
357 properties and values for CSS3 as well. The Working Group doesn't expect
358 that all implementations of CSS3 will implement all properties or values.
359 Instead, there will probably be a small number of variants of CSS3,
360 so-called "profiles".
362 <p>This document is the result of the merging of relevant parts of the
363 following Recommendations and Working Drafts, and the addition of some new
364 features.
366 <ul>
367 <li>Cascading Style Sheets, level 2, revision 1 <a href="#CSS21"
368 rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>
370 <li><a href="http://www.w3.org/TR/2000/WD-css3-userint-20000216">User
371 Interface for CSS3 (16 February 2000)</a> <a href="#CSSUI"
372 rel=biblioentry>[CSSUI]<!--{{CSSUI}}--></a>
373 </ul>
375 <p>This specification contains:
377 <ul>
378 <li>Pseudo-classes and pseudo-elements to style user interface states and
379 element fragments respectively.
381 <li>Additions to the user interface features in <a
382 href="http://www.w3.org/TR/CSS21">CSS2.1</a>.
384 <li>Directional focus navigation properties.
386 <li>A mechanism to allow the styling of elements as icons for
387 accessibility.
388 </ul>
390 <h2 class="no-num no-toc" id=contents>Table of contents</h2>
391 <!--begin-toc-->
393 <ul class=toc>
394 <li><a href="#intro"><span class=secno>1. </span>Introduction</a>
395 <ul class=toc>
396 <li><a href="#purpose"><span class=secno>1.1. </span>Purpose</a>
397 </ul>
399 <li><a href="#conformance"><span class=secno>2. </span>Conformance</a>
400 <ul class=toc>
401 <li><a href="#definitions"><span class=secno>2.1. </span>Definitions</a>
403 <li><a href="#classes-of-products"><span class=secno>2.2. </span>Classes
404 of products</a>
406 <li><a href="#extensions"><span class=secno>2.3. </span>Extensions</a>
407 </ul>
409 <li><a href="#dependencies-on-other-modules"><span class=secno>3.
410 </span>Dependencies on other modules</a>
412 <li><a href="#user-interface-selectors"><span class=secno>4. </span>User
413 Interface Selectors</a>
414 <ul class=toc>
415 <li><a href="#pseudo-classes"><span class=secno>4.1. </span>User
416 interface states: pseudo-classes</a>
417 <ul class=toc>
418 <li><a href="#active"><span class=secno>4.1.1. </span>:active
419 details</a>
421 <li><a href="#indeterminate"><span class=secno>4.1.2. </span> The
422 indeterminate-value pseudo-class ‘<code
423 class=css>:indeterminate</code>’</a>
425 <li><a href="#pseudo-default"><span class=secno>4.1.3.
426 </span>:default</a>
428 <li><a href="#pseudo-validity"><span class=secno>4.1.4.
429 </span><span>:valid</span> and <span>:invalid</span></a>
431 <li><a href="#pseudo-range"><span class=secno>4.1.5.
432 </span><span>:in-range</span> and <span>:out-of-range</span></a>
434 <li><a href="#pseudo-required-value"><span class=secno>4.1.6.
435 </span><span>:required</span> and <span>:optional</span></a>
437 <li><a href="#pseudo-ro-rw"><span class=secno>4.1.7.
438 </span><span>:read-only</span> and <span>:read-write</span></a>
439 </ul>
441 <li><a href="#pseudo-elements"><span class=secno>4.2. </span>User
442 interface element fragments: pseudo-elements</a>
443 <ul class=toc>
444 <li><a href="#pseudo-value"><span class=secno>4.2.1.
445 </span>::value</a>
447 <li><a href="#pseudo-choices"><span class=secno>4.2.2.
448 </span>::choices</a>
450 <li><a href="#pseudo-repeat-item"><span class=secno>4.2.3.
451 </span>::repeat-item</a>
453 <li><a href="#pseudo-repeat-index"><span class=secno>4.2.4.
454 </span>::repeat-index</a>
455 </ul>
456 </ul>
458 <li><a href="#element-icons"><span class=secno>5. </span>Element icons</a>
460 <ul class=toc>
461 <li><a href="#content-property-addition"><span class=secno>5.1.
462 </span><span class=property>‘<code
463 class=property>content</code>’</span> property addition</a>
465 <li><a href="#icon-property"><span class=secno>5.2. </span><span
466 class=property>‘<code class=property>icon</code>’</span>
467 property</a>
468 </ul>
470 <li><a href="#box-model-addition"><span class=secno>6. </span>Box Model
471 addition</a>
472 <ul class=toc>
473 <li><a href="#box-sizing"><span class=secno>6.1. </span><span
474 class=property>‘<code class=property>box-sizing</code>’</span>
475 property</a>
476 </ul>
478 <li><a href="#outline-properties"><span class=secno>7. </span>Outline
479 properties</a>
480 <ul class=toc>
481 <li><a href="#outline"><span class=secno>7.1. </span><span
482 class=property>‘<code class=property>outline</code>’</span>
483 property</a>
485 <li><a href="#outline-width"><span class=secno>7.2. </span><span
486 class=property>‘<code class=property>outline-width</code>’</span>
487 property</a>
489 <li><a href="#outline-style"><span class=secno>7.3. </span><span
490 class=property>‘<code class=property>outline-style</code>’</span>
491 property</a>
493 <li><a href="#outline-color"><span class=secno>7.4. </span><span
494 class=property>‘<code class=property>outline-color</code>’</span>
495 property</a>
497 <li><a href="#outline-offset"><span class=secno>7.5. </span><span
498 class=property>‘<code class=property>outline-offset</code>’</span>
499 property</a>
500 </ul>
502 <li><a href="#resizing-amp-overflow"><span class=secno>8. </span>Resizing
503 & Overflow</a>
504 <ul class=toc>
505 <li><a href="#resize"><span class=secno>8.1. </span><span
506 class=property>‘<code class=property>resize</code>’</span>
507 property</a>
509 <li><a href="#text-overflow"><span class=secno>8.2. </span> Overflow
510 Ellipsis: the ‘<code class=property>text-overflow</code>’
511 property</a>
512 </ul>
514 <li><a href="#pointing-devices-and-keyboards"><span class=secno>9.
515 </span>Pointing Devices and Keyboards</a>
516 <ul class=toc>
517 <li><a href="#pointer-interaction"><span class=secno>9.1. </span>Pointer
518 interaction</a>
519 <ul class=toc>
520 <li><a href="#cursor"><span class=secno>9.1.1. </span><span
521 class=property>‘<code class=property>cursor</code>’</span>
522 property</a>
523 </ul>
525 <li><a href="#keyboard"><span class=secno>9.2. </span>Keyboard
526 control</a>
527 <ul class=toc>
528 <li><a href="#nav-index"><span class=secno>9.2.1. </span>Sequential
529 navigation order: the <span class=property>‘<code
530 class=property>nav-index</code>’</span> property</a>
532 <li><a href="#nav-dir"><span class=secno>9.2.2. </span>Directional
533 focus navigation: the <span class=property>‘<code
534 class=property>nav-up</code>’</span>, <span class=property>‘<code
535 class=property>nav-right</code>’</span>, <span
536 class=property>‘<code class=property>nav-down</code>’</span>,
537 <span class=property>‘<code
538 class=property>nav-left</code>’</span> properties</a>
540 <li><a href="#input-method-editor"><span class=secno>9.2.3.
541 </span>Input method editor: the <span class=property>‘<code
542 class=property>ime-mode</code>’</span> property</a>
543 </ul>
544 </ul>
546 <li class=no-num><a href="#acknowledgments">Appendix A.
547 Acknowledgments</a>
549 <li class=no-num><a href="#references">Appendix B. Bibiliography</a>
551 <li class=no-num><a href="#changes">Appendix C. Changes</a>
552 <ul class=toc>
553 <li class=no-num><a href="#changes-list">List of substantial changes</a>
554 </ul>
556 <li class=no-num><a
557 href="#appendix-d.-default-style-sheet-addition">Appendix D. Default
558 style sheet additions for HTML</a>
560 <li class=no-num><a href="#appendix-e-test-suite">Appendix E: Test
561 Suite</a>
563 <li class=no-num><a href="#index">Index</a>
565 <li class=no-num><a href="#property-index">Property index</a>
566 </ul>
567 <!--end-toc-->
569 <hr>
571 <h2 id=intro><span class=secno>1. </span>Introduction</h2>
573 <p> CSS3 is a set of modules, divided up and profiled in order to simplify
574 the specification, and to allow implementors the flexibility of supporting
575 the particular modules appropriate for their implementations.
577 <p> This module describes selectors and CSS properties which enable authors
578 to style user interface related states, element fragments, properties and
579 values.
581 <p><a href="http://www.w3.org/TR/REC-CSS1#anchor-pseudo-classes">Section
582 2.1 of CSS1</a> <a href="#CSS1" rel=biblioentry>[CSS1]<!--{{CSS1}}--></a>
583 and <a href="http://www.w3.org/TR/CSS2/ui.html">Chapter 18 of CSS2</a> <a
584 href="#CSS2" rel=biblioentry>[CSS2]<!--{{CSS2}}--></a> introduced several
585 user interface related pseudo-classes, properties and values. <a
586 href="http://www.w3.org/TR/css3-selectors/#UIstates">Section 6.6.4 of
587 Selectors</a> <a href="#SELECT"
588 rel=biblioentry>[SELECT]<!--{{!SELECT}}--></a> also describes several
589 additional user interface related pseudo-classes (and one pseudo-element).
591 <p> This Working Draft extends them to provide the ability, through CSS, to
592 style elements based upon additional user interface states, to style
593 fragments of user interface elements, and to alter the dynamic
594 presentation of elements in ways previously only available through
595 specific HTML4/XHTML1 elements and attributes.
597 <h3 id=purpose><span class=secno>1.1. </span>Purpose</h3>
599 <p>The purpose of this specification is to achieve the following
600 objectives:
602 <ul>
603 <li>Extend the user interface features in CSS2.1.
605 <li>Provide additional CSS mechanisms to augment or replace other dynamic
606 presentation related features in HTML4/XHTML1.
608 <li>Introduce directional navigation properties to assist in the
609 construction of user interfaces which make use of a directional
610 navigation model.
612 <li>Introduce properties and values to specify icon presentations for
613 elements to enhance accessibility.
614 </ul>
616 <h2 id=conformance><span class=secno>2. </span>Conformance</h2>
618 <h3 id=definitions><span class=secno>2.1. </span>Definitions</h3>
620 <p>The key words <span class=index-def id=must title=MUST>"MUST"</span>,
621 <span class=index-def id=must-not title="MUST NOT">"MUST NOT"</span>,
622 <span class=index-def id=required title=REQUIRED>"REQUIRED"</span>, <span
623 class=index-def id=shall title=SHALL>"SHALL"</span>, <span class=index-def
624 id=shall-not title="SHALL NOT">"SHALL NOT"</span>, <span class=index-def
625 id=should title=SHOULD>"SHOULD"</span>, <span class=index-def
626 id=should-not title="SHOULD NOT">"SHOULD NOT"</span>, <span
627 class=index-def id=recommended title=RECOMMENDED>"RECOMMENDED"</span>,
628 <span class=index-def id=may title=MAY>"MAY"</span>, and <span
629 class=index-def id=optional title=OPTIONAL>"OPTIONAL"</span> in this
630 document are to be interpreted as described in RFC 2119 (see <a
631 href="#RFC2119" rel=biblioentry>[RFC2119]<!--{{!RFC2119}}--></a>).
632 However, for readability, these words do not typically appear in all
633 uppercase letters in this specification.
635 <p>Additional key words, e.g. "User agent (UA)", are <a
636 href="http://www.w3.org/TR/CSS21/conform.html#defs">defined by CSS 2.1</a>
637 (<a href="#CSS21" rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>, section
638 3.1).
640 <h3 id=classes-of-products><span class=secno>2.2. </span>Classes of
641 products</h3>
643 <p>The following classes of products (many of which overlap) should
644 consider implementing this specification:
646 <ul>
647 <li>Web browsers
649 <li>User agents that implement one or more of the following types of
650 content: HTML (<a href="#HTML401"
651 rel=biblioentry>[HTML401]<!--{{HTML401}}--></a>, <a href="#HTML5"
652 rel=biblioentry>[HTML5]<!--{{HTML5}}--></a>), XHTML (<a href="#XHTML10"
653 rel=biblioentry>[XHTML10]<!--{{XHTML10}}--></a>, <a href="#XHTML11"
654 rel=biblioentry>[XHTML11]<!--{{XHTML11}}--></a>), XForms (e.g. <a
655 href="#XFORMS11" rel=biblioentry>[XFORMS11]<!--{{XFORMS11}}--></a>), SVG
656 (e.g. <a href="#SVG10" rel=biblioentry>[SVG10]<!--{{SVG10}}--></a>, <a
657 href="#SVG11" rel=biblioentry>[SVG11]<!--{{SVG11}}--></a>) or other
658 content languages that contain forms controls or are intended for user
659 interaction
661 <li>User agents that implement one or more levels or modules of CSS (e.g.
662 <a href="#CSS1" rel=biblioentry>[CSS1]<!--{{CSS1}}--></a>, <a
663 href="#CSS21" rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>)
664 </ul>
666 <h3 id=extensions><span class=secno>2.3. </span>Extensions</h3>
668 <p>This specification does not define any explicit extension mechanisms. If
669 an implementation needs to extend the functionality of this specification,
670 it must follow any/all guidelines and requirements of extensions as
671 defined in CSS2.1, e.g. <a
672 href="http://www.w3.org/TR/CSS21/syndata.html#vendor-keywords">Vendor-specific
673 extensions</a> (<a href="#CSS21"
674 rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>, section 4.1.2.1).
676 <h2 id=dependencies-on-other-modules><span class=secno>3.
677 </span>Dependencies on other modules</h2>
679 <p> This CSS3 module depends on the following other specifications.
681 <ul>
682 <li><a href="#SELECT" rel=biblioentry>[SELECT]<!--{{!SELECT}}--></a>
684 <li><a href="#CSS3COLOR"
685 rel=biblioentry>[CSS3COLOR]<!--{{!CSS3COLOR}}--></a>
687 <li><a href="#CSS21" rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>
688 </ul>
689 <!--
690 <p>It has non-normative (informative) references to the following
691 other specifications:</p>
692 <ul>
693 </ul>
694 -->
696 <p> The following work is related to the CSS Basic User Interface Module
697 Level 3 (CSS3 Basic UI).
699 <ul>
700 <li><a href="#HTML401" rel=biblioentry>[HTML401]<!--{{HTML401}}--></a>
702 <li><a href="#HTML5" rel=biblioentry>[HTML5]<!--{{HTML5}}--></a>
704 <li><a href="#UAAG10" rel=biblioentry>[UAAG10]<!--{{UAAG10}}--></a>
706 <li><a href="#XML10" rel=biblioentry>[XML10]<!--{{XML10}}--></a>
708 <li><a href="#XHTML10" rel=biblioentry>[XHTML10]<!--{{XHTML10}}--></a>
710 <li><a href="#XHTML11" rel=biblioentry>[XHTML11]<!--{{XHTML11}}--></a>
712 <li><a href="#XFORMS11" rel=biblioentry>[XFORMS11]<!--{{XFORMS11}}--></a>
713 </ul>
715 <p>This specification does not define what is a form element.
717 <h2 id=user-interface-selectors><span class=secno>4. </span>User Interface
718 Selectors</h2>
720 <h3 id=pseudo-classes><span class=secno>4.1. </span>User interface states:
721 pseudo-classes</h3>
723 <p>The Selectors specification <a
724 href="http://www.w3.org/TR/css3-selectors/#UIstates">defines several user
725 interface selectors</a> (<a href="#SELECT"
726 rel=biblioentry>[SELECT]<!--{{!SELECT}}--></a>, sections 6.6.1 and 6.6.4)
727 which represent user interface states:
729 <ul>
730 <li id=psuedo-hover><a
731 href="http://www.w3.org/TR/css3-selectors/#useraction-pseudos">:hover</a>
733 <li id=pseudo-active><a
734 href="http://www.w3.org/TR/css3-selectors/#useraction-pseudos">:active</a>
736 <li id=pseudo-focus><a
737 href="http://www.w3.org/TR/css3-selectors/#useraction-pseudos">:focus</a>
739 <li id=pseudo-enabled><a
740 href="http://www.w3.org/TR/css3-selectors/#enableddisabled">:enabled</a>
742 <li id=pseudo-disabled><a
743 href="http://www.w3.org/TR/css3-selectors/#enableddisabled">:disabled</a>
745 <li id=pseudo-checked><a
746 href="http://www.w3.org/TR/css3-selectors/#checked">:checked</a>
748 <li id=pseudo-indeterminate><a
749 href="http://www.w3.org/TR/css3-selectors/#indeterminate">:indeterminate</a>
750 </ul>
752 <p>These pseudo-classes as defined by <a href="#SELECT"
753 rel=biblioentry>[SELECT]<!--{{!SELECT}}--></a> are included in this
754 specification by reference.
756 <p>CSS 2.1 <a href="#CSS21" rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>
757 specifies additional details for some of the selectors mentioned, above
758 and beyond Selectors.
760 <h4 id=active><span class=secno>4.1.1. </span>:active details</h4>
762 <p>In addition, on systems with more than one mouse button, :active is
763 clarified to apply only to the primary or primary activation button
764 (typically the "left" mouse button), and any aliases thereof.
766 <h4 id=indeterminate><span class=secno>4.1.2. </span> The
767 indeterminate-value pseudo-class ‘<code
768 class=css>:indeterminate</code>’</h4>
770 <p>The <code>:indeterminate</code> pseudo-class applies to UI elements
771 whose value is in an indeterminate state. For example, radio and checkbox
772 elements can be toggled between checked and unchecked states, but are
773 sometimes in an indeterminate state, neither checked nor unchecked.
774 Similarly a progress meter can be in an indeterminate state when the
775 percent completion is unknown.
777 <p>Like the <code>:checked</code> pseudo-class, <code>:indeterminate</code>
778 applies to all media. Components of a radio-group initialized with no
779 pre-selected choice, for example, would be <code>:indeterminate</code>
780 even in a static display.
782 <h4 class="no-num no-toc" id=new-user-interface-state-pseudo-classes>New
783 user interface state pseudo-classes</h4>
785 <p>In addition to the above-mentioned pseudo-classes, this specification
786 introduces several new pseudo-classes to define additional user interface
787 states.
789 <ul>
790 <li>:default
792 <li>:valid
794 <li>:invalid
796 <li>:in-range
798 <li>:out-of-range
800 <li>:required
802 <li>:optional
804 <li>:read-only
806 <li>:read-write
807 </ul>
809 <p>Specifically, these new states (except for :default) are provided as a
810 way to style elements which are in the respective states as defined by
811 XForms <a href="#XFORMS11"
812 rel=biblioentry>[XFORMS11]<!--{{XFORMS11}}--></a>.
814 <h4 id=pseudo-default><span class=secno>4.1.3. </span>:default</h4>
816 <p>The :default selector applies to the one or more UI elements that are
817 the default among a set of similar elements. This selector typically
818 applies to context menu items, buttons, and select lists/menus.
820 <p> One example is the default submit button among a set of buttons.
821 Another example is the default option from a popup menu. Multiple elements
822 in a select-many group could have multiple :default elements, like a
823 selection of pizza toppings for example.
825 <h4 id=pseudo-validity><span class=secno>4.1.4. </span><span
826 id=pseudo-valid>:valid</span> and <span id=pseudo-invalid>:invalid</span></h4>
828 <p>An element is :valid or :invalid when it is, respectively, valid or
829 invalid with respect to data validity semantics defined by a different
830 specification (e.g. <a href="#XFORMS11"
831 rel=biblioentry>[XFORMS11]<!--{{XFORMS11}}--></a>). An element which lacks
832 data validity semantics is neither :valid nor :invalid. This is different
833 from an element which otherwise has no constraints. Such an element would
834 always be :valid.
836 <h4 id=pseudo-range><span class=secno>4.1.5. </span><span
837 id=pseudo-in-range>:in-range</span> and <span
838 id=pseudo-out-of-range>:out-of-range</span></h4>
840 <p> The :in-range and :out-of-range pseudo-classes apply only to elements
841 that have range limitations. An element is :in-range or :out-of-range when
842 the value that the element is bound to is in range or out of range of the
843 presentation (e.g. visual or spoken representation) of the element
844 respectively. An element that lacks data range limits or is not a form
845 control is neither :in-range nor :out-of-range. E.g. a slider element with
846 a value of 11 presented as a slider control that only represents the
847 values from 1-10 is :out-of-range. Another example is a menu element with
848 a value of "E" that happens to be presented as a popup menu that only has
849 choices "A", "B" and "C".
851 <h4 id=pseudo-required-value><span class=secno>4.1.6. </span><span
852 id=pseudo-required>:required</span> and <span
853 id=pseudo-optional>:optional</span></h4>
855 <p>A form element is :required or :optional if a value for it is,
856 respectively, required or optional before the form it belongs to is
857 submitted. Elements that are not form elements are neither required nor
858 optional.
860 <h4 id=pseudo-ro-rw><span class=secno>4.1.7. </span><span
861 id=pseudo-read-only>:read-only</span> and <span
862 id=pseudo-read-write>:read-write</span></h4>
864 <p>An element whose contents are not user-alterable is :read-only. However,
865 elements whose contents are user-alterable (such as text input fields) are
866 considered to be in a :read-write state. In typical documents, most
867 elements are :read-only. However it may be possible (e.g. in the context
868 of an editor) for any element to become :read-write.
870 <h3 id=pseudo-elements><span class=secno>4.2. </span>User interface element
871 fragments: pseudo-elements</h3>
873 <p> In addition to the above-mentioned pseudo-element, this specification
874 introduces four new pseudo-elements to provide access to additional user
875 interface element fragments.
877 <ul>
878 <li>::value
880 <li>::choices
882 <li>::repeat-item
884 <li>::repeat-index
885 </ul>
887 <p>Specifically, these new pseudo-elements are provided as a way to style
888 user interface fragments as defined by XForms <a href="#XFORMS11"
889 rel=biblioentry>[XFORMS11]<!--{{XFORMS11}}--></a>.
891 <p class=note> Note: The ::value, ::choices, ::repeat-item, and
892 ::repeat-index pseudo-elements are all at risk.
894 <h4 id=pseudo-value><span class=secno>4.2.1. </span>::value</h4>
896 <p>A form element may contain both a label for its data value, and the data
897 value itself. For such elements, the ::value pseudo-element selects the
898 representation of just the data value itself, in order to style its
899 appearance.
901 <div class=example>
902 <p style="display:none">Example(s):
904 <h4 class="no-num no-toc" id=fictional-markup-and-illustration>fictional
905 markup and illustration</h4>
907 <p> Here is an example which illustrates the ::value of a text input field
908 with fictional markup which is then styled with CSS.
910 <h5 class="no-num no-toc"
911 id=sample-xforms-fragment-with-fictional-ma>sample XForms fragment with
912 fictional markup:</h5>
914 <pre><code>
915 <input>
916 <label>Zip code<label>
917 <em><input::value/></em>
918 </input>
919 </code></pre>
921 <h5 class="no-num no-toc" id=sample-css>sample CSS:</h5>
923 <pre><code class=css>
924 input { border:dashed }
925 label { border:dotted }
926 input::value { border:solid }
927 </code></pre>
929 <h5 class="no-num no-toc" id=an-htmlcss-approximation-of-this-example>an
930 HTML+CSS approximation of this example</h5>
932 <p> <span style="border:dashed;display:inline-block;padding:10px"> <label
933 style="border:dotted;display:inline-block;padding:2px;margin:0;font-size:1em">Zip
934 code</label> <input
935 style="border:solid;display:inline-block;padding:2px;margin:0;font-size:1em"
936 type=text value=94117> </span>
938 <p>Spacing (in the form of padding) has been added to the above
939 approximation to separate the borders and make the individual
940 (pseudo-)elements easier to distinguish.
941 </div>
943 <p>The ::value pseudo-element is similar to an inline-level element, but
944 with certain restrictions. The following properties apply to
945 <code>::value</code> pseudo-element: font properties, color property,
946 background properties, ‘<code class=property>word-spacing</code>’,
947 ‘<code class=property>letter-spacing</code>’, ‘<code
948 class=property>text-decoration</code>’, ‘<code
949 class=property>vertical-align</code>’, ‘<code
950 class=property>text-transform</code>’, ‘<code
951 class=property>line-height</code>’. UAs may apply other properties as
952 well.
954 <h4 id=pseudo-choices><span class=secno>4.2.2. </span>::choices</h4>
956 <p>Similarly, a form element which represents a list of options may contain
957 both a label for the list, and the list of choices itself. For such
958 elements, the ::choices pseudo-element selects the representation of just
959 the list of choices themselves, in order to style their appearance.
961 <p>A list of radio buttons can also be selected with the ::choices
962 pseudo-element, and the currently chosen radio button can be selected with
963 the ::value pseudo-element.
965 <h4 id=pseudo-repeat-item><span class=secno>4.2.3. </span>::repeat-item</h4>
967 <p> The ::repeat-item pseudo-element represents a single item from a
968 repeating sequence. It is generated as a parent to all the elements in a
969 single repeating item. Each ::repeat-item is associated with a particular
970 instance data node, and is affected by the model item properties (e.g.
971 ‘<code class=css><code>relevant</code></code>’) found there, as the
972 related style properties will cascade to the child elements.
974 <h4 id=pseudo-repeat-index><span class=secno>4.2.4. </span>::repeat-index</h4>
976 <p> The ::repeat-index pseudo-element represents the current item of a
977 repeating sequence. It takes the place of the ::repeat-item as a parent of
978 all the elements in the index repeating item.
980 <div class=note>
981 <p> <em><strong>Note.</strong> Any style declarations that an author wants
982 to apply to all repeat items, including the index, must be done so by
983 using both ::repeat-item and ::repeat-index selectors. Styles that are
984 only applied to ::repeat-item will not automatically be applied to the
985 respective ::repeat-index. </em>
986 </div>
988 <div class=example>
989 <p style="display:none">Example(s):
991 <h4 class="no-num no-toc"
992 id=repeat-item-and-repeat-index-fictional-m>::repeat-item and
993 ::repeat-index fictional markup</h4>
995 <p> Here is an example that illustrates both ::repeat-item and
996 ::repeat-index, since they are often both available and used at the same
997 time. Assume appropriate namespace declarations were made in a header
998 somewhere preceding the code in the example.
1000 <p>The following markup snippet uses XHTML and XForms:
1002 <pre><code lang=x-xhtml>
1003 <html:table xforms:repeat-nodeset="...">
1004 <html:tr>
1005 <html:td><xforms:input ref="..."/><xforms:input ref="..."/></html:td>
1006 </html:tr>
1007 </html:table>
1008 </code></pre>
1010 <p> The following style rules are used to style all the repeated items and
1011 the current repeated item.
1013 <pre><code class=css lang=x-css>
1014 html|tr::repeat-item { outline: medium solid; color:gray }
1015 html|tr::repeat-index { outline: medium dashed; color:black }
1016 </code></pre>
1018 <p> The following fictional markup shows the state of the above markup
1019 when through user interaction the XForm contains three of the repeated
1020 items, where the third item is current.
1022 <pre><code lang=x-xhtml>
1023 <html:table xforms:repeat-nodeset="...">
1024 <em><html:tr::repeat-item></em>
1025 <html:tr>
1026 <html:td><xforms:input ref="..."/><xforms:input ref="..."/></html:td>
1027 </html:tr>
1028 <em></html:tr::repeat-item></em>
1029 <em><html:tr::repeat-item></em>
1030 <html:tr>
1031 <html:td><xforms:input ref="..."/><xforms:input ref="..."/></html:td>
1032 </html:tr>
1033 <em></html:tr::repeat-item></em>
1034 <em><html:tr::repeat-index></em>
1035 <html:tr>
1036 <html:td><xforms:input ref="..."/><xforms:input ref="..."/></html:td>
1037 </html:tr>
1038 <em></html:tr::repeat-index></em>
1039 </html:table>
1040 </code></pre>
1041 </div>
1043 <div class=note>
1044 <p> <em><strong>Note.</strong> The ::repeat-index pseudo-element takes the
1045 place of the ::repeat-item rather than being nested inside as a separate
1046 element. Thus just like :link or :visited are mutually exclusive for
1047 selecting hyperlinks, only one will exist and apply to a particular
1048 repeated item at any point.</em>
1049 </div>
1051 <h2 id=element-icons><span class=secno>5. </span>Element icons</h2>
1053 <h3 id=content-property-addition><span class=secno>5.1. </span><a
1054 class=property href="#content">‘<code
1055 class=property>content</code>’</a> property addition</h3>
1057 <table class=propdef>
1058 <tbody>
1059 <tr>
1060 <th>Name:
1062 <td><dfn id=content>content</dfn>
1064 <tr>
1065 <th>New Value(s):
1067 <td title="">icon
1069 <tr>
1070 <th>Initial:
1072 <td>same as CSS 2.1
1074 <tr>
1075 <th>Applies to:
1077 <td>same as CSS 2.1
1079 <tr>
1080 <th>Inherited:
1082 <td>same as CSS 2.1
1084 <tr>
1085 <th>Percentages:
1087 <td>same as CSS 2.1
1089 <tr>
1090 <th>Media:
1092 <td>same as CSS 2.1
1094 <tr>
1095 <th>Computed value:
1097 <td>the keyword ‘<a href="#icon"><code class=css><span class=value
1098 title="">icon</span></code></a>’ if specified as such, otherwise same
1099 as CSS 2.1
1101 <tr>
1102 <th>Animatable:
1104 <td>no
1105 </table>
1107 <dl>
1108 <dt>icon
1110 <dd>The (pseudo-)element is replaced in its entirety by the resource
1111 referenced by its <a class=property href="#icon">‘<code
1112 class=property>icon</code>’</a> property, and treated as a replaced
1113 element.
1114 </dl>
1116 <p class=note><em><strong>Note.</strong> It is expected that the next draft
1117 of the CSS3 Generated Content module <a href="#CSS3GENCON"
1118 rel=biblioentry>[CSS3GENCON]<!--{{CSS3GENCON}}--></a> will include and
1119 superset this functionality. </em>
1121 <p class=note> Note: The ‘<a href="#icon"><code
1122 class=property>icon</code></a>’ value is at risk.
1124 <h3 id=icon-property><span class=secno>5.2. </span><a class=property
1125 href="#icon">‘<code class=property>icon</code>’</a> property</h3>
1127 <table class=propdef>
1128 <tbody>
1129 <tr>
1130 <th>Name:
1132 <td><dfn id=icon>icon</dfn>
1134 <tr>
1135 <th>Value:
1137 <td>auto | <uri> [, <uri>]* | inherit
1139 <tr>
1140 <th>Initial:
1142 <td>auto
1144 <tr>
1145 <th>Applies to:
1147 <td>all elements
1149 <tr>
1150 <th>Inherited:
1152 <td>no
1154 <tr>
1155 <th>Percentages:
1157 <td>N/A
1159 <tr>
1160 <th>Media:
1162 <td>all
1164 <tr>
1165 <th>Computed value:
1167 <td>as specified, except with any relative URLs converted to absolute
1169 <tr>
1170 <th>Animatable:
1172 <td>no
1173 </table>
1175 <dl>
1176 <dt>auto
1178 <dd>Use a default generic icon provided by the user agent.
1180 <dt><uri>
1182 <dd>URIs (see <a href="#URI" rel=biblioentry>[URI]<!--{{!URI}}--></a>, <a
1183 href="#RFC1738" rel=biblioentry>[RFC1738]<!--{{!RFC1738}}--></a> and <a
1184 href="#RFC1808" rel=biblioentry>[RFC1808]<!--{{!RFC1808}}--></a>) provide
1185 a way of identifying resources. The <uri> value(s) in this property
1186 refer to one or more icons in a comma delimited list. The user agent
1187 loads the referenced icons one by one until it finds one that it is able
1188 to render. This permits the usage of multiple different icon formats for
1189 various platforms, and various media for that matter.
1190 </dl>
1192 <p>The <a class=property href="#icon">‘<code
1193 class=property>icon</code>’</a> property provides the author the ability
1194 to style any arbitrary element with an iconic equivalent. An element's
1195 icon is not used/rendered unless the <a class=property
1196 href="#content">‘<code class=property>content</code>’</a> property is
1197 set to the value ‘<a href="#icon"><code class=css><span class=value
1198 title="">icon</span></code></a>’ (see above). Documents whose elements
1199 have icons assigned to them can be more easily viewed by users who find
1200 too much text distracting.
1202 <div class=example>
1203 <p style="display:none">Example(s):
1205 <h4 class="no-num no-toc" id=representing-elements-with-icons>Representing
1206 elements with icons</h4>
1208 <p>This example uses the above icon features to display icons in place of
1209 images and objects.
1211 <pre><code class=css>
1212 img,object { content:icon }
1213 /* note that the CSS3 Generated Content module <a
1214 href="#CSS3GENCON" rel=biblioentry>[CSS3GENCON]<!--{{CSS3GENCON}}--></a>
1215 expands the <a
1216 class=property
1217 href="#content">'content'</a> property to apply to all elements. */
1219 img { icon:url(imgicon.png); }
1220 /* provide a custom icon for images */
1222 object { icon:url(objicon.png); }
1223 /* provide a different custom icon for objects */
1224 </code></pre>
1225 </div>
1227 <p class=note> Note: The ‘<a href="#icon"><code
1228 class=property>icon</code></a>’ property is at risk.
1230 <h2 id=box-model-addition><span class=secno>6. </span>Box Model addition</h2>
1232 <h3 id=box-sizing><span class=secno>6.1. </span><a class=property
1233 href="#box-sizing0">‘<code class=property>box-sizing</code>’</a>
1234 property</h3>
1236 <table class=propdef>
1237 <tbody>
1238 <tr>
1239 <th>Name:
1241 <td><dfn id=box-sizing0>box-sizing</dfn>
1243 <tr>
1244 <th>Value:
1246 <td> content-box | padding-box | border-box | inherit
1248 <tr>
1249 <th>Initial:
1251 <td>content-box
1253 <tr>
1254 <th>Applies to:
1256 <td>all elements that accept width or height
1258 <tr>
1259 <th>Inherited:
1261 <td>no
1263 <tr>
1264 <th>Percentages:
1266 <td>N/A
1268 <tr>
1269 <th>Media:
1271 <td>visual
1273 <tr>
1274 <th>Computed value:
1276 <td>specified value
1278 <tr>
1279 <th>Animatable:
1281 <td>no
1282 </table>
1284 <dl>
1285 <dt>content-box
1287 <dd>This is the behavior of width and height as specified by CSS2.1. The
1288 specified width and height (and respective min/max properties) apply to
1289 the width and height respectively of the content box of the element. The
1290 padding and border of the element are laid out and drawn outside the
1291 specified width and height.
1293 <dt>padding-box
1295 <dd> The specified width and height (and respective min/max properties) on
1296 this element determine the padding box of the element. That is, any
1297 padding specified on the element is laid out and drawn inside this
1298 specified width and height. The content width and height are calculated
1299 by subtracting the padding widths of the respective sides from the
1300 specified <span class=property>‘<code
1301 class=property>width</code>’</span> and <span class=property>‘<code
1302 class=property>height</code>’</span> properties. As the content width
1303 and height <a
1304 href="http://www.w3.org/TR/CSS21/visudet.html#the-width-property"> cannot
1305 be negative</a> (<a href="#CSS21"
1306 rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>, section 10.2), this
1307 computation is floored at 0.
1309 <dt>border-box
1311 <dd>The specified width and height (and respective min/max properties) on
1312 this element determine the border box of the element. That is, any
1313 padding or border specified on the element is laid out and drawn inside
1314 this specified width and height. The content width and height are
1315 calculated by subtracting the border and padding widths of the respective
1316 sides from the specified <span class=property>‘<code
1317 class=property>width</code>’</span> and <span class=property>‘<code
1318 class=property>height</code>’</span> properties. As the content width
1319 and height <a
1320 href="http://www.w3.org/TR/CSS21/visudet.html#the-width-property">cannot
1321 be negative</a> (<a href="#CSS21"
1322 rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>, section 10.2), this
1323 computation is floored at 0.
1324 <p class=note><em><strong>Note.</strong> This is the behavior of width
1325 and height as commonly implemented by legacy HTML user agents for
1326 replaced elements and input elements.</em>
1327 </dl>
1329 <div class=example>
1330 <p style="display:none">Example(s):
1332 <h4 class="no-num no-toc" id=using-box-sizing-to-evenly-share-space>Using
1333 box-sizing to evenly share space</h4>
1335 <p>This example uses box-sizing to evenly horizontally split two divs with
1336 fixed size borders inside a div container, which would otherwise require
1337 additional markup.
1339 <h5 class="no-num no-toc" id=sample-css0>sample CSS:</h5>
1341 <pre><code class=css>
1342 div.container {
1343 width:38em;
1344 border:1em solid black;
1345 }
1347 div.split {
1348 box-sizing:border-box;
1349 width:50%;
1350 border:1em silver ridge;
1351 float:left;
1352 }
1353 </code></pre>
1355 <h5 class="no-num no-toc" id=sample-html-fragment>sample HTML fragment:</h5>
1357 <pre><code>
1358 <div class="container">
1359 <div class="split">This div occupies the left half.</div>
1360 <div class="split">This div occupies the right half.</div>
1361 </div>
1362 </code></pre>
1364 <h5 class="no-num no-toc"
1365 id=demonstration-of-sample-css-and-html>demonstration of sample CSS and
1366 HTML:</h5>
1368 <div style="width:38em; border:1em solid black">
1369 <div
1370 style="box-sizing:border-box; width:50%; border:1em silver ridge; float:left">This
1371 div should occupy the left half.</div>
1373 <div
1374 style="box-sizing:border-box; width:50%; border:1em silver ridge; float:left">This
1375 div should occupy the right half.</div>
1376 The two divs above should appear side by side, each (including borders)
1377 50% of the content width of their container. If instead they are stacked
1378 one on top of the other then your browser does not support <a
1379 class=property href="#box-sizing0">‘<code
1380 class=property>box-sizing</code>’</a>.</div>
1381 </div>
1383 <p class=note> Note: The ‘<code class=property>padding-box</code>’
1384 value is at risk.
1386 <h2 id=outline-properties><span class=secno>7. </span>Outline properties</h2>
1388 <p>At times, style sheet authors may want to create outlines around visual
1389 objects such as buttons, active form fields, image maps, etc., to make
1390 them stand out. Outlines differ from borders in the following ways:
1392 <ol>
1393 <li>Outlines do not take up space.
1395 <li>Outlines may be non-rectangular.
1396 </ol>
1398 <p>The outline properties control the style of these dynamic outlines.
1400 <h3 id=outline><span class=secno>7.1. </span><a class=property
1401 href="#outline0">‘<code class=property>outline</code>’</a> property</h3>
1403 <table class=propdef id=propdef-outline>
1404 <tbody>
1405 <tr>
1406 <th>Name:
1408 <td><dfn id=outline0>outline</dfn>
1410 <tr>
1411 <th>Value:
1413 <td> [ <span class=property><‘<a href="#outline-color0"><code
1414 class=property>outline-color</code></a>’></span> || <span
1415 class=property><‘<a href="#outline-style0"><code
1416 class=property>outline-style</code></a>’></span> || <span
1417 class=property><‘<a href="#outline-width0"><code
1418 class=property>outline-width</code></a>’></span> ] | inherit
1420 <tr>
1421 <th>Initial:
1423 <td>see individual properties
1425 <tr>
1426 <th>Applies to:
1428 <td>all elements
1430 <tr>
1431 <th>Inherited:
1433 <td>no
1435 <tr>
1436 <th>Percentages:
1438 <td>N/A
1440 <tr>
1441 <th>Media:
1443 <td>visual
1445 <tr>
1446 <th>Computed value:
1448 <td>see individual properties
1450 <tr>
1451 <th>Animatable:
1453 <td>see individual properties
1454 </table>
1456 <h3 id=outline-width><span class=secno>7.2. </span><a class=property
1457 href="#outline-width0">‘<code class=property>outline-width</code>’</a>
1458 property</h3>
1460 <table class=propdef id=propdef-outline-width>
1461 <tbody>
1462 <tr>
1463 <th>Name:
1465 <td><dfn id=outline-width0>outline-width</dfn>
1467 <tr>
1468 <th>Value:
1470 <td><a class=noxref
1471 href="http://www.w3.org/TR/CSS21/box.html#value-def-border-width"><span
1472 class=value-inst-border-width><border-width></span></a> | inherit
1474 <tr>
1475 <th>Initial:
1477 <td>medium
1479 <tr>
1480 <th>Applies to:
1482 <td>all elements
1484 <tr>
1485 <th>Inherited:
1487 <td>no
1489 <tr>
1490 <th>Percentages:
1492 <td>N/A
1494 <tr>
1495 <th>Media:
1497 <td>visual
1499 <tr>
1500 <th>Computed value:
1502 <td>absolute length; ‘<code class=css>0</code>’ if the outline style
1503 is ‘<code class=property>none</code>’.
1505 <tr>
1506 <th>Animatable:
1508 <td>as <a
1509 href="http://dev.w3.org/csswg/css3-transitions/#animtype-length">length</a>
1510 </table>
1512 <h3 id=outline-style><span class=secno>7.3. </span><a class=property
1513 href="#outline-style0">‘<code class=property>outline-style</code>’</a>
1514 property</h3>
1516 <table class=propdef id=propdef-outline-style>
1517 <tbody>
1518 <tr>
1519 <th>Name:
1521 <td><dfn id=outline-style0>outline-style</dfn>
1523 <tr>
1524 <th>Value:
1526 <td>auto | <a class=noxref
1527 href="http://www.w3.org/TR/CSS21/box.html#value-def-border-style"><span
1528 class=value-inst-border-style><border-style></span></a> | inherit
1530 <tr>
1531 <th>Initial:
1533 <td>none
1535 <tr>
1536 <th>Applies to:
1538 <td>all elements
1540 <tr>
1541 <th>Inherited:
1543 <td>no
1545 <tr>
1546 <th>Percentages:
1548 <td>N/A
1550 <tr>
1551 <th>Media:
1553 <td>visual
1555 <tr>
1556 <th>Computed value:
1558 <td>specified value
1560 <tr>
1561 <th>Animatable:
1563 <td>no
1564 </table>
1566 <h3 id=outline-color><span class=secno>7.4. </span><a class=property
1567 href="#outline-color0">‘<code class=property>outline-color</code>’</a>
1568 property</h3>
1570 <table class=propdef id=propdef-outline-color>
1571 <tbody>
1572 <tr>
1573 <th>Name:
1575 <td><dfn id=outline-color0>outline-color</dfn>
1577 <tr>
1578 <th>Value:
1580 <td><a class=noxref
1581 href="http://www.w3.org/TR/css3-color/#colorunits"><span
1582 class=value-inst-color><color></span></a> | invert | inherit
1584 <tr>
1585 <th>Initial:
1587 <td>invert
1589 <tr>
1590 <th>Applies to:
1592 <td>all elements
1594 <tr>
1595 <th>Inherited:
1597 <td>no
1599 <tr>
1600 <th>Percentages:
1602 <td>N/A
1604 <tr>
1605 <th>Media:
1607 <td>visual
1609 <tr>
1610 <th>Computed value:
1612 <td>The computed value for ‘<a href="#invert"><code class=css><span
1613 class=value>invert</span></code></a>’ is ‘<a href="#invert"><code
1614 class=css><span class=value>invert</span></code></a>’. For
1615 <color> values, the computed value is as defined for the <a
1616 href="#CSS3COLOR" rel=biblioentry>[CSS3COLOR]<!--{{!CSS3COLOR}}--></a>
1617 <span class=property>‘<code class=property>color</code>’</span>
1618 property.
1620 <tr>
1621 <th>Animatable:
1623 <td>as <a
1624 href="http://dev.w3.org/csswg/css3-transitions/#animtype-color">color</a>
1625 </table>
1627 <p>The outline created with the outline properties is drawn "over" a box,
1628 i.e., the outline is always on top, and doesn't influence the position or
1629 size of the box, or of any other boxes. Therefore, displaying or
1630 suppressing outlines does not cause reflow.
1632 <p>Outlines may be non-rectangular. For example, if the element is broken
1633 across several lines, the outline should be an outline or minimum set of
1634 outlines that encloses all the element's boxes. Each part of the outline
1635 should be fully connected rather than open on some sides (as borders on
1636 inline elements are when lines are broken). The parts of the outline are
1637 not required to be rectangular. The position of the outline may be
1638 affected by descendant boxes. User agents should use an algorithm for
1639 determining the outline that encloses a region appropriate for conveying
1640 the concept of focus to the user.
1642 <p>The <a class=property href="#outline-width0">‘<code
1643 class=property>outline-width</code>’</a> property accepts the same
1644 values as <a class=noxref
1645 href="http://www.w3.org/TR/CSS21/box.html#propdef-border-width"><span
1646 class=propinst-border-width>‘<code
1647 class=property>border-width</code>’</span></a> (<a href="#CSS21"
1648 rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>, section 8.5.1).
1650 <p>The <a class=property href="#outline-style0">‘<code
1651 class=property>outline-style</code>’</a> property accepts the same
1652 values as <a class=noxref
1653 href="http://www.w3.org/TR/CSS21/box.html#propdef-border-style"><span
1654 class=propinst-border-style>‘<code
1655 class=property>border-style</code>’</span></a> (<a href="#CSS21"
1656 rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>, section 8.5.3), except that
1657 ‘<code class=css><span class=value>hidden</span></code>’ is not a
1658 legal outline style. In addition, in CSS3, <a class=property
1659 href="#outline-style0">‘<code class=property>outline-style</code>’</a>
1660 accepts the value ‘<code class=css><span
1661 class=value>auto</span></code>’. The ‘<code class=css><span
1662 class=value>auto</span></code>’ value permits the user agent to render a
1663 custom outline style, typically a style which is either a user interface
1664 default for the platform, or perhaps a style that is richer than can be
1665 described in detail in CSS, e.g. a rounded edge outline with
1666 semi-translucent outer pixels that appears to glow. As such, this
1667 specification does not define how the <a class=property
1668 href="#outline-color0">‘<code class=property>outline-color</code>’</a>
1669 is incorporated or used (if at all) when rendering ‘<code
1670 class=css><span class=value>auto</span></code>’ style outlines. User
1671 agents may treat ‘<code class=css><span
1672 class=value>auto</span></code>’ as ‘<code class=css><span
1673 class=value>solid</span></code>’.
1675 <p>The <a class=property href="#outline-color0">‘<code
1676 class=property>outline-color</code>’</a> property accepts all colors, as
1677 well as the keyword ‘<code class=css><dfn
1678 id=invert>invert</dfn></code>’. ‘<a href="#invert"><code
1679 class=property>Invert</code></a>’ is expected to perform a color
1680 inversion on the pixels on the screen. This is a common trick to ensure
1681 the focus border is visible, regardless of color background.
1683 <p> Conformant UAs may ignore the ‘<a href="#invert"><code
1684 class=css><span class=value>invert</span></code></a>’ value on platforms
1685 that do not support color inversion of the pixels on the screen. If the UA
1686 does not support the ‘<a href="#invert"><code class=css><span
1687 class=value>invert</span></code></a>’ value then the initial value of
1688 the <a class=property href="#outline-color0">‘<code
1689 class=property>outline-color</code>’</a> property is the ‘<code
1690 class=css><span class=value>currentColor</span></code>’ <a
1691 href="#CSS3COLOR" rel=biblioentry>[CSS3COLOR]<!--{{!CSS3COLOR}}--></a>
1692 keyword.
1694 <p>The <a class=property href="#outline0">‘<code
1695 class=property>outline</code>’</a> property is a shorthand property, and
1696 sets all three of <a class=property href="#outline-style0">‘<code
1697 class=property>outline-style</code>’</a>, <a class=property
1698 href="#outline-width0">‘<code
1699 class=property>outline-width</code>’</a>, and <a class=property
1700 href="#outline-color0">‘<code
1701 class=property>outline-color</code>’</a>.
1703 <p class=note><em><strong>Note.</strong> The outline is the same on all
1704 sides. In contrast to borders, there are no ‘<code
1705 class=property>outline-top</code>’ or ‘<code
1706 class=property>outline-left</code>’ etc. properties.</em>
1708 <p> This specification does not define how multiple overlapping outlines
1709 are drawn, or how outlines are drawn for boxes that are partially obscured
1710 behind other elements.
1712 <div class=example>
1713 <p style="display:none">Example(s):
1715 <p> Here's an example of drawing a thick outline around a BUTTON element:
1717 <pre><code class=css>
1718 button { outline: thick solid }
1719 </code></pre>
1720 </div>
1722 <p>Graphical user interfaces may use outlines around elements to tell the
1723 user which element on the page has the focus. These outlines are in
1724 addition to any borders, and switching outlines on and off should not
1725 cause the document to reflow. The focus is the subject of user interaction
1726 in a document (e.g., for entering text, selecting a button, etc.).
1728 <div class=example>
1729 <p style="display:none">Example(s):
1731 <p>For example, to draw a thick black line around an element when it has
1732 the focus, and a thick red line when it is active, the following rules
1733 can be used:
1735 <pre><code class=css>
1736 :focus { outline: thick solid black }
1737 :active { outline: thick solid red }
1738 </code></pre>
1739 </div>
1741 <div class=note>
1742 <p> <em><strong>Note.</strong> Since the outline does not affect
1743 formatting (i.e., no space is left for it in the box model), it may well
1744 overlap other elements on the page. </em>
1745 </div>
1747 <h3 id=outline-offset><span class=secno>7.5. </span><a class=property
1748 href="#outline-offset0">‘<code
1749 class=property>outline-offset</code>’</a> property</h3>
1751 <p>By default, the outline is drawn starting just outside the border edge.
1752 However, it is possible to offset the outline and draw it beyond the
1753 border edge.
1755 <table class=propdef id=propdef-outline-offset>
1756 <tbody>
1757 <tr>
1758 <th>Name:
1760 <td><dfn id=outline-offset0>outline-offset</dfn>
1762 <tr>
1763 <th>Value:
1765 <td><length> | inherit
1767 <tr>
1768 <th>Initial:
1770 <td>0
1772 <tr>
1773 <th>Applies to:
1775 <td>all elements
1777 <tr>
1778 <th>Inherited:
1780 <td>no
1782 <tr>
1783 <th>Percentages:
1785 <td>N/A
1787 <tr>
1788 <th>Media:
1790 <td>visual
1792 <tr>
1793 <th>Computed value:
1795 <td><length> value in absolute units (px or physical).
1797 <tr>
1798 <th>Animatable:
1800 <td>as <a
1801 href="http://dev.w3.org/csswg/css3-transitions/#animtype-length">length</a>
1802 </table>
1804 <p>If the computed value of <a class=property
1805 href="#outline-offset0">‘<code
1806 class=property>outline-offset</code>’</a> is anything other than 0, then
1807 the outline is outset from the border edge by that amount.
1809 <div class=example>
1810 <p style="display:none">Example(s):
1812 <p>For example, to leave 2 pixels of space between a focus outline and the
1813 element that has the focus, or is active, the following rule can be used:
1815 <pre><code class=css>
1816 :focus,:active { outline-offset: 2px }
1817 </code></pre>
1818 </div>
1820 <h2 id=resizing-amp-overflow><span class=secno>8. </span>Resizing &
1821 Overflow</h2>
1823 <p>CSS2.1 provides a mechanism for controlling the appearance of a
1824 scrolling mechanism (e.g. scrollbars) on block container elements. This
1825 specification adds to that a mechanism for controlling user resizability
1826 of elements as well as the ability to specify text overflow behavior.
1828 <h3 id=resize><span class=secno>8.1. </span><a class=property
1829 href="#resize0">‘<code class=property>resize</code>’</a> property</h3>
1831 <p>The <a class=property href="#resize0">‘<code
1832 class=property>resize</code>’</a> property allows the author to specify
1833 whether or not an element is resizable by the user, and if so, along which
1834 axis/axes.
1836 <table class=propdef id=propdef-resize>
1837 <tbody>
1838 <tr>
1839 <th>Name:
1841 <td><dfn id=resize0>resize</dfn>
1843 <tr>
1844 <th>Value:
1846 <td>none | both | horizontal | vertical | inherit
1848 <tr>
1849 <th>Initial:
1851 <td>none
1853 <tr>
1854 <th>Applies to:
1856 <td>elements with <span class=property>‘<code
1857 class=property>overflow</code>’</span> other than visible
1859 <tr>
1860 <th>Inherited:
1862 <td>no
1864 <tr>
1865 <th>Percentages:
1867 <td>N/A
1869 <tr>
1870 <th>Media:
1872 <td>visual
1874 <tr>
1875 <th>Computed value:
1877 <td>specified value.
1879 <tr>
1880 <th>Animatable:
1882 <td>no
1883 </table>
1885 <dl>
1886 <dt>none
1888 <dd>The UA does not present a resizing mechanism on the element, and the
1889 user is given no direct manipulation mechanism to resize the element.
1891 <dt>both
1893 <dd>The UA presents a bidirectional resizing mechanism to allow the user
1894 to adjust both the height and the width of the element.
1896 <dt>horizontal
1898 <dd>The UA presents a unidirectional horizontal resizing mechanism to
1899 allow the user to adjust only the width of the element.
1901 <dt>vertical
1903 <dd>The UA presents a unidirectional vertical resizing mechanism to allow
1904 the user to adjust only the height of the element.
1905 </dl>
1907 <p>Currently it is possible to control the appearance of the scrolling
1908 mechanism (if any) on an element using the <span class=property>‘<code
1909 class=property>overflow</code>’</span> property (e.g. ‘<code
1910 class=css><code class=css>overflow: scroll</code></code>’ vs. ‘<code
1911 class=css><code class=css>overflow: hidden</code></code>’ etc.). The
1912 purpose of the <a class=property href="#resize0">‘<code
1913 class=property>resize</code>’</a> property is to also allow control over
1914 the appearance and function of the resizing mechanism (e.g. a resize box
1915 or widget) on the element.
1917 <p class=note> <em><strong>Note.</strong> The resizing mechanism is NOT the
1918 same as the scrolling mechanism. The scrolling mechanism allows the user
1919 to determine which portion of the contents of an element is shown. The
1920 resizing mechanism allows the user to determine the size of the element.
1921 </em>
1923 <p>The <a class=property href="#resize0">‘<code
1924 class=property>resize</code>’</a> property applies to elements whose
1925 computed <span class=property>‘<code
1926 class=property>overflow</code>’</span> value is something other than
1927 ‘<code class=css><span class=value>visible</span></code>’. If <span
1928 class=property>‘<code class=property>overflow</code>’</span> is
1929 different in a particular axis (i.e. <span class=property>‘<code
1930 class=property>overflow-x</code>’</span> vs. <span
1931 class=property>‘<code class=property>overflow-y</code>’</span>), then
1932 this property applies to the dimension(s) which do not have the value
1933 ‘<code class=css><span class=value>visible</span></code>’.
1935 <p> When an element is resized by the user, the user agent keeps track of a
1936 resize factor (which is initially 1.0) for the width and height, which it
1937 then applies to the computed width and height as part of determining the
1938 used width and height. The element's contents (and surroundings) are
1939 reformatted as necessary.
1941 <p>The resize factor introduces a step in width/height calculations and
1942 formatting as described in <a
1943 href="http://www.w3.org/TR/CSS21/visudet.html">chapter 10 of CSS2.1</a>.
1944 Specifically the following step is inserted between steps 1 and 2 of the
1945 algorithm in <a
1946 href="http://www.w3.org/TR/CSS21/visudet.html#min-max-widths">section
1947 10.4</a> and <a
1948 href="http://www.w3.org/TR/CSS21/visudet.html#min-max-heights">10.7</a> in
1949 CSS2.1 <a href="#CSS21" rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>,
1950 where [dimension] is ‘<code class=property>width</code>’ for 10.4 and
1951 ‘<code class=property>height</code>’ for 10.7.
1953 <blockquote>
1954 <p style="text-indent:-2em"> 1b. If the resize [dimension] factor is not
1955 1.0, then the tentative used [dimension] is multiplied by that factor,
1956 and the rules above are applied again, but this time using the result of
1957 that multiplication as the computed value for ‘<code
1958 class=css>[dimension]</code>’.
1959 </blockquote>
1961 <p> With regard to interactivity and the Document Object Model (DOM), the
1962 resize factor on an element lasts the lifetime of the element, however, if
1963 the <a class=property href="#resize0">‘<code
1964 class=property>resize</code>’</a> property itself is altered (e.g. via
1965 pseudo-class change or via DOM manipulation), then the resize factor is
1966 reset to 1.0.
1968 <p> The precise direction of resizing (i.e. altering the top left of the
1969 element or altering the bottom right) may depend on a number of factors
1970 including whether the element is absolutely positioned, whether it is
1971 positioned using the <span class=property>‘<code
1972 class=property>right</code>’</span> and <span class=property>‘<code
1973 class=property>bottom</code>’</span> properties, whether the language of
1974 the element is right-to-left etc. The precise direction of resizing is
1975 left to the UA to properly determine for the platform.
1977 <p> The user agent may restrict the resizing range to something suitable,
1978 such as between the original formatted size of the element, and large
1979 enough to encompass all the element's contents.
1981 <div class=example>
1982 <p style="display:none">Example(s):
1984 <p>For example, to make iframes scrollable <em>and</em> resizable, the
1985 following rule can be used:
1987 <pre><code class=css>
1988 iframe,object[type^="text/"],
1989 object[type$="+xml"],object[type="application/xml"]
1990 {
1991 overflow:auto;
1992 resize:both;
1993 }
1994 </code></pre>
1995 </div>
1996 <!--
1997 too bad we don't have @viewport yet. otherwise this would be cool:
1998 <pre><code class="css">
1999 @viewport {
2000 width: 100px;
2001 height: 100px;
2002 overflow: hidden;
2003 resize: none
2004 } /* display content in a non-resizable 100px by 100px window */
2005 </code></pre>
2006 -->
2008 <h3 id=text-overflow><span class=secno>8.2. </span> Overflow Ellipsis: the
2009 ‘<a href="#text-overflow0"><code
2010 class=property>text-overflow</code></a>’ property</h3>
2012 <table class=propdef id=propdef-text-overflow>
2013 <tbody>
2014 <tr>
2015 <th>Name:
2017 <td><dfn id=text-overflow0>text-overflow</dfn>
2019 <tr>
2020 <th>Value:
2022 <td> ( clip | ellipsis | <a class=noxref
2023 href="http://www.w3.org/TR/CSS21/syndata.html#value-def-string"> <span
2024 class=value-inst-string><string></span></a> ){1,2} | inherit
2026 <tr>
2027 <th>Initial:
2029 <td>clip
2031 <tr>
2032 <th>Applies to:
2034 <td>block containers
2036 <tr>
2037 <th>Inherited:
2039 <td>no
2041 <tr>
2042 <th>Percentages:
2044 <td>N/A
2046 <tr>
2047 <th>Media:
2049 <td>visual
2051 <tr>
2052 <th>Computed value:
2054 <td>as specified
2056 <tr>
2057 <th>Animatable:
2059 <td>no
2060 </table>
2062 <p>This property specifies rendering when inline content overflows its
2063 block container element ("the block") in its inline progression direction
2064 that has <span class=property>‘<code
2065 class=property>overflow</code>’</span> other than <span
2066 class=value>‘<code class=property>visible</code>’</span>. Text can
2067 overflow for example when it is prevented from wrapping (e.g. due to
2068 ‘<code class=css><code>white-space:nowrap</code></code>’ or a single
2069 word is too long to fit). Values have the following meanings:
2071 <dl>
2072 <dt><dfn id=clip title="text-overflow:clip"><code>clip</code></dfn>
2074 <dd>Clip inline content that overflows. Characters may be only partially
2075 rendered.
2077 <dt><dfn id=ellipsis
2078 title="text-overflow:ellipsis"><code>ellipsis</code></dfn>
2080 <dd> Render an ellipsis character (U+2026) to represent clipped inline
2081 content. Implementations may substitute a more
2082 language/script-appropriate ellipsis character, or three dots "..." if
2083 the ellipsis character is unavailable.
2085 <dt><dfn id=ltstringgt title="text-overflow:<string>">
2086 <var><string></var></dfn>
2088 <dd> Render the given string to represent clipped inline content. The
2089 given string is treated as an independent paragraph for bidi purposes.
2090 </dl>
2092 <p class=note> Note: The <string> value, and the 2-value syntax
2093 "{1,2}" and functionality are all at risk.
2095 <p> The term "character" is used in this property definition for better
2096 readability and means "grapheme cluster" <a href="#UAX29"
2097 rel=biblioentry>[UAX29]<!--{{!UAX29}}--></a> for implementation purposes.
2099 <p> If there is one value, it applies only to the end line edge. If there
2100 are two values, the first value applies to the left edge, and the second
2101 value applies to the right edge.
2103 <p> For the ellipsis and string values, implementations must hide
2104 characters and <a
2105 href="http://www.w3.org/TR/CSS21/visuren.html#inline-boxes"> atomic
2106 inline-level elements</a> at the applicable edge(s) of the line as
2107 necessary to fit the ellipsis/string. Place the ellipsis/string
2108 immediately adjacent to the applicable edge(s) of the remaining inline
2109 content. The first character or <a
2110 href="http://www.w3.org/TR/CSS21/visuren.html#inline-boxes"> atomic
2111 inline-level element</a> on a line must be clipped rather than ellipsed.
2113 <h4 class="no-num no-toc" id=ellipsing-details>ellipsing details</h4>
2115 <ul>
2116 <li> Ellipsing only affects rendering and must not affect layout nor
2117 dispatching of pointer events.
2119 <li> The ellipsis is styled and baseline-aligned according to the block.
2121 <li> Ellipsing occurs after relative positioning and other graphical
2122 transformations.
2124 <li> If there is insufficient space for the ellipsis, then clip the
2125 rendering of the ellipsis itself (on the same side that neutral
2126 characters on the line would have otherwise been clipped with the
2127 ‘<code class=css>clip</code>’ value).
2128 </ul>
2130 <h4 class="no-num no-toc" id=user-interaction-with-ellipsis>user
2131 interaction with ellipsis</h4>
2133 <ul>
2134 <li>When the user is interacting with content (e.g. editing, selecting,
2135 scrolling), the user agent may treat text-overflow ‘<code
2136 class=css>ellipsis</code>’ or string values as ‘<code
2137 class=css>clip</code>’.
2139 <li>Selecting the ellipsis should select the ellipsed text. If all of the
2140 ellipsed text is selected, UAs should show selection of the ellipsis.
2141 Behavior of partially-selected ellipsed text is up to the UA.
2142 </ul>
2144 <div class=example>
2145 <p style="display:none">Example(s):
2147 <h4 class="no-num no-toc" id=text-overflow-examples>text-overflow examples</h4>
2149 <p>These examples demonstrate setting the text-overflow of a block
2150 container element that has text which overflows its dimensions:
2152 <h5 class="no-num no-toc" id=sample-css-for-a-div>sample CSS for a div:</h5>
2154 <pre><code class=css>div {
2155 font-family:Helvetica,sans-serif; line-height:1.1;
2156 width:3.1em; padding:.2em; border:solid .1em black; margin:1em 0;
2157 }</code></pre>
2159 <h5 class="no-num no-toc"
2160 id=sample-html-fragments-renderings-and-you>sample HTML fragments,
2161 renderings, and your browser:</h5>
2163 <table border=1 cellpadding=5 style="color:#000;background:#fff;">
2164 <tbody>
2165 <tr>
2166 <th>HTML
2168 <th>sample rendering
2170 <th>your browser
2172 <tr>
2173 <td>
2174 <pre><code><div>
2175 CSS IS AWESOME, YES
2176 </div>
2177 </code></pre>
2179 <td> <object data=cssisawesome.png type="image/png"> First, a box with
2180 text drawing outside of it. </object>
2182 <td>
2183 <div
2184 style="width:3.1em; border:solid .1em black; margin:1em 0; padding:.2em; font-family:Helvetica,sans-serif; line-height:1.1;">CSS
2185 IS AWESOME, YES</div>
2187 <tr>
2188 <td>
2189 <pre><code><div style="<a
2190 href="#clip"><strong>text-overflow:clip;</strong></a> overflow:hidden">
2191 CSS IS AWESOME, YES
2192 </div>
2193 </code></pre>
2195 <td> <object data=cssisaweso.png type="image/png"> Second, a similar
2196 box with the text clipped outside the box. </object>
2198 <td>
2199 <div
2200 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
2201 IS AWESOME, YES</div>
2203 <tr>
2204 <td>
2205 <pre><code><div style="<a
2206 href="#ellipsis"><strong>text-overflow:ellipsis;</strong></a> overflow:hidden">
2207 CSS IS AWESOME, YES
2208 </div>
2209 </code></pre>
2211 <td> <object data=cssisaw.png type="image/png"> Third, a similar box
2212 with an ellipsis representing the clipped text. </object>
2214 <td>
2215 <div
2216 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
2217 IS AWESOME, YES</div>
2219 <tr>
2220 <td>
2221 <pre><code><div style="<a
2222 href="#ellipsis"><strong>text-overflow:ellipsis;</strong></a> overflow:hidden">
2223 NESTED
2224 <p>PARAGRAPH</p>
2225 WON'T ELLIPSE.
2226 </div>
2227 </code></pre>
2229 <td> <object data=nes.png type="image/png"> Fourth, a box with a nested
2230 paragraph demonstrating anonymous block boxes equivalency and
2231 non-inheritance into a nested element. </object>
2233 <td>
2234 <div
2235 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
2237 <p>PARAGRAPH</p>
2238 WON'T ELLIPSE.</div>
2239 </table>
2240 </div>
2242 <p class=note> Note: the side of the line that the ellipsis is placed
2243 depends on the ‘<code class=property>direction</code>’ of the block.
2244 E.g. an overflow hidden right-to-left (<code>direction:rtl</code>) block
2245 clips inline content on the <em>left</em> side, thus would place a
2246 text-overflow ellipsis on the <em>left</em> to represent that clipped
2247 content.</p>
2248 <!-- insert RTL example diagram here to illustrate note. -->
2250 <h4 class="no-num no-toc"
2251 id=ellipsis-interaction-with-scrolling-inte>ellipsis interaction with
2252 scrolling interfaces</h4>
2254 <p> This section applies to elements with text-overflow other than ‘<code
2255 class=property>clip</code>’ (non-clip text-overflow) and
2256 overflow:scroll.
2258 <p> When an element with non-clip text-overflow has overflow of scroll in
2259 the inline progression dimension of the text, and the browser provides a
2260 mechanism for scrolling (e.g. a scrollbar on the element, or a touch
2261 interface to swipe-scroll, etc.), there are additional implementation
2262 details that provide a better user experience:
2264 <p> When an element is scrolled (e.g. by the user, DOM manipulation, or <a
2265 href="http://www.w3.org/TR/2008/CR-css3-marquee-20081205/#overflow-style">‘<code
2266 class=property>overflow-style</code>’</a> <a href="#CSS3MARQUEE"
2267 rel=biblioentry>[CSS3MARQUEE]<!--{{CSS3MARQUEE}}--></a>), more of the
2268 element's content is shown. The value of text-overflow should not affect
2269 whether more of the element's content is shown or not. If a non-clip
2270 text-overflow is set, then as more content is scrolled into view,
2271 implementations should show whatever additional content fits, only
2272 truncating content which would otherwise be clipped (or is necessary to
2273 make room for the ellipsis/string), until the element is scrolled far
2274 enough to display the edge of the content at which point that content
2275 should be displayed rather than an ellipsis/string.
2277 <p> As some content is scrolled into view, it is likely that other content
2278 may scroll out of view on the other side. If that content's block
2279 container element is the same that's doing the scrolling, then
2280 implementations should render an ellipsis/string in place of the clipped
2281 content, with the same details as described in the value definition above,
2282 except that the ellipsis/string is drawn in the start (rather than end) of
2283 the block's direction (per the direction property).
2285 <p> While the content is being scrolled, implementations may adjust their
2286 rendering of ellipses/strings (e.g. align to the box edges rather than
2287 line edges).
2289 <p> If there is insufficient space for both start and end ellipses/strings,
2290 then only the end ellipsis/string should be rendered.
2292 <h2 id=pointing-devices-and-keyboards><span class=secno>9. </span>Pointing
2293 Devices and Keyboards</h2>
2295 <h3 id=pointer-interaction><span class=secno>9.1. </span>Pointer
2296 interaction</h3>
2298 <h4 id=cursor><span class=secno>9.1.1. </span><a class=property
2299 href="#cursor0">‘<code class=property>cursor</code>’</a> property</h4>
2301 <table class=propdef id=propdef-cursor>
2302 <tbody>
2303 <tr>
2304 <th>Name:
2306 <td><dfn id=cursor0>cursor</dfn>
2308 <tr>
2309 <th>Value:
2311 <td> [ [<uri> [<x> <y>]?,]* <br>
2312 [ auto | default | none |<br>
2313 context-menu | help | pointer | progress | wait | <br>
2314 cell | crosshair | text | vertical-text | <br>
2315 alias | copy | move | no-drop | not-allowed | <br>
2316 e-resize | n-resize | ne-resize | nw-resize | s-resize | se-resize |
2317 sw-resize | w-resize | ew-resize | ns-resize | nesw-resize |
2318 nwse-resize | col-resize | row-resize | all-scroll | zoom-in | zoom-out
2319 <br>
2320 ] ] | inherit
2322 <tr>
2323 <th>Initial:
2325 <td>auto
2327 <tr>
2328 <th>Applies to:
2330 <td>all elements
2332 <tr>
2333 <th>Inherited:
2335 <td>yes
2337 <tr>
2338 <th>Percentages:
2340 <td>N/A
2342 <tr>
2343 <th>Media:
2345 <td>visual, interactive
2347 <tr>
2348 <th>Computed value:
2350 <td>as specified, except with any relative URLs converted to absolute
2352 <tr>
2353 <th>Animatable:
2355 <td>no
2356 </table>
2358 <p>This property specifies the type of cursor to be displayed for the
2359 pointing device when over the element's border, padding, and content.
2360 Values have the following meanings:
2362 <h5 class="no-num no-toc" id=image-cursors>image cursors</h5>
2364 <dl>
2365 <dt><uri>
2367 <dd>The user agent retrieves the cursor from the resource designated by
2368 the URI. If the user agent cannot handle the first cursor of a list of
2369 cursors, it must attempt to handle the second, etc. If the user agent
2370 cannot handle any user-defined cursor, it must use the cursor keyword at
2371 the end of the list. The optional <x> and <y> coordinates
2372 identify the exact position within the image which is the pointer
2373 position (i.e., the hotspot).
2375 <dt><x>
2377 <dt><y>
2379 <dd> Each is a <number>. The x-coordinate and y-coordinate of the
2380 position in the cursor's coordinate system (left/top relative) which
2381 represents the precise position that is being pointed to. If the values
2382 are unspecified, then the intrinsic hotspot defined inside the image
2383 resource itself is used. If both the values are unspecific and the
2384 referenced cursor has no defined hotspot, the effect is as if a value of
2385 "0 0" were specified.
2386 </dl>
2388 <h5 class="no-num no-toc" id=general-purpose-cursors>general purpose
2389 cursors</h5>
2391 <dl>
2392 <dt style="cursor:auto">auto
2394 <dd>The UA determines the cursor to display based on the current context.
2396 <dt style="cursor:default">default
2398 <dd>The platform-dependent default cursor. Often rendered as an arrow.
2400 <dt style="cursor:none">none
2402 <dd>No cursor is rendered for the element.
2403 </dl>
2405 <h5 class="no-num no-toc" id=links-and-status-cursors>links and status
2406 cursors</h5>
2408 <dl>
2409 <dt style="cursor:context-menu">context-menu
2411 <dd>A context menu is available for the object under the cursor. Often
2412 rendered as an arrow with a small menu-like graphic next to it.
2414 <dt style="cursor:help">help
2416 <dd>Help is available for the object under the cursor. Often rendered as a
2417 question mark or a balloon.
2419 <dt style="cursor:pointer">pointer
2421 <dd>The cursor is a pointer that indicates a link.
2423 <dt style="cursor:progress">progress
2425 <dd>A progress indicator. The program is performing some processing, but
2426 is different from ‘<code class=css><span
2427 class=value>wait</span></code>’ in that the user may still interact
2428 with the program. Often rendered as a spinning beach ball, or an arrow
2429 with a watch or hourglass.
2431 <dt style="cursor:wait">wait
2433 <dd>Indicates that the program is busy and the user should wait. Often
2434 rendered as a watch or hourglass.
2435 </dl>
2437 <h5 class="no-num no-toc" id=selection-cursors>selection cursors</h5>
2439 <dl>
2440 <dt style="cursor:cell">cell
2442 <dd>Indicates that a cell or set of cells may be selected. Often rendered
2443 as a thick plus-sign with a dot in the middle.
2445 <dt style="cursor:crosshair">crosshair
2447 <dd>A simple crosshair (e.g., short line segments resembling a "+" sign).
2448 Often used to indicate a two dimensional bitmap selection mode.
2450 <dt style="cursor:text">text
2452 <dd>Indicates text that may be selected. Often rendered as a vertical
2453 I-beam. User agents may automatically display a horizontal I-beam/cursor
2454 (e.g. same as the ‘<code class=css><span
2455 class=value>vertical-text</span></code>’ keyword) for vertical text, or
2456 for that matter, any angle of I-beam/cursor for text that is rendered at
2457 any particular angle.
2459 <dt style="cursor:vertical-text">vertical-text
2461 <dd>Indicates vertical-text that may be selected. Often rendered as a
2462 horizontal I-beam.
2463 </dl>
2465 <h5 class="no-num no-toc" id=drag-and-drop-cursors>drag and drop cursors</h5>
2467 <dl>
2468 <dt style="cursor:alias">alias
2470 <dd>Indicates an alias of/shortcut to something is to be created. Often
2471 rendered as an arrow with a small curved arrow next to it.
2473 <dt style="cursor:copy">copy
2475 <dd>Indicates something is to be copied. Often rendered as an arrow with a
2476 small plus sign next to it.
2478 <dt style="cursor:move">move
2480 <dd>Indicates something is to be moved.
2482 <dt style="cursor:no-drop">no-drop
2484 <dd> Indicates that the dragged item cannot be dropped at the current
2485 cursor location. Often rendered as a hand or pointer with a small circle
2486 with a line through it.
2488 <dt style="cursor:not-allowed">not-allowed
2490 <dd>Indicates that the requested action will not be carried out. Often
2491 rendered as a circle with a line through it.
2492 </dl>
2494 <h5 class="no-num no-toc" id=resizing-and-scrolling-cursors>resizing and
2495 scrolling cursors</h5>
2497 <dl>
2498 <dt> <span style="cursor:e-resize">e-resize</span>, <span
2499 style="cursor:n-resize">n-resize</span>, <span
2500 style="cursor:ne-resize">ne-resize</span>, <span
2501 style="cursor:nw-resize">nw-resize</span>, <span
2502 style="cursor:s-resize">s-resize</span>, <span
2503 style="cursor:se-resize">se-resize</span>, <span
2504 style="cursor:sw-resize">sw-resize</span>, <span
2505 style="cursor:w-resize">w-resize</span>
2507 <dd>Indicates that some edge is to be moved. For example, the ‘<code
2508 class=property>se-resize</code>’ cursor is used when the movement
2509 starts from the south-east corner of the box.
2511 <dt> <span style="cursor:ew-resize">ew-resize</span>, <span
2512 style="cursor:ns-resize">ns-resize</span>, <span
2513 style="cursor:nesw-resize">nesw-resize</span>, <span
2514 style="cursor:nwse-resize">nwse-resize</span>
2516 <dd>Indicates a bidirectional resize cursor.
2518 <dt style="cursor:col-resize">col-resize
2520 <dd>Indicates that the item/column can be resized horizontally. Often
2521 rendered as arrows pointing left and right with a vertical bar separating
2522 them.
2524 <dt style="cursor:row-resize">row-resize
2526 <dd>Indicates that the item/row can be resized vertically. Often rendered
2527 as arrows pointing up and down with a horizontal bar separating them.
2529 <dt style="cursor:all-scroll">all-scroll
2531 <dd>Indicates that the something can be scrolled in any direction. Often
2532 rendered as arrows pointing up, down, left, and right with a dot in the
2533 middle.
2534 </dl>
2536 <h5 class="no-num no-toc" id=zooming-cursors>zooming cursors</h5>
2538 <dl>
2539 <dt> <span style="cursor:zoom-in"> zoom-in</span>, <span
2540 style="cursor:zoom-out"> zoom-out</span>
2542 <dd> Indicates that something can be zoomed (magnified) in or out, and
2543 often rendered as a magnifying glass with a "+" or "-" in the center of
2544 the glass, for ‘<code class=property>zoom-in</code>’ and ‘<code
2545 class=property>zoom-out</code>’ respectively.
2546 </dl>
2548 <p>The UA may treat unsupported values as ‘<code class=css><span
2549 class=value>auto</span></code>’. E.g. on platforms that do not have a
2550 concept of a ‘<code class=css><span
2551 class=value>context-menu</span></code>’ cursor, the UA may render
2552 ‘<code class=css><span class=value>default</span></code>’ or whatever
2553 is appropriate.
2555 <div class=example>
2556 <h5 class="no-num no-toc" id=example-cursor-fallback>Example: cursor
2557 fallback</h5>
2559 <p>Here is an example of using several cursor values.
2561 <pre><code class=css>
2562 :link,:visited {
2563 cursor: url(example.svg#linkcursor),
2564 url(hyper.cur),
2565 url(hyper.png) 2 3,
2566 pointer
2567 }
2568 </code></pre>
2570 <p>This example sets the cursor on all hyperlinks (whether visited or not)
2571 to an external <a
2572 href="http://www.w3.org/TR/SVG/interact.html#CursorElement">SVG
2573 cursor</a> (<a href="#SVG10" rel=biblioentry>[SVG10]<!--{{SVG10}}--></a>,
2574 section 16.8.3). User agents that don't support SVG cursors would simply
2575 skip to the next value and attempt to use the "hyper.cur" cursor. If that
2576 cursor format was also not supported, the UA could attempt to use the
2577 "hyper.png" cursor with the explicit hot spot. Finally if the UA does not
2578 support any of those image cursor formats, the UA would skip to the last
2579 value and simply render the ‘<code class=css><span
2580 class=value>pointer</span></code>’ cursor.
2581 </div>
2583 <h3 id=keyboard><span class=secno>9.2. </span>Keyboard control</h3>
2585 <h4 id=nav-index><span class=secno>9.2.1. </span>Sequential navigation
2586 order: the <a class=property href="#nav-index0">‘<code
2587 class=property>nav-index</code>’</a> property</h4>
2589 <p>The <a class=property href="#nav-index0">‘<code
2590 class=property>nav-index</code>’</a> property is an input-method-neutral
2591 way of specifying the sequential navigation order (also known as "tabbing
2592 order").
2594 <table class=propdef id=propdef-nav-index>
2595 <tbody>
2596 <tr>
2597 <th>Name:
2599 <td><dfn id=nav-index0>nav-index</dfn>
2601 <tr>
2602 <th>Value:
2604 <td>auto | <number> | inherit
2606 <tr>
2607 <th>Initial:
2609 <td>auto
2611 <tr>
2612 <th>Applies to:
2614 <td>all enabled elements
2616 <tr>
2617 <th>Inherited:
2619 <td>no
2621 <tr>
2622 <th>Percentages:
2624 <td>n/a
2626 <tr>
2627 <th>Media:
2629 <td>interactive
2631 <tr>
2632 <th>Computed value:
2634 <td>specified value.
2636 <tr>
2637 <th>Animatable:
2639 <td>as <a
2640 href="http://dev.w3.org/csswg/css3-transitions/#animtype-number">number</a>
2641 </table>
2643 <dl>
2644 <dt>auto
2646 <dd>The element's sequential navigation order is assigned automatically by
2647 the user agent.
2649 <dt><number>
2651 <dd>The number (which is non-zero and positive) indicates the sequential
2652 navigation order for the element. ‘<code class=css><span
2653 class=value>1</span></code>’ means first. Elements with the same
2654 nav-index value are navigated in document order when that nav-index value
2655 is being navigated.
2656 </dl>
2658 <p>This property is a replacement for the HTML4/XHTML1 attribute ‘<code
2659 class=css><a
2660 href="http://www.w3.org/TR/html401/interact/forms.html#h-17.11.1">tabindex</a></code>’
2661 (<a href="#HTML401" rel=biblioentry>[HTML401]<!--{{HTML401}}--></a>,
2662 section 17.11.1). Borrowed and slightly rephrased from the HTML4
2663 Recommendation:
2665 <p> This property specifies the position of the current element in the
2666 sequential navigation order for the current document.
2668 <p> The sequential navigation order defines the order in which elements
2669 will receive focus when navigated by the user via the keyboard. The
2670 sequential navigation order may include elements nested within other
2671 elements.
2673 <p> Elements that may receive focus should be navigated by user agents
2674 according to the following rules:
2676 <ol>
2677 <li>Those elements that support the nav-index property and assign a
2678 positive value to it are navigated first. Navigation proceeds from the
2679 element with the lowest nav-index value to the element with the highest
2680 value. Values need not be sequential nor must they begin with any
2681 particular value. Elements that have identical nav-index values should be
2682 navigated in document order.
2684 <li>Those elements that do not support the nav-index property or support
2685 it and assign it a value of ‘<code class=css><span
2686 class=value>auto</span></code>’ are navigated next. These elements are
2687 navigated in document order.
2689 <li>Elements that are disabled do not participate in the sequential
2690 navigation order.
2691 </ol>
2693 <p> The actual key sequence that causes sequential navigation or element
2694 activation depends on the configuration of the user agent (e.g., the "tab"
2695 key is often used for sequential navigation, and the "enter" key is used
2696 to activate a selected element).
2698 <p> User agents may also define key sequences to navigate the sequential
2699 navigation order in reverse. When the end (or beginning) of the tabbing
2700 order is reached, user agents may circle back to the beginning (or end).
2701 The key combination "shift-tab" is often used for reverse sequential
2702 navigation.
2704 <p class=note> Note: The ‘<a href="#nav-index0"><code
2705 class=property>nav-index</code></a>’ property is at risk.
2707 <h4 id=nav-dir><span class=secno>9.2.2. </span>Directional focus
2708 navigation: the <a class=property href="#nav-up">‘<code
2709 class=property>nav-up</code>’</a>, <a class=property
2710 href="#nav-right">‘<code class=property>nav-right</code>’</a>, <a
2711 class=property href="#nav-down">‘<code
2712 class=property>nav-down</code>’</a>, <a class=property
2713 href="#nav-left">‘<code class=property>nav-left</code>’</a> properties</h4>
2715 <table class=propdef>
2716 <tbody>
2717 <tr>
2718 <th>Name:
2720 <td><dfn id=nav-up>nav-up</dfn>, <dfn id=nav-right>nav-right</dfn>, <dfn
2721 id=nav-down>nav-down</dfn>, <dfn id=nav-left>nav-left</dfn>
2723 <tr>
2724 <th>Value:
2726 <td>auto | <id> [ current | root | <target-name> ]? |
2727 inherit
2729 <tr>
2730 <th>Initial:
2732 <td>auto
2734 <tr>
2735 <th>Applies to:
2737 <td>all enabled elements
2739 <tr>
2740 <th>Inherited:
2742 <td>no
2744 <tr>
2745 <th>Percentages:
2747 <td>N/A
2749 <tr>
2750 <th>Media:
2752 <td>interactive
2754 <tr>
2755 <th>Computed value:
2757 <td>as specified
2759 <tr>
2760 <th>Animatable:
2762 <td>no
2763 </table>
2765 <dl>
2766 <dt>auto
2768 <dd>The user agent automatically determines which element to navigate the
2769 focus to in response to directional navigational input.
2771 <dt><id>
2773 <dd>
2774 <p>The <id> value consists of a ‘<code
2775 class=css><code>#</code></code>’ character followed by an identifier,
2776 similar to a fragment identifier in a URL. It indicates the element to
2777 which the focus is navigated to in response to directional navigation
2778 input respective to the specific property.
2780 <p> If the <id> refers to the currently focused element, the
2781 directional navigation input respective to the nav- property is ignored
2782 — there is no need to refocus the same element.
2784 <dt><target-name>
2786 <dd> The <target-name> parameter indicates the target frame for the
2787 focus navigation. It is a string and it cannot start with the underscore
2788 "_" character. If the specified target frame does not exist, the
2789 parameter will be treated as the keyword ‘<code class=css><span
2790 class=value>current</span></code>’, which means to simply use the frame
2791 that the element is in. The keyword ‘<code class=css><span
2792 class=value>root</span></code>’ indicates that the user agent should
2793 target the full window.
2794 </dl>
2796 <p>User agents for devices with directional navigation keys respond by
2797 navigating the focus according to four respective nav-* directional
2798 navigation properties (nav-up, nav-right, nav-down, nav-left). This
2799 specification does not define which keys of a device are directional
2800 navigational keys.
2802 <div class=note>
2803 <p> <em><strong>Note.</strong> Typical personal computers have keyboards
2804 with four arrow keys. One possible implementation would be to use those
2805 four arrow keys for directional navigation. For accessibility and user
2806 convenience, user agents should allow configuration of which keys on a
2807 keyboard are used for directional navigation. </em>
2808 </div>
2810 <div class=example>
2811 <h5 class="no-num no-toc" id=example-positioned-buttons>Example:
2812 positioned buttons</h5>
2814 <p>Here is an example of buttons positioned in a diamond shape whose
2815 navigation order and directional focus navigation is set in such a way to
2816 navigate the focus clockwise (or counter-clockwise) around the diamond
2817 shape when the user chooses to navigate sequentially or directionally.
2819 <pre><code class=css>
2820 button { position:absolute }
2822 button#b1 {
2823 top:0; left:50%;
2824 nav-index:1;
2825 nav-right:#b2; nav-left:#b4;
2826 nav-down:#b2; nav-up:#b4;
2827 }
2829 button#b2 {
2830 top:50%; left:100%;
2831 nav-index:2;
2832 nav-right:#b3; nav-left:#b1;
2833 nav-down:#b3; nav-up:#b1;
2834 }
2836 button#b3 {
2837 top:100%; left:50%;
2838 nav-index:3;
2839 nav-right:#b4; nav-left:#b2;
2840 nav-down:#b4; nav-up:#b2;
2841 }
2843 button#b4 {
2844 top:50%; left:0;
2845 nav-index:4;
2846 nav-right:#b1; nav-left:#b3;
2847 nav-down:#b1; nav-up:#b3;
2848 }
2849 </code></pre>
2851 <p>Whatever markup sequence the buttons may have (which is not specified
2852 in this example) is irrelevant in this case because they are positioned,
2853 and yet, it is still important to ensure focus navigation behaviors which
2854 relate reasonably to the specified layout.
2855 </div>
2857 <p class=note> Note: The ‘<a href="#nav-up"><code
2858 class=property>nav-up</code></a>’, ‘<a href="#nav-right"><code
2859 class=property>nav-right</code></a>’, ‘<a href="#nav-down"><code
2860 class=property>nav-down</code></a>’, and ‘<a href="#nav-left"><code
2861 class=property>nav-left</code></a>’ properties are at risk.
2863 <h4 id=input-method-editor><span class=secno>9.2.3. </span>Input method
2864 editor: the <a class=property href="#ime-mode">‘<code
2865 class=property>ime-mode</code>’</a> property</h4>
2867 <table class=propdef>
2868 <tbody>
2869 <tr>
2870 <th>Name:
2872 <td><dfn id=ime-mode>ime-mode</dfn>
2874 <tr>
2875 <th>Value:
2877 <td>auto | normal | active | inactive | disabled | inherit
2879 <tr>
2880 <th>Initial:
2882 <td>auto
2884 <tr>
2885 <th>Applies to:
2887 <td>text fields
2889 <tr>
2890 <th>Inherited:
2892 <td>no
2894 <tr>
2895 <th>Percentages:
2897 <td>N/A
2899 <tr>
2900 <th>Media:
2902 <td>interactive
2904 <tr>
2905 <th>Computed value:
2907 <td>as specified
2909 <tr>
2910 <th>Animatable:
2912 <td>no
2913 </table>
2915 <p> The ‘<a href="#ime-mode"><code class=property>ime-mode</code></a>’
2916 CSS property controls the state of the input method editor for text
2917 fields.
2919 <dl>
2920 <dt>auto
2922 <dd> No change is made to the current input method editor state. This is
2923 the default.
2925 <dt>normal
2927 <dd> The IME state should be normal; this value can be used in a user
2928 style sheet to override the page setting.
2930 <dt>active
2932 <dd> The input method editor is initially active; text entry is performed
2933 using it unless the user specifically dismisses it.
2935 <dt>inactive
2937 <dd> The input method editor is initially inactive, but the user may
2938 activate it if they wish.
2940 <dt>disabled
2942 <dd> The input method editor is disabled and may not be activated by the
2943 user.
2944 </dl>
2946 <div class=example>
2947 <h5 class="no-num no-toc"
2948 id=example-disabling-input-method-support>Example: disabling input method
2949 support</h5>
2951 <pre><code
2952 class=html><input type="text" name="name" value="initial value" style="ime-mode: disabled">
2953 </code></pre>
2955 <p> This example disables input method support for a field; this might be
2956 necessary for fields that enter data into a database that doesn't support
2957 extended character sets, for example.
2958 </div>
2960 <div class=example>
2961 <h5 class="no-num no-toc" id=example-user-preference>Example: user
2962 preference</h5>
2964 <pre><code class=css>input[type=password] {
2965 ime-mode: auto !important;
2966 }
2967 </code></pre>
2969 <p> This example CSS may be placed into a user style sheet file to force
2970 password input fields to behave in a default manner.
2971 </div>
2973 <p class=note> Note: In general, it's not appropriate for a public web site
2974 to manipulate the IME mode setting. This property should be used for web
2975 applications and the like. Authors should not rely on disabling IME to
2976 prevent extended characters from passing through a form. Even with IME
2977 disabled, users can still paste extended characters into a form's fields.
2979 <p class=note> Note: The ‘<a href="#ime-mode"><code
2980 class=property>ime-mode</code></a>’ property is at risk.
2982 <hr title="Separator from footer">
2984 <h2 class=no-num id=acknowledgments>Appendix A. Acknowledgments</h2>
2986 <p>This appendix is <em>informative</em>.
2988 <p>Thanks to feedback and contributions from L. David Baron, Bert Bos,
2989 Matthew Brealey, Ada Chan, Michael Day, Micah Dubinko, Elika E., Steve
2990 Falkenburg, Al Gilman, Ian Hickson, Bjoern Hoehrmann, David Hyatt, Richard
2991 Ishida, Sho Kuwamoto, Susan Lesch, Peter Linss, Brad Pettit, Alexander
2992 Savenkov, Sebastian Schnitzenbaumer, Etan Wexler, David Woolley and Domel.
2994 <h2 class=no-num id=references>Appendix B. Bibiliography</h2>
2996 <h3 class="no-num no-toc" id=normative-references>Normative References</h3>
2997 <!--begin-normative-->
2998 <!-- Sorted by label -->
3000 <dl class=bibliography>
3001 <dt style="display: none"><!-- keeps the doc valid if the DL is empty -->
3002 <!---->
3004 <dt id=CSS21>[CSS21]
3006 <dd>Bert Bos; et al. <a
3007 href="http://www.w3.org/TR/2011/REC-CSS2-20110607/"><cite>Cascading Style
3008 Sheets Level 2 Revision 1 (CSS 2.1) Specification.</cite></a> 7 June
3009 2011. W3C Recommendation. URL: <a
3010 href="http://www.w3.org/TR/2011/REC-CSS2-20110607/">http://www.w3.org/TR/2011/REC-CSS2-20110607/</a>
3011 </dd>
3012 <!---->
3014 <dt id=CSS3COLOR>[CSS3COLOR]
3016 <dd>Tantek Çelik; Chris Lilley; L. David Baron. <a
3017 href="http://www.w3.org/TR/2011/REC-css3-color-20110607"><cite>CSS Color
3018 Module Level 3.</cite></a> 7 June 2011. W3C Recommendation. URL: <a
3019 href="http://www.w3.org/TR/2011/REC-css3-color-20110607">http://www.w3.org/TR/2011/REC-css3-color-20110607</a>
3020 </dd>
3021 <!---->
3023 <dt id=RFC1738>[RFC1738]
3025 <dd>T. Berners-Lee; L. Masinter; M. McCahill. <a
3026 href="http://www.ietf.org/rfc/rfc1738.txt"><cite>Uniform Resource
3027 Locators (URL).</cite></a> December 1994. Internet RFC 1738. URL: <a
3028 href="http://www.ietf.org/rfc/rfc1738.txt">http://www.ietf.org/rfc/rfc1738.txt</a>
3029 </dd>
3030 <!---->
3032 <dt id=RFC1808>[RFC1808]
3034 <dd>R. Fielding. <a
3035 href="http://www.ietf.org/rfc/rfc1808.txt"><cite>Relative Uniform
3036 Resource Locators.</cite></a> June 1995. Internet RFC 1808. (Obsoleted by
3037 RFC 3986) URL: <a
3038 href="http://www.ietf.org/rfc/rfc1808.txt">http://www.ietf.org/rfc/rfc1808.txt</a>
3039 </dd>
3040 <!---->
3042 <dt id=RFC2119>[RFC2119]
3044 <dd>S. Bradner. <a href="http://www.ietf.org/rfc/rfc2119.txt"><cite>Key
3045 words for use in RFCs to Indicate Requirement Levels.</cite></a> Internet
3046 RFC 2119. URL: <a
3047 href="http://www.ietf.org/rfc/rfc2119.txt">http://www.ietf.org/rfc/rfc2119.txt</a>
3048 </dd>
3049 <!---->
3051 <dt id=SELECT>[SELECT]
3053 <dd>Tantek Çelik; et al. <a
3054 href="http://www.w3.org/TR/2011/REC-css3-selectors-20110929/"><cite>Selectors
3055 Level 3.</cite></a> 29 September 2011. W3C Recommendation. URL: <a
3056 href="http://www.w3.org/TR/2011/REC-css3-selectors-20110929/">http://www.w3.org/TR/2011/REC-css3-selectors-20110929/</a>
3057 </dd>
3058 <!---->
3060 <dt id=UAX29>[UAX29]
3062 <dd>Mark Davis. <a
3063 href="http://www.unicode.org/reports/tr29/"><cite>Unicode Text
3064 Segmentation.</cite></a> 12 September 2012. Unicode Standard Annex #29.
3065 URL: <a
3066 href="http://www.unicode.org/reports/tr29/">http://www.unicode.org/reports/tr29/</a>
3067 </dd>
3068 <!---->
3070 <dt id=URI>[URI]
3072 <dd>T. Berners-Lee; R. Fielding; L. Masinter. <a
3073 href="http://www.ietf.org/rfc/rfc3986.txt"><cite>Uniform Resource
3074 Identifiers (URI): generic syntax.</cite></a> January 2005. Internet RFC
3075 3986. URL: <a
3076 href="http://www.ietf.org/rfc/rfc3986.txt">http://www.ietf.org/rfc/rfc3986.txt</a>
3077 </dd>
3078 <!---->
3079 </dl>
3080 <!--end-normative-->
3082 <h3 class="no-num no-toc" id=informative-references>Informative References</h3>
3083 <!--begin-informative-->
3084 <!-- Sorted by label -->
3086 <dl class=bibliography>
3087 <dt style="display: none"><!-- keeps the doc valid if the DL is empty -->
3088 <!---->
3090 <dt id=CSS1>[CSS1]
3092 <dd>Håkon Wium Lie; Bert Bos. <a
3093 href="http://www.w3.org/TR/2008/REC-CSS1-20080411"><cite>Cascading Style
3094 Sheets (CSS1) Level 1 Specification.</cite></a> 11 April 2008. W3C
3095 Recommendation. URL: <a
3096 href="http://www.w3.org/TR/2008/REC-CSS1-20080411">http://www.w3.org/TR/2008/REC-CSS1-20080411</a>
3097 </dd>
3098 <!---->
3100 <dt id=CSS2>[CSS2]
3102 <dd>Ian Jacobs; et al. <a
3103 href="http://www.w3.org/TR/2008/REC-CSS2-20080411"><cite>Cascading Style
3104 Sheets, level 2 (CSS2) Specification.</cite></a> 11 April 2008. W3C
3105 Recommendation. URL: <a
3106 href="http://www.w3.org/TR/2008/REC-CSS2-20080411">http://www.w3.org/TR/2008/REC-CSS2-20080411</a>
3107 </dd>
3108 <!---->
3110 <dt id=CSS3GENCON>[CSS3GENCON]
3112 <dd>Ian Hickson. <a
3113 href="http://www.w3.org/TR/2003/WD-css3-content-20030514"><cite>CSS3
3114 Generated and Replaced Content Module.</cite></a> 14 May 2003. W3C
3115 Working Draft. (Work in progress.) URL: <a
3116 href="http://www.w3.org/TR/2003/WD-css3-content-20030514">http://www.w3.org/TR/2003/WD-css3-content-20030514</a>
3117 </dd>
3118 <!---->
3120 <dt id=CSS3MARQUEE>[CSS3MARQUEE]
3122 <dd>Bert Bos. <a
3123 href="http://www.w3.org/TR/2008/CR-css3-marquee-20081205"><cite>CSS
3124 Marquee Module Level 3.</cite></a> 5 December 2008. W3C Candidate
3125 Recommendation. (Work in progress.) URL: <a
3126 href="http://www.w3.org/TR/2008/CR-css3-marquee-20081205">http://www.w3.org/TR/2008/CR-css3-marquee-20081205</a>
3127 </dd>
3128 <!---->
3130 <dt id=CSSUI>[CSSUI]
3132 <dd>Tantek Çelik. <a
3133 href="http://www.w3.org/TR/2002/WD-css3-userint-20020802"><cite>User
3134 Interface for CSS3.</cite></a> 16 February 2000. W3C Working Draft.
3135 (Superseded) URL: <a
3136 href="http://www.w3.org/TR/2002/WD-css3-userint-20020802">http://www.w3.org/TR/2002/WD-css3-userint-20020802</a>
3137 </dd>
3138 <!---->
3140 <dt id=HTML401>[HTML401]
3142 <dd>Dave Raggett; Arnaud Le Hors; Ian Jacobs. <a
3143 href="http://www.w3.org/TR/1999/REC-html401-19991224"><cite>HTML 4.01
3144 Specification.</cite></a> 24 December 1999. W3C Recommendation. URL: <a
3145 href="http://www.w3.org/TR/1999/REC-html401-19991224">http://www.w3.org/TR/1999/REC-html401-19991224</a>
3146 </dd>
3147 <!---->
3149 <dt id=HTML5>[HTML5]
3151 <dd>Ian Hickson. <a
3152 href="http://www.w3.org/TR/2012/CR-html5-20121217/"><cite>HTML5.</cite></a>
3153 17 December 2012. W3C Candidate Recommendation. (Work in progress.) URL:
3154 <a
3155 href="http://www.w3.org/TR/2012/CR-html5-20121217/">http://www.w3.org/TR/2012/CR-html5-20121217/</a>
3156 </dd>
3157 <!---->
3159 <dt id=SVG10>[SVG10]
3161 <dd>Jon Ferraiolo. <a
3162 href="http://www.w3.org/TR/2001/REC-SVG-20010904"><cite>Scalable Vector
3163 Graphics (SVG) 1.0 Specification.</cite></a> 4 September 2001. W3C
3164 Recommendation. URL: <a
3165 href="http://www.w3.org/TR/2001/REC-SVG-20010904">http://www.w3.org/TR/2001/REC-SVG-20010904</a>
3166 </dd>
3167 <!---->
3169 <dt id=SVG11>[SVG11]
3171 <dd>Erik Dahlström; et al. <a
3172 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/"><cite>Scalable
3173 Vector Graphics (SVG) 1.1 (Second Edition).</cite></a> 16 August 2011.
3174 W3C Recommendation. URL: <a
3175 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/">http://www.w3.org/TR/2011/REC-SVG11-20110816/</a>
3176 </dd>
3177 <!---->
3179 <dt id=UAAG10>[UAAG10]
3181 <dd>Ian Jacobs; Jon Gunderson; Eric Hansen. <a
3182 href="http://www.w3.org/TR/2002/REC-UAAG10-20021217/"><cite>User Agent
3183 Accessibility Guidelines 1.0.</cite></a> 17 December 2002. W3C
3184 Recommendation. URL: <a
3185 href="http://www.w3.org/TR/2002/REC-UAAG10-20021217/">http://www.w3.org/TR/2002/REC-UAAG10-20021217/</a>
3186 </dd>
3187 <!---->
3189 <dt id=XFORMS11>[XFORMS11]
3191 <dd>John M. Boyer. <a
3192 href="http://www.w3.org/TR/2009/REC-xforms-20091020/"><cite>XForms
3193 1.1.</cite></a> 20 October 2009. W3C Recommendation. URL: <a
3194 href="http://www.w3.org/TR/2009/REC-xforms-20091020/">http://www.w3.org/TR/2009/REC-xforms-20091020/</a>
3195 </dd>
3196 <!---->
3198 <dt id=XHTML10>[XHTML10]
3200 <dd>Steven Pemberton. <a
3201 href="http://www.w3.org/TR/2002/REC-xhtml1-20020801"><cite>XHTML™ 1.0
3202 The Extensible HyperText Markup Language (Second Edition).</cite></a> 1
3203 August 2002. W3C Recommendation. URL: <a
3204 href="http://www.w3.org/TR/2002/REC-xhtml1-20020801">http://www.w3.org/TR/2002/REC-xhtml1-20020801</a>
3205 </dd>
3206 <!---->
3208 <dt id=XHTML11>[XHTML11]
3210 <dd>Murray Altheim; Shane McCarron. <a
3211 href="http://www.w3.org/TR/2001/REC-xhtml11-20010531"><cite>XHTML™ 1.1
3212 - Module-based XHTML.</cite></a> 31 May 2001. W3C Recommendation. URL: <a
3213 href="http://www.w3.org/TR/2001/REC-xhtml11-20010531">http://www.w3.org/TR/2001/REC-xhtml11-20010531</a>
3214 </dd>
3215 <!---->
3217 <dt id=XML10>[XML10]
3219 <dd>C. M. Sperberg-McQueen; et al. <a
3220 href="http://www.w3.org/TR/2008/REC-xml-20081126/"><cite>Extensible
3221 Markup Language (XML) 1.0 (Fifth Edition).</cite></a> 26 November 2008.
3222 W3C Recommendation. URL: <a
3223 href="http://www.w3.org/TR/2008/REC-xml-20081126/">http://www.w3.org/TR/2008/REC-xml-20081126/</a>
3224 </dd>
3225 <!---->
3226 </dl>
3227 <!--end-informative-->
3229 <h2 class=no-num id=changes>Appendix C. Changes</h2>
3231 <p>This appendix is <em>informative</em>.
3233 <p>In general this draft contains numerous editorial/grammatical/spelling
3234 corrections, and several new informative examples. This appendix describes
3235 minor functional changes from the <a
3236 href="http://www.w3.org/TR/2004/CR-css3-ui-20040511/">Candidate
3237 Recommendation (CR) of 11 May 2004</a> that were made to reflect
3238 implementer adoption (or lack thereof) in the seven years since. In
3239 particular, changes since the CR fall into one of three categories:
3241 <ul>
3242 <li>Minor refinements to features based on implementation experience.
3243 <!-- e.g. cursor applying to border, padding, content areas -->
3245 <li>Dropping features that were not implemented, or were insufficiently
3246 implemented to exit CR.</li>
3247 <!-- e.g. System Appearance -->
3249 <li>Adding a small number of new but already interoperably implemented
3250 features. <!-- e.g. text-overflow, ime-mode -->
3251 </ul>
3253 <h3 class=no-num id=changes-list>List of substantial changes</h3>
3255 <ul>
3256 <li>System Appearance has been dropped, including appearance values &
3257 property, and system fonts / extension of the ‘<code
3258 class=property>font</code>’ property shorthand.
3260 <li>The ::selection pseudo-element has been dropped since it was dropped
3261 from Selectors after testing found interoperability problems and further
3262 details to explore/define.
3264 <li>‘<a href="#box-sizing0"><code class=css><span
3265 class=property>box-sizing</span></code></a>’ property. Added ‘<code
3266 class=property>padding-box</code>’ value.
3268 <li>‘<a href="#cursor0"><code class=css><span
3269 class=property>cursor</span></code></a>’ property. Added detail about
3270 applying to the border, padding, and content areas of the element.
3272 <li>‘<a href="#ime-mode"><code class=css><span
3273 class=property>ime-mode</span></code></a>’ property - new!
3275 <li>‘<a href="#text-overflow0"><code class=css><span
3276 class=property>text-overflow</span></code></a>’ property - new!
3277 </ul>
3279 <h2 class=no-num id=appendix-d.-default-style-sheet-addition>Appendix D.
3280 Default style sheet additions for HTML</h2>
3282 <p>This appendix is <em>informative</em>.
3284 <p>Potential additions to the base style sheet to express HTML form
3285 controls, and a few dynamic presentation attributes:
3287 <pre class=html4ss>
3289 :enabled:focus {
3290 outline: 2px inset;
3291 }
3293 button,
3294 input[type=button],
3295 input[type=reset],
3296 input[type=submit],
3297 input[type=checkbox],
3298 input[type=radio],
3299 textarea,
3300 input,
3301 input[type=text],
3302 input[type=hidden],
3303 input[type=password],
3304 input[type=image]
3305 {
3306 display: inline-block;
3307 white-space: nowrap;
3308 }
3310 button
3311 {
3312 /* white space handling of BUTTON tags in particular */
3313 white-space:normal;
3314 }
3316 input[type=reset]
3317 {
3318 /* default content of HTML4/XHTML1 input type=reset button */
3319 content: "Reset";
3320 }
3322 input[type=submit]
3323 {
3324 /* default content of HTML4/XHTML1 input type=submit button */
3325 content: "Submit";
3326 }
3328 input[type=button],
3329 input[type=reset][value],
3330 input[type=submit][value]
3331 {
3332 /* text content/labels of HTML4/XHTML1 "input" buttons */
3333 content: attr(value);
3334 }
3336 textarea
3337 {
3338 /* white space handling of TEXTAREA tags in particular */
3339 white-space:pre-wrap;
3340 }
3342 input[type=hidden]
3343 {
3344 /* appearance of the HTML4/XHTML1 hidden text field in particular */
3345 display: none;
3346 }
3348 input[type=image]
3349 {
3350 display: inline-block;
3351 content: attr(src,url);
3352 border: none;
3353 }
3355 select[size]
3356 {
3357 /* HTML4/XHTML1 <select> w/ size more than 1 - appearance of list */
3358 display: inline-block;
3359 height: attr(size,em);
3360 }
3362 select,select[size=1]
3363 {
3364 /* HTML4/XHTML1 <select> without size, or size=1 - popup-menu */
3365 display: inline-block;
3366 height: 1em;
3367 overflow: hidden;
3368 }
3370 select[size]:active
3371 {
3372 /* active HTML4/XHTML <select> w/ size more than 1 - appearance of active list */
3373 display: inline-block;
3374 }
3376 optgroup,option
3377 {
3378 display: block;
3379 white-space: nowrap;
3380 }
3382 optgroup[label],option[label]
3383 {
3384 content: attr(label);
3385 }
3387 option[selected]::before
3388 {
3389 display: inline;
3390 content: check;
3391 }
3393 *[tabindex] { nav-index:attr(tabindex,number) }
3396 /* Though FRAME resizing is not directly addressed by this specification,
3397 the following rules may provide an approximation of reasonable behavior. */
3399 /*
3401 frame { resize:both }
3402 frame[noresize] { resize:none }
3404 */
3406 </pre>
3408 <h2 class=no-num id=appendix-e-test-suite>Appendix E: Test Suite</h2>
3410 <p>This appendix is <em>informative</em>.
3412 <p> This specification shall refer to a test suite written according to the
3413 <a href="http://www.w3.org/Style/CSS/Test/testsuitedocumentation">CSS Test
3414 Suite Documentation</a> and following the <a
3415 href="http://www.w3.org/Style/CSS/Test/guidelines.html">CSS2.1 Test Case
3416 Authoring Guidelines</a>. The test suite shall allow user agents to verify
3417 their basic conformance to the specification. This test suite does not
3418 pretend to be exhaustive and does not cover all possible combinations of
3419 user interface related features. These tests will be made available from
3420 the <a href="http://www.w3.org/Style/CSS/Test/">CSS Test Suites</a> home
3421 page.
3423 <p>Related issue: <a
3424 href="http://wiki.csswg.org/spec/css3-ui#issue-1">1</a>.
3426 <h2 class=no-num id=index>Index</h2>
3428 <p>This appendix is <em>informative</em>.</p>
3429 <!--begin-index-->
3431 <ul class=indexlist>
3432 <li>box-sizing, <a href="#box-sizing0"
3433 title="section 6.1."><strong>6.1.</strong></a>
3435 <li>content, <a href="#content"
3436 title="section 5.1."><strong>5.1.</strong></a>
3438 <li>cursor, <a href="#cursor0"
3439 title="section 9.1.1."><strong>9.1.1.</strong></a>
3441 <li>icon, <a href="#icon" title="section 5.2."><strong>5.2.</strong></a>
3443 <li>ime-mode, <a href="#ime-mode"
3444 title="section 9.2.3."><strong>9.2.3.</strong></a>
3446 <li>invert, <a href="#invert"
3447 title="section 7.4."><strong>7.4.</strong></a>
3449 <li>MAY, <a href="#may" title="section 2.1."><strong>2.1.</strong></a>
3451 <li>MUST, <a href="#must" title="section 2.1."><strong>2.1.</strong></a>
3453 <li>MUST NOT, <a href="#must-not"
3454 title="section 2.1."><strong>2.1.</strong></a>
3456 <li>nav-down, <a href="#nav-down"
3457 title="section 9.2.2."><strong>9.2.2.</strong></a>
3459 <li>nav-index, <a href="#nav-index0"
3460 title="section 9.2.1."><strong>9.2.1.</strong></a>
3462 <li>nav-left, <a href="#nav-left"
3463 title="section 9.2.2."><strong>9.2.2.</strong></a>
3465 <li>nav-right, <a href="#nav-right"
3466 title="section 9.2.2."><strong>9.2.2.</strong></a>
3468 <li>nav-up, <a href="#nav-up"
3469 title="section 9.2.2."><strong>9.2.2.</strong></a>
3471 <li>OPTIONAL, <a href="#optional"
3472 title="section 2.1."><strong>2.1.</strong></a>
3474 <li>outline, <a href="#outline0"
3475 title="section 7.1."><strong>7.1.</strong></a>
3477 <li>outline-color, <a href="#outline-color0"
3478 title="section 7.4."><strong>7.4.</strong></a>
3480 <li>outline-offset, <a href="#outline-offset0"
3481 title="section 7.5."><strong>7.5.</strong></a>
3483 <li>outline-style, <a href="#outline-style0"
3484 title="section 7.3."><strong>7.3.</strong></a>
3486 <li>outline-width, <a href="#outline-width0"
3487 title="section 7.2."><strong>7.2.</strong></a>
3489 <li>RECOMMENDED, <a href="#recommended"
3490 title="section 2.1."><strong>2.1.</strong></a>
3492 <li>REQUIRED, <a href="#required"
3493 title="section 2.1."><strong>2.1.</strong></a>
3495 <li>resize, <a href="#resize0"
3496 title="section 8.1."><strong>8.1.</strong></a>
3498 <li>SHALL, <a href="#shall" title="section 2.1."><strong>2.1.</strong></a>
3500 <li>SHALL NOT, <a href="#shall-not"
3501 title="section 2.1."><strong>2.1.</strong></a>
3503 <li>SHOULD, <a href="#should"
3504 title="section 2.1."><strong>2.1.</strong></a>
3506 <li>SHOULD NOT, <a href="#should-not"
3507 title="section 2.1."><strong>2.1.</strong></a>
3509 <li>text-overflow, <a href="#text-overflow0"
3510 title="section 8.2."><strong>8.2.</strong></a>
3512 <li>text-overflow:clip, <a href="#clip"
3513 title="section 8.2."><strong>8.2.</strong></a>
3515 <li>text-overflow:ellipsis, <a href="#ellipsis"
3516 title="section 8.2."><strong>8.2.</strong></a>
3518 <li>text-overflow:<string>, <a href="#ltstringgt"
3519 title="section 8.2."><strong>8.2.</strong></a>
3520 </ul>
3521 <!--end-index-->
3523 <h2 class=no-num id=property-index>Property index</h2>
3525 <p>This appendix is <em>informative</em>.</p>
3526 <!--begin-properties-->
3528 <table class=proptable>
3529 <thead>
3530 <tr>
3531 <th>Property
3533 <th>Values
3535 <th>Initial
3537 <th>Applies to
3539 <th>Inh.
3541 <th>Percentages
3543 <th>Media
3545 <tbody>
3546 <tr>
3547 <th><a class=property href="#box-sizing0">box-sizing</a>
3549 <td>content-box | padding-box | border-box | inherit
3551 <td>content-box
3553 <td>all elements that accept width or height
3555 <td>no
3557 <td>N/A
3559 <td>visual
3561 <tr>
3562 <th><a class=property href="#content">content</a>
3564 <td>
3566 <td>same as CSS 2.1
3568 <td>same as CSS 2.1
3570 <td>same as CSS 2.1
3572 <td>same as CSS 2.1
3574 <td>same as CSS 2.1
3576 <tr>
3577 <th><a class=property href="#cursor0">cursor</a>
3579 <td>[ [<uri> [<x> <y>]?,]* [ auto | default | none |
3580 context-menu | help | pointer | progress | wait | cell | crosshair |
3581 text | vertical-text | alias | copy | move | no-drop | not-allowed |
3582 e-resize | n-resize | ne-resize | nw-resize | s-resize | se-resize |
3583 sw-resize | w-resize | ew-resize | ns-resize | nesw-resize |
3584 nwse-resize | col-resize | row-resize | all-scroll | zoom-in | zoom-out
3585 ] ] | inherit
3587 <td>auto
3589 <td>all elements
3591 <td>yes
3593 <td>N/A
3595 <td>visual, interactive
3597 <tr>
3598 <th><a class=property href="#icon">icon</a>
3600 <td>auto | <uri> [, <uri>]* | inherit
3602 <td>auto
3604 <td>all elements
3606 <td>no
3608 <td>N/A
3610 <td>all
3612 <tr>
3613 <th><a class=property href="#ime-mode">ime-mode</a>
3615 <td>auto | normal | active | inactive | disabled | inherit
3617 <td>auto
3619 <td>text fields
3621 <td>no
3623 <td>N/A
3625 <td>interactive
3627 <tr>
3628 <th><a class=property href="#nav-down">nav-down</a>
3630 <td>auto | <id> [ current | root | <target-name> ]? |
3631 inherit
3633 <td>auto
3635 <td>all enabled elements
3637 <td>no
3639 <td>N/A
3641 <td>interactive
3643 <tr>
3644 <th><a class=property href="#nav-index0">nav-index</a>
3646 <td>auto | <number> | inherit
3648 <td>auto
3650 <td>all enabled elements
3652 <td>no
3654 <td>n/a
3656 <td>interactive
3658 <tr>
3659 <th><a class=property href="#nav-left">nav-left</a>
3661 <td>auto | <id> [ current | root | <target-name> ]? |
3662 inherit
3664 <td>auto
3666 <td>all enabled elements
3668 <td>no
3670 <td>N/A
3672 <td>interactive
3674 <tr>
3675 <th><a class=property href="#nav-right">nav-right</a>
3677 <td>auto | <id> [ current | root | <target-name> ]? |
3678 inherit
3680 <td>auto
3682 <td>all enabled elements
3684 <td>no
3686 <td>N/A
3688 <td>interactive
3690 <tr>
3691 <th><a class=property href="#nav-up">nav-up</a>
3693 <td>auto | <id> [ current | root | <target-name> ]? |
3694 inherit
3696 <td>auto
3698 <td>all enabled elements
3700 <td>no
3702 <td>N/A
3704 <td>interactive
3706 <tr>
3707 <th><a class=property href="#outline0">outline</a>
3709 <td>[ <‘outline-color’> || <‘outline-style’> ||
3710 <‘outline-width’> ] | inherit
3712 <td>see individual properties
3714 <td>all elements
3716 <td>no
3718 <td>N/A
3720 <td>visual
3722 <tr>
3723 <th><a class=property href="#outline-color0">outline-color</a>
3725 <td><color> | invert | inherit
3727 <td>invert
3729 <td>all elements
3731 <td>no
3733 <td>N/A
3735 <td>visual
3737 <tr>
3738 <th><a class=property href="#outline-offset0">outline-offset</a>
3740 <td><length> | inherit
3742 <td>0
3744 <td>all elements
3746 <td>no
3748 <td>N/A
3750 <td>visual
3752 <tr>
3753 <th><a class=property href="#outline-style0">outline-style</a>
3755 <td>auto | <border-style> | inherit
3757 <td>none
3759 <td>all elements
3761 <td>no
3763 <td>N/A
3765 <td>visual
3767 <tr>
3768 <th><a class=property href="#outline-width0">outline-width</a>
3770 <td><border-width> | inherit
3772 <td>medium
3774 <td>all elements
3776 <td>no
3778 <td>N/A
3780 <td>visual
3782 <tr>
3783 <th><a class=property href="#resize0">resize</a>
3785 <td>none | both | horizontal | vertical | inherit
3787 <td>none
3789 <td>elements with ‘overflow’ other than visible
3791 <td>no
3793 <td>N/A
3795 <td>visual
3797 <tr>
3798 <th><a class=property href="#text-overflow0">text-overflow</a>
3800 <td>( clip | ellipsis | <string> ){1,2} | inherit
3802 <td>clip
3804 <td>block containers
3806 <td>no
3808 <td>N/A
3810 <td>visual
3811 </table>
3812 <!--end-properties-->
3813 </html>
3814 <!-- Keep this comment at the end of the file
3815 Local variables:
3816 mode: sgml
3817 sgml-declaration:"~/SGML/HTML4.decl"
3818 sgml-default-doctype-name:"html"
3819 sgml-minimize-attributes:t
3820 sgml-nofill-elements:("pre" "style" "br")
3821 sgml-live-element-indicator:t
3822 End:
3823 -->
