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.

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

mercurial