Thu, 07 Feb 2013 23:25:50 -0800
[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>) <<a |
tantek@4232 | 98 | class="u-email email" |
tantek@1906 | 99 | href="mailto:tantek@cs.stanford.edu">tantek@cs.stanford.edu</a>> |
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: <string> |
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 | & 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 | <input> |
tantek@1904 | 916 | <label>Zip code<label> |
tantek@1904 | 917 | <em><input::value/></em> |
tantek@1904 | 918 | </input> |
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 | <html:table xforms:repeat-nodeset="..."> |
tantek@1904 | 1004 | <html:tr> |
tantek@1904 | 1005 | <html:td><xforms:input ref="..."/><xforms:input ref="..."/></html:td> |
tantek@1904 | 1006 | </html:tr> |
tantek@1904 | 1007 | </html:table> |
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 | <html:table xforms:repeat-nodeset="..."> |
tantek@1904 | 1024 | <em><html:tr::repeat-item></em> |
tantek@1904 | 1025 | <html:tr> |
tantek@1904 | 1026 | <html:td><xforms:input ref="..."/><xforms:input ref="..."/></html:td> |
tantek@1904 | 1027 | </html:tr> |
tantek@1904 | 1028 | <em></html:tr::repeat-item></em> |
tantek@1904 | 1029 | <em><html:tr::repeat-item></em> |
tantek@1904 | 1030 | <html:tr> |
tantek@1904 | 1031 | <html:td><xforms:input ref="..."/><xforms:input ref="..."/></html:td> |
tantek@1904 | 1032 | </html:tr> |
tantek@1904 | 1033 | <em></html:tr::repeat-item></em> |
tantek@1904 | 1034 | <em><html:tr::repeat-index></em> |
tantek@1904 | 1035 | <html:tr> |
tantek@1904 | 1036 | <html:td><xforms:input ref="..."/><xforms:input ref="..."/></html:td> |
tantek@1904 | 1037 | </html:tr> |
tantek@1904 | 1038 | <em></html:tr::repeat-index></em> |
tantek@1904 | 1039 | </html:table> |
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 | <uri> [, <uri>]* | 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><uri> |
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 <uri> 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 | <div class="container"> |
tantek@1904 | 1359 | <div class="split">This div occupies the left half.</div> |
tantek@1904 | 1360 | <div class="split">This div occupies the right half.</div> |
tantek@1904 | 1361 | </div> |
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><‘<a href="#outline-color0"><code |
tantek@7312 | 1414 | class=property>outline-color</code></a>’></span> || <span |
tantek@7312 | 1415 | class=property><‘<a href="#outline-style0"><code |
tantek@7312 | 1416 | class=property>outline-style</code></a>’></span> || <span |
tantek@7312 | 1417 | class=property><‘<a href="#outline-width0"><code |
tantek@7312 | 1418 | class=property>outline-width</code></a>’></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><border-width></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><border-style></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><color></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 | <color> 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><length> | 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><length> 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 & |
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><string></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:<string>"> |
tantek@3117 | 2086 | <var><string></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 <string> 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><div> |
tantek@7312 | 2175 | CSS IS AWESOME, YES |
tantek@2337 | 2176 | </div> |
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><div style="<a |
tantek@3733 | 2190 | href="#clip"><strong>text-overflow:clip;</strong></a> overflow:hidden"> |
tantek@7312 | 2191 | CSS IS AWESOME, YES |
tantek@2337 | 2192 | </div> |
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><div style="<a |
tantek@3733 | 2206 | href="#ellipsis"><strong>text-overflow:ellipsis;</strong></a> overflow:hidden"> |
tantek@7312 | 2207 | CSS IS AWESOME, YES |
tantek@2337 | 2208 | </div> |
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><div style="<a |
tantek@3733 | 2222 | href="#ellipsis"><strong>text-overflow:ellipsis;</strong></a> overflow:hidden"> |
tantek@2373 | 2223 | NESTED |
tantek@2373 | 2224 | <p>PARAGRAPH</p> |
tantek@2373 | 2225 | WON'T ELLIPSE. |
tantek@2373 | 2226 | </div> |
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> [ [<uri> [<x> <y>]?,]* <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><uri> |
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 <x> and <y> 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><x> |
tantek@3117 | 2376 | |
tantek@3117 | 2377 | <dt><y> |
tantek@1906 | 2378 | |
tantek@1906 | 2379 | <dd> Each is a <number>. 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 | <number> | 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><number> |
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 | <id> [ current | root | <target-name> ]? | |
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><id> |
tantek@1906 | 2772 | |
tantek@1906 | 2773 | <dd> |
tantek@7312 | 2774 | <p>The <id> 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 <id> 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><target-name> |
tantek@1906 | 2785 | |
tantek@1906 | 2786 | <dd> The <target-name> 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><input type="text" name="name" value="initial value" style="ime-mode: disabled"> |
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 & |
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 <select> 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 <select> 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 <select> 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:<string>, <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>[ [<uri> [<x> <y>]?,]* [ 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 | <uri> [, <uri>]* | 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 | <id> [ current | root | <target-name> ]? | |
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 | <number> | 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 | <id> [ current | root | <target-name> ]? | |
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 | <id> [ current | root | <target-name> ]? | |
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 | <id> [ current | root | <target-name> ]? | |
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>[ <‘outline-color’> || <‘outline-style’> || |
tantek@7312 | 3710 | <‘outline-width’> ] | 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><color> | 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><length> | 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 | <border-style> | 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><border-width> | 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 | <string> ){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 | --> |