8000 csswg-drafts/css-ui/Overview.html at 61d4655ea9a5ba68f0b16a5fcb6fc2674dacf90f · w3c/csswg-drafts · GitHub
Skip to content
< 10000 /div>

Overview.html

Latest commit

 

History

History
3800 lines (2796 loc) · 120 KB

Overview.html

File metadata and controls

3800 lines (2796 loc) · 120 KB
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head profile="http://dublincore.org/documents/2008/08/04/dc-html/ ">
<meta content="text/html; charset=utf-8" http-equiv=Content-Type>
<meta content="text/css" http-equiv=Content-Style-Type>
<meta content=en http-equiv=Content-Language>
<meta content="Tantek Çelik" lang=tr name=author>
<title>CSS Basic User Interface Module Level 3 (CSS3 UI)</title>
<link href="http://purl.org/dc/terms/" rel=schema.dcterms>
<link href="http://www.w3.org/Consortium/Legal/ipr-notice#Copyright"
rel=dcterms.rights>
<meta content="CSS Basic User Interface Module Level 3 (CSS3 UI)"
name=dcterms.title>
<meta content=text name=dcterms.type>
<meta content=2013-11-28 name=dcterms.date>
<meta content=" Tantek Çelik" name=dcterms.creator>
<meta content=W3C name=dcterms.publisher>
<meta content="http://dev.w3.org/csswg/css3-ui/" name=dcterms.identifier>
<link href="../default.css" rel=stylesheet title=Default type="text/css">
<style type="text/css">
.subtoc ul,.subtoc ol { list-style-type: none }
ol.objectives { list-style: decimal }
ol.issues { list-style: decimal }
.html4ss { font-size:90%}
h1 {font-size:200%; clear:both}
h2 {font-size:170%; clear:both}
h3 {font-size:150%; clear:both}
h4 {font-size:130%}
h5 {font-size:120%}
h6 {font-size:110%}
h1+h2 {page-break-before: avoid}
h2 {page-break-before: always}
dd p:first-child { margin-top:0 }
</style>
<link href="http://www.w3.org/StyleSheets/TR/W3C-ED" rel=stylesheet
type="text/css"><!-- toggle to W3C-WD for TR publication, W3C-ED for editing -->
<body class=h-entry>
<div class=head> <a href="http://www.w3.org/"><img alt=W3C height=48
src="http://www.w3.org/Icons/w3c_home" width=72> </a>
<h1 class=p-name>CSS Basic User Interface Module Level 3 (CSS3 UI)</h1>
<h2 class="no-num no-toc">Editor's Draft <time class=dt-updated
datetime=20131128>28 November 2013</time></h2>
<dl>
<dt>This version:</dt>
<!-- TR "This version". Update "WD" below as needed to CR/PR/REC -->
<!-- <dd><a href="http://www.w3.org/TR/2013/WD-css3-ui-20131128/">
http://www.w3.org/TR/2013/WD-css3-ui-20131128/</a>
</dd> -->
<!-- editor's draft "This version" -->
<dd><a class=u-url href="http://dev.w3.org/csswg/css3-ui/">
http://dev.w3.org/csswg/css3-ui/</a>
<dt>Latest version:
<dd><a
href="http://www.w3.org/TR/css3-ui/">http://www.w3.org/TR/css3-ui/</a>
<dt>Editor's draft:
<dd><a
href="http://dev.w3.org/csswg/css3-ui/">http://dev.w3.org/csswg/css3-ui/</a>
<dt>Previous version:
<dd><a href="http://www.w3.org/TR/2012/WD-css3-ui-20120117/"
rel=previous>http://www.w3.org/TR/2012/WD-css3-ui-20120117/</a>
<dt>Issues Tracking:
<dd><a href="http://wiki.csswg.org/spec/css3-ui"
rel=issues>http://wiki.csswg.org/spec/css3-ui</a>
<dt>Feedback:
<dd><a
href="mailto:www-style@w3.org?subject=%5Bcss-ui%5D%20feedback">www-style@w3.org</a>
with subject line “<kbd>[css-ui] <var>… message topic
…</var></kbd>” (<a
href="http://lists.w3.org/Archives/Public/www-style/"
rel=discussion>archives</a>)
<dt>Editor:
<dd class="p-author h-card vcard"> <a class="p-name fn u-url url"
href="http://tantek.com" lang=tr rel=author> Tantek Çelik</a> (<a
class="company h-org org" href="http://www.mozilla.org/">Mozilla
Foundation</a>, and before at <a
href="http://www.microsoft.com/">Microsoft Corporation</a>) &lt;<a
class="u-email email"
href="mailto:tantek@cs.stanford.edu">tantek@cs.stanford.edu</a>&gt;
</dl>
<!--begin-copyright-->
<p class=copyright><a
href="http://www.w3.org/Consortium/Legal/ipr-notice#Copyright"
rel=license>Copyright</a> © 2013 <a href="http://www.w3.org/"><abbr
title="World Wide Web Consortium">W3C</abbr></a><sup>®</sup> (<a
href="http://www.csail.mit.edu/"><abbr
title="Massachusetts Institute of Technology">MIT</abbr></a>, <a
href="http://www.ercim.eu/"><abbr
title="European Research Consortium for Informatics and Mathematics">ERCIM</abbr></a>,
<a href="http://www.keio.ac.jp/">Keio</a>, <a
href="http://ev.buaa.edu.cn/">Beihang</a>), All Rights Reserved. W3C <a
href="http://www.w3.org/Consortium/Legal/ipr-notice#Legal_Disclaimer">liability</a>,
<a
href="http://www.w3.org/Consortium/Legal/ipr-notice#W3C_Trademarks">trademark</a>
and <a 7DDD
href="http://www.w3.org/Consortium/Legal/copyright-documents">document
use</a> rules apply.</p>
<!--end-copyright-->
<hr title="Separator for header">
</div>
<h2 class="no-num no-toc" id=abstract>Abstract</h2>
<p>This section is <em>informative</em>.
<p> <span class=p-summary> This specification describes user interface
related selectors, properties and values that are proposed for CSS
level 3 to style HTML and XML (including XHTML). It includes and extends
user interface related features from the selectors, properties and values
of CSS level 2 revision 1 and Selectors specifications. </span> CSS
(Cascading Style Sheets) is a language for describing the rendering of
HTML and XML documents on screen, on paper, in speech, etc. It uses
various selectors, properties and values to style basic user interface
elements in a document.
<h2 class="no-num no-toc" id=status style="page-break-before:auto">Status
of this document</h2>
<!--begin-status-->
<p>This is a public copy of the editors' draft. It is provided for
discussion only and may change at any moment. Its publication here does
not imply endorsement of its contents by W3C. Don't cite this document
other than as work in progress.
<p>The (<a
href="http://lists.w3.org/Archives/Public/www-style/">archived</a>) public
mailing list <a
href="mailto:www-style@w3.org?Subject=%5Bcss3-ui%5D%20PUT%20SUBJECT%20HERE">
www-style@w3.org</a> (see <a
href="http://www.w3.org/Mail/Request">instructions</a>) is preferred for
discussion of this specification. When sending e-mail, please put the text
“css3-ui” in the subject, preferably like this:
“[<!---->css3-ui<!---->] <em>…summary of comment…</em>”
<p>This document was produced by the <a
href="http://www.w3.org/Style/CSS/members">CSS Working Group</a> (part of
the <a href="http://www.w3.org/Style/">Style Activity</a>).
<p>This document was produced by a group operating under the <a
href="http://www.w3.org/Consortium/Patent-Policy-20040205/">5 February
2004 W3C Patent Policy</a>. W3C maintains a <a
href="http://www.w3.org/2004/01/pp-impl/32061/status"
rel=disclosure>public list of any patent disclosures</a> made in
connection with the deliverables of the group; that page also includes
instructions for disclosing a patent. An individual who has actual
knowledge of a patent which the individual believes contains <a
href="http://www.w3.org/Consortium/Patent-Policy-20040205/#def-essential">Essential
Claim(s)</a> must disclose the information in accordance with <a
href="http://www.w3.org/Consortium/Patent-Policy-20040205/#sec-Disclosure">section
6 of the W3C Patent Policy</a>.</p>
<!--end-status-->
<p>This specification is a <strong>Last Call Working Draft</strong>,
although it was previously a Candidate Recommendation. It has been
returned to Last Call Working Draft because this draft removes features
that were not implemented sufficiently to advance to Proposed
Recommendation, and had not been previously listed as at risk, as <a
href="http://www.w3.org/2005/10/Process-20051014/tr.html#cfi">required</a>
by the W3C Process. This draft also adds a couple of new properties and
values. See <a href="#changes">Appendix C. Changes</a> for further
details. <!-- This specification may advance directly to Proposed
Recommendation following the last call, depending on comments and
implementation reports. -->
All persons are encouraged to review this document and send comments to
the <a href="http://lists.w3.org/Archives/Public/www-style/">www-style
mailing list</a> as described above. The <strong>deadline for
comments</strong> is four weeks after the date of publication in the
header or 14 February 2012, whichever is sooner.
<h3 class="no-num no-toc" id=crec>Candidate Recommendation Exit Criteria</h3>
<p>For this specification to enter the Proposed Recommendation stage, the
following conditions shall be met:
<ol>
<li>
<p>There must be at least two interoperable implementations for every
feature. For the purposes of this criterion, we define the following
terms:
<dl>
<dt>feature
<dd>
<p> A section or subsection of the specification.
<dt>interoperable
<dd>
<p>passing the respective test cases in the test suite, or, if the
implementation is not a web browser, equivalent tests. Every relevant
test in the test suite should have an equivalent test created if such
a user agent (UA) is to be used to claim interoperability. In addition
if such a UA is to be used to claim interoperability, then there must
one or more additional UAs which can also pass those equivalent tests
in the same way for the purpose of interoperability. The equivalent
tests must be made publicly available for the purposes of peer review.
<dt>implementation
<dd>
<p>a user agent which:
<ol class=inline>
<li>implements the feature.
<li>is available (i.e. publicly downloadable or available through some
other public point of sale mechanism). This is the "show me"
requirement.
<li>is shipping (i.e. development, private or unofficial versions are
insufficient).
<li>is not experimental (i.e. is intended for a wide audience and
could be used on a daily basis).
</ol>
</dl>
<li>
<p>A minimum of six months of the CR period must have elapsed. This is to
ensure that enough time is given for any remaining major errors to be
caught.
<li>
<p>The CR period will be extended if implementations are slow to appear.
<li>
<p>Features that are <em>at risk</em> (see the below list) will be
dropped (thus reducing the list of "all" features mentioned above) if
two or more interoperable implementations of those features are not
found by the end of the CR period, or if sufficient and adequate tests
(by judgment of the Working Group) have not been produced for those
features by the end of the CR period.
</ol>
<p>A <a href="/Style/CSS/Test/">test suite</a> and a <a
href="/Style/css3-updates/css3-ui-implementations">report on
implementations</a> will be provided before the document becomes a
Proposed Recommendation.
<h3 class="no-num no-toc" id=atrisk>Features at risk</h3>
<p>The Working Group has identified the following features as at risk of
being removed from CSS Basic User Interface Module Level 3 when exiting
CR. Implementors are urged to implement these features, if they wish to
see these features remain in this specification. All other features are
either defined in a normative reference (e.g. CSS 2.1 <a href="#ref-CSS21"
rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a> or Selectors <a
href="#ref-SELECT" rel=biblioentry>[SELECT]<!--{{!SELECT}}--></a>) or are
believed to have two or more implementations, and thus will not be dropped
without returning to last call.
<ul><!--
At risk due to only one implementation, or obsolete dependency:
XForms is defunct on the web.
<li>XForms needs: :default :valid :invalid :in-range :out-of-range :required :optional :read-only :read-write ::value ::choices ::repeat-item ::repeat-index</li>
<li>box-sizing: padding-box - only FF supports in prefixed version</li>
<li>ime-mode: new - not sure about IE5+ vs FF3+ interop
</li>
<li>nav-index, nav-up, nav-down, nav-right, nav-left, properties
implemented for sure only by Opera, http://www.opera.com/docs/specs/presto22/#css
possibly obsolete: Tasman v1 internal implementation
possibly current: MSTV Tasman
required (depended on) by non-web DVB-HTML, ATSC standards
- unknown if any DVB-HTML or ATSC simulators
</li>
Not at risk:
<li>CSS2.1: :hover :active :focus</li>
<li>Selectors: :enabled :disabled :checked</li>
<li>:indeterminate implemented by FF3.6, IE9, Opera 10.6, Saf3</li>
<li>box-sizing implemented by IE5/Mac, Opera
-moz-box-sizing implemented by Mozilla
</li>
<li>outline, outline-width, outline-color, outline-style all in CSS 2.1</li>
<li>outline-offset property
implemented by Safari 1.2
</li>
<li>cursor property:
CSS2.1: auto | default | help | pointer | wait | crosshair | text |
e-resize | n-resize | ne-resize | nw-resize | s-resize | se-resize | sw-resize | w-resize
IE5/Mac implements: none | progress | cell
IE6/Windows implements: <uri> | progress | not-allowed | no-drop | vertical-text | all-scroll | col-resize | row-resize | move |
Mozilla implements: progress | cell(as -moz-cell) | alias(as -moz-alias) | copy(as -moz-copy) | context-menu(as -moz-context-menu) |
freedesktop.org copied all the cursors from the CSS3-UI LC Working Draft
by FredrikHoeglund - 14 Oct 2003
http://freedesktop.org/Standards/cursor-spec
</li>
<li>'cursor' property values: ew-resize | ns-resize | nesw-resize | nwse-resize
implemented by Firefox and Safari
</li>
<li>'resize' property
implemented by Firefox 4 and Safari
</li>
-->
<li>::value ::choices ::repeat-item ::repeat-index pseudo-elements
<li>‘<a href="#box-sizing0"><code
class=property>box-sizing</code></a>’ property value: padding-box
<li>‘<a href="#content"><code class=property>content</code></a>’
property value: icon
<li>‘<a href="#icon"><code class=property>icon</code></a>’ property
<li>‘<a href="#ime-mode"><code class=property>ime-mode</code></a>’
property
<li>‘<a href="#nav-index0"><code class=property>nav-index</code></a>’
property
<li>‘<a href="#text-overflow0"><code
class=property>text-overflow</code></a>’ property value: &lt;string&gt;
<li>‘<a href="#text-overflow0"><code
class=property>text-overflow</code></a>’ property 2-value syntax and
definition.
</ul>
<h2 class="no-num no-toc" id=summary>Overview</h2>
<p>This section is <em>informative</em>.
<p>This document is one of the "modules" for the upcoming CSS3
specification. It not only describes the user interface related properties
and values that already exist in <a
href="http://www.w3.org/TR/REC-CSS1">CSS1</a> <a href="#ref-CSS1"
rel=biblioentry>[CSS1]<!--{{CSS1}}--></a> and <a
href="http://www.w3.org/TR/CSS21">CSS2.1</a> <a href="#ref-CSS21"
rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>, but introduces new
properties and values for CSS3 as well. The Working Group doesn't expect
that all implementations of CSS3 will implement all properties or values.
Instead, there will probably be a small number of variants of CSS3,
so-called "profiles".
<p>This document is the result of the merging of relevant parts of the
following Recommendations and Working Drafts, and the addition of some new
features.
<ul>
<li>Cascading Style Sheets, level 2, revision 1 <a href="#ref-CSS21"
7DDD rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>
<li><a href="http://www.w3.org/TR/2000/WD-css3-userint-20000216">User
Interface for CSS3 (16 February 2000)</a> <a href="#ref-CSSUI"
rel=biblioentry>[CSSUI]<!--{{CSSUI}}--></a>
</ul>
<p>This specification contains:
<ul>
<li>Pseudo-classes and pseudo-elements to style user interface states and
element fragments respectively.
<li>Additions to the user interface features in <a
href="http://www.w3.org/TR/CSS21">CSS2.1</a>.
<li>Directional focus navigation properties.
<li>A mechanism to allow the styling of elements as icons for
accessibility.
</ul>
<h2 class="no-num no-toc" id=contents>Table of Contents</h2>
<!--begin-toc-->
<ul class=toc>
<li><a href="#intro"><span class=secno>1. </span>Introduction</a>
<ul class=toc>
<li><a href="#purpose"><span class=secno>1.1. </span>Purpose</a>
</ul>
<li><a href="#conformance"><span class=secno>2. </span>Conformance</a>
<ul class=toc>
<li><a href="#definitions"><span class=secno>2.1. </span>Definitions</a>
<li><a href="#classes-of-products"><span class=secno>2.2. </span>Classes
of products</a>
<li><a href="#extensions"><span class=secno>2.3. </span>Extensions</a>
</ul>
<li><a href="#dependencies-on-other-modules"><span class=secno>3.
</span>Dependencies on other modules</a>
<li><a href="#user-interface-selectors"><span class=secno>4. </span>User
Interface Selectors</a>
<ul class=toc>
<li><a href="#pseudo-classes"><span class=secno>4.1. </span>User
interface states: pseudo-classes</a>
<ul class=toc>
<li><a href="#active"><span class=secno>4.1.1. </span>:active
details</a>
<li><a href="#indeterminate"><span class=secno>4.1.2. </span> The
indeterminate-value pseudo-class ‘<code
class=css>:indeterminate</code>’</a>
<li><a href="#pseudo-default"><span class=secno>4.1.3.
</span>:default</a>
<li><a href="#pseudo-validity"><span class=secno>4.1.4.
</span><span>:valid</span> and <span>:invalid</span></a>
<li><a href="#pseudo-range"><span class=secno>4.1.5.
</span><span>:in-range</span> and <span>:out-of-range</span></a>
<li><a href="#pseudo-required-value"><span class=secno>4.1.6.
</span><span>:required</span> and <span>:optional</span></a>
<li><a href="#pseudo-ro-rw"><span class=secno>4.1.7.
</span><span>:read-only</span> and <span>:read-write</span></a>
</ul>
<li><a href="#pseudo-elements"><span class=secno>4.2. </span>User
interface element fragments: pseudo-elements</a>
<ul class=toc>
<li><a href="#pseudo-value"><span class=secno>4.2.1.
</span>::value</a>
<li><a href="#pseudo-choices"><span class=secno>4.2.2.
</span>::choices</a>
<li><a href="#pseudo-repeat-item"><span class=secno>4.2.3.
</span>::repeat-item</a>
<li><a href="#pseudo-repeat-index"><span class=secno>4.2.4.
</span>::repeat-index</a>
</ul>
</ul>
<li><a href="#element-icons"><span class=secno>5. </span>Element icons</a>
<ul class=toc>
<li><a href="#content-property-addition"><span class=secno>5.1.
</span><span class=property>‘<code
class=property>content</code>’</span> property addition</a>
<li><a href="#icon-property"><span class=secno>5.2. </span><span
class=property>‘<code class=property>icon</code>’</span>
property</a>
</ul>
<li><a href="#box-model-addition"><span class=secno>6. </span>Box Model
addition</a>
<ul class=toc>
<li><a href="#box-sizing"><span class=secno>6.1. </span><span
class=property>‘<code class=property>box-sizing</code>’</span>
property</a>
</ul>
<li><a href="#outline-properties"><span class=secno>7. </span>Outline
properties</a>
<ul class=toc>
<li><a href="#outline"><span class=secno>7.1. </span><span
class=property>‘<code class=property>outline</code>’</span>
property</a>
<li><a href="#outline-width"><span class=secno>7.2. </span><span
class=property>‘<code class=property>outline-width</code>’</span>
property</a>
<li><a href="#outline-style"><span class=secno>7.3. </span><span< 1090E /div>
class=property>‘<code class=property>outline-style</code>’</span>
property</a>
<li><a href="#outline-color"><span class=secno>7.4. </span><span
class=property>‘<code class=property>outline-color</code>’</span>
property</a>
<li><a href="#outline-offset"><span class=secno>7.5. </span><span
class=property>‘<code class=property>outline-offset</code>’</span>
property</a>
</ul>
<li><a href="#resizing-amp-overflow"><span class=secno>8. </span>Resizing
&amp; Overflow</a>
<ul class=toc>
<li><a href="#resize"><span class=secno>8.1. </span><span
class=property>‘<code class=property>resize</code>’</span>
property</a>
<li><a href="#text-overflow"><span class=secno>8.2. </span> Overflow
Ellipsis: the ‘<code class=property>text-overflow</code>’
property</a>
</ul>
<li><a href="#pointing-devices-and-keyboards"><span class=secno>9.
</span>Pointing Devices and Keyboards</a>
<ul class=toc>
<li><a href="#pointer-interaction"><span class=secno>9.1. </span>Pointer
interaction</a>
<ul class=toc>
<li><a href="#cursor"><span class=secno>9.1.1. </span><span
class=property>‘<code class=property>cursor</code>’</span>
property</a>
</ul>
<li><a href="#keyboard"><span class=secno>9.2. </span>Keyboard
control</a>
<ul class=toc>
<li><a href="#nav-index"><span class=secno>9.2.1. </span>Sequential
navigation order: the <span class=property>‘<code
class=property>nav-index</code>’</span> property</a>
<li><a href="#nav-dir"><span class=secno>9.2.2. </span>Directional
focus navigation: the <span class=property>‘<code
class=property>nav-up</code>’</span>, <span class=property>‘<code
class=property>nav-right</code>’</span>, <span
class=property>‘<code class=property>nav-down</code>’</span>,
<span class=property>‘<code
class=property>nav-left</code>’</span> properties</a>
<li><a href="#input-method-editor"><span class=secno>9.2.3.
</span>Input method editor: the <span class=property>‘<code
class=property>ime-mode</code>’</span> property</a>
</ul>
</ul>
<li class=no-num><a href="#acknowledgments">Appendix A.
Acknowledgments</a>
<li class=no-num><a href="#references">Appendix B. Bibiliography</a>
<li class=no-num><a href="#changes">Appendix C. Changes</a>
<ul class=toc>
<li class=no-num><a href="#changes-list">List of substantial changes</a>
</ul>
<li class=no-num><a
href="#appendix-d.-default-style-sheet-addition">Appendix D. Default
style sheet additions for HTML</a>
<li class=no-num><a href="#appendix-e-test-suite">Appendix E: Test
Suite</a>
<li class=no-num><a href="#index">Index</a>
<li class=no-num><a href="#property-index">Property index</a>
</ul>
<!--end-toc-->
<hr>
<h2 id=intro><span class=secno>1. </span>Introduction</h2>
<p> CSS3 is a set of modules, divided up and profiled in order to simplify
the specification, and to allow implementors the flexibility of supporting
the particular modules appropriate for their implementations.
<p> This module describes selectors and CSS properties which enable authors
to style user interface related states, element fragments, properties and
values.
<p><a href="http://www.w3.org/TR/REC-CSS1#anchor-pseudo-classes">Section
2.1 of CSS1</a> <a href="#ref-CSS1"
rel=biblioentry>[CSS1]<!--{{CSS1}}--></a> and <a
href="http://www.w3.org/TR/CSS2/ui.html">Chapter 18 of CSS2</a> <a
href="#ref-CSS2" rel=biblioentry>[CSS2]<!--{{CSS2}}--></a> introduced
several user interface related pseudo-classes, properties and values. <a
href="http://www.w3.org/TR/css3-selectors/#UIstates">Section 6.6.4 of
Selectors</a> <a href="#ref-SELECT"
rel=biblioentry>[SELECT]<!--{{!SELECT}}--></a> also describes several
additional user interface related pseudo-classes (and one pseudo-element).
<p> This Working Draft extends them to provide the ability, through CSS, to
style elements based upon additional user interface states, to style
fragments of user interface elements, and to alter the dynamic
presentation of elements in ways previously only available through
specific HTML4/XHTML1 elements and attributes.
<h3 id=purpose><span class=secno>1.1. </span>Purpose</h3>
<p>The purpose of this specification is to achieve the following
objectives:
<ul>
<li>Extend the user interface features in CSS2.1.
<li>Provide additional CSS mechanisms to augment or replace other dynamic
presentation related features in HTML4/XHTML1.
<li>Introduce directional navigation properties to assist in the
construction of user interfaces which make use of a directional
navigation model.
<li>Introduce properties and values to specify icon presentations for
elements to enhance accessibility.
</ul>
<h2 id=conformance><span class=secno>2. </span>Conformance</h2>
<h3 id=definitions><span class=secno>2.1. </span>Definitions</h3>
<p>The key words <span class=index-def id=must title=MUST>"MUST"</span>,
<span class=index-def id=must-not title="MUST NOT">"MUST NOT"</span>,
<span class=index-def id=required title=REQUIRED>"REQUIRED"</span>, <span
class=index-def id=shall title=SHALL>"SHALL"</span>, <span class=index-def
id=shall-not title="SHALL NOT">"SHALL NOT"</span>, <span class=index-def
id=should title=SHOULD>"SHOULD"</span>, <span class=index-def
id=should-not title="SHOULD NOT">"SHOULD NOT"</span>, <span
class=index-def id=recommended title=RECOMMENDED>"RECOMMENDED"</span>,
<span class=index-def id=may title=MAY>"MAY"</span>, and <span
class=index-def id=optional title=OPTIONAL>"OPTIONAL"</span> in this
document are to be interpreted as described in RFC 2119 (see <a
href="#ref-RFC2119" rel=biblioentry>[RFC2119]<!--{{!RFC2119}}--></a>).
However, for readability, these words do not typically appear in all
uppercase letters in this specification.
<p>Additional key words, e.g. "User agent (UA)", are <a
href="http://www.w3.org/TR/CSS21/conform.html#defs">defined by CSS 2.1</a>
(<a href="#ref-CSS21" rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>,
section 3.1).
<h3 id=classes-of-products><span class=secno>2.2. </span>Classes of
products</h3>
<p>The following classes of products (many of which overlap) should
consider implementing this specification:
<ul>
<li>Web browsers
<li>User agents that implement one or more of the following types of
content: HTML (<a href="#ref-HTML401"
rel=biblioentry>[HTML401]<!--{{HTML401}}--></a>, <a href="#ref-HTML5"
rel=biblioentry>[HTML5]<!--{{HTML5}}--></a>), XHTML (<a
href="#ref-XHTML10" rel=biblioentry>[XHTML10]<!--{{XHTML10}}--></a>, <a
href="#ref-XHTML11" rel=biblioentry>[XHTML11]<!--{{XHTML11}}--></a>),
XForms (e.g. <a href="#ref-XFORMS11"
rel=biblioentry>[XFORMS11]<!--{{XFORMS11}}--></a>), SVG (e.g. <a
href="#ref-SVG10" rel=biblioentry>[SVG10]<!--{{SVG10}}--></a>, <a
href="#ref-SVG11" rel=biblioentry>[SVG11]<!--{{SVG11}}--></a>) or other
content languages that contain forms controls or are intended for user
interaction
<li>User agents that implement one or more levels or modules of CSS (e.g.
<a href="#ref-CSS1" rel=biblioentry>[CSS1]<!--{{CSS1}}--></a>, <a
href="#ref-CSS21" rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>)
</ul>
<h3 id=extensions><span class=secno>2.3. </span>Extensions</h3>
<p>This specification does not define any explicit extension mechanisms. If
an implementation needs to extend the functionality of this specification,
it must follow any/all guidelines and requirements of extensions as
defined in CSS2.1, e.g. <a
href="http://www.w3.org/TR/CSS21/syndata.html#vendor-keywords">Vendor-specific
extensions</a> (<a href="#ref-CSS21"
rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>, section 4.1.2.1).
<h2 id=dependencies-on-other-modules><span class=secno>3.
</span>Dependencies on other modules</h2>
<p> This CSS3 module depends on the following other specifications.
<ul>
<li><a href="#ref-SELECT" rel=biblioentry>[SELECT]<!--{{!SELECT}}--></a>
<li><a href="#ref-CSS3COLOR"
rel=biblioentry>[CSS3COLOR]<!--{{!CSS3COLOR}}--></a>
<li><a href="#ref-CSS21" rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>
</ul>
<!--
<p>It has non-normative (informative) references to the following
other specifications:</p>
<ul>
</ul>
-->
<p> The following work is related to the CSS Basic User Interface Module
Level 3 (CSS3 Basic UI).
<ul>
<li><a href="#ref-HTML401" rel=biblioentry>[HTML401]<!--{{HTML401}}--></a>
<li><a href="#ref-HTML5" rel=biblioentry>[HTML5]<!--{{HTML5}}--></a>
<li><a href="#ref-UAAG10" rel=biblioentry>[UAAG10]<!--{{UAAG10}}--></a>
<li><a href="#ref-XML10" rel=biblioentry>[XML10]<!--{{XML10}}--></a>
<li><a href="#ref-XHTML10" rel=biblioentry>[XHTML10]<!--{{XHTML10}}--></a>
<li><a href="#ref-XHTML11" rel=biblioentry>[XHTML11]<!--{{XHTML11}}--></a>
<li><a href="#ref-XFORMS11"
rel=biblioentry>[XFORMS11]<!--{{XFORMS11}}--></a>
</ul>
<p>This specification does not define what is a form element.
<h2 id=user-interface-selectors><span class=secno>4. </span>User Interface
Selectors</h2>
<h3 id=pseudo-classes><span class=secno>4.1. </span>User interface states:
pseudo-classes</h3>
<p>The Selectors specification <a
href="http://www.w3.org/TR/css3-selectors/#UIstates">defines several user
interface selectors</a> (<a href="#ref-SELECT"
rel=biblioentry>[SELECT]<!--{{!SELECT}}--></a>, sections 6.6.1 and 6.6.4)
which represent user interface states:
<ul>
<li id=psuedo-hover><a
href="http://www.w3.org/TR/css3-selectors/#useraction-pseudos">:hover</a>
<li id=pseudo-active><a
href="http://www.w3.org/TR/css3-selectors/# 2B2 useraction-pseudos">:active</a>
<li id=pseudo-focus><a
href="http://www.w3.org/TR/css3-selectors/#useraction-pseudos">:focus</a>
<li id=pseudo-enabled><a
href="http://www.w3.org/TR/css3-selectors/#enableddisabled">:enabled</a>
<li id=pseudo-disabled><a
href="http://www.w3.org/TR/css3-selectors/#enableddisabled">:disabled</a>
<li id=pseudo-checked><a
href="http://www.w3.org/TR/css3-selectors/#checked">:checked</a>
<li id=pseudo-indeterminate><a
href="http://www.w3.org/TR/css3-selectors/#indeterminate">:indeterminate</a>
</ul>
<p>These pseudo-classes as defined by <a href="#ref-SELECT"
rel=biblioentry>[SELECT]<!--{{!SELECT}}--></a> are included in this
specification by reference.
<p>CSS 2.1 <a href="#ref-CSS21"
rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a> specifies additional details
for some of the selectors mentioned, above and beyond Selectors.
<h4 id=active><span class=secno>4.1.1. </span>:active details</h4>
<p>In addition, on systems with more than one mouse button, :active is
clarified to apply only to the primary or primary activation button
(typically the "left" mouse button), and any aliases thereof.
<h4 id=indeterminate><span class=secno>4.1.2. </span> The
indeterminate-value pseudo-class ‘<code
class=css>:indeterminate</code>’</h4>
<p>The <code>:indeterminate</code> pseudo-class applies to UI elements
whose value is in an indeterminate state. For example, radio and checkbox
elements can be toggled between checked and unchecked states, but are
sometimes in an indeterminate state, neither checked nor unchecked.
Similarly a progress meter can be in an indeterminate state when the
percent completion is unknown.
<p>Like the <code>:checked</code> pseudo-class, <code>:indeterminate</code>
applies to all media. Components of a radio-group initialized with no
pre-selected choice, for example, would be <code>:indeterminate</code>
even in a static display.
<h4 class="no-num no-toc">New user interface state pseudo-classes</h4>
<p>In addition to the above-mentioned pseudo-classes, this specification
introduces several new pseudo-classes to define additional user interface
states.
<ul>
<li>:default
<li>:valid
<li>:invalid
<li>:in-range
<li>:out-of-range
<li>:required
<li>:optional
<li>:read-only
<li>:read-write
</ul>
<p>Specifically, these new states (except for :default) are provided as a
way to style elements which are in the respective states as defined by
XForms <a href="#ref-XFORMS11"
rel=biblioentry>[XFORMS11]<!--{{XFORMS11}}--></a>.
<h4 id=pseudo-default><span class=secno>4.1.3. </span>:default</h4>
<p>The :default selector applies to the one or more UI elements that are
the default among a set of similar elements. This selector typically
applies to context menu items, buttons, and select lists/menus.
<p> One example is the default submit button among a set of buttons.
Another example is the default option from a popup menu. Multiple elements
in a select-many group could have multiple :default elements, like a
selection of pizza toppings for example.
<h4 id=pseudo-validity><span class=secno>4.1.4. </span><span
id=pseudo-valid>:valid</span> and <span id=pseudo-invalid>:invalid</span></h4>
<p>An element is :valid or :invalid when it is, respectively, valid or
invalid with respect to data validity semantics defined by a different
specification (e.g. <a href="#ref-XFORMS11"
rel=biblioentry>[XFORMS11]<!--{{XFORMS11}}--></a>). An element which lacks
data validity semantics is neither :valid nor :invalid. This is different
from an element which otherwise has no constraints. Such an element would
always be :valid.
<h4 id=pseudo-range><span class=secno>4.1.5. </span><span
id=pseudo-in-range>:in-range</span> and <span
id=pseudo-out-of-range>:out-of-range</span></h4>
<p> The :in-range and :out-of-range pseudo-classes apply only to elements
that have range limitations. An element is :in-range or :out-of-range when
the value that the element is bound to is in range or out of range of the
presentation (e.g. visual or spoken representation) of the element
respectively. An element that lacks data range limits or is not a form
control is neither :in-range nor :out-of-range. E.g. a slider element with
a value of 11 presented as a slider control that only represents the
values from 1-10 is :out-of-range. Another example is a menu element with
a value of "E" that happens to be presented as a popup menu that only has
choices "A", "B" and "C".
<h4 id=pseudo-required-value><span class=secno>4.1.6. </span><span
id=pseudo-required>:required</span> and <span
id=pseudo-optional>:optional</span></h4>
<p>A form element is :required or :optional if a value for it is,
respectively, required or optional before the form it belongs to is
submitted. Elements that are not form elements are neither required nor
optional.
<h4 id=pseudo-ro-rw><span class=secno>4.1.7. </span><span
id=pseudo-read-only>:read-only</span> and <span
id=pseudo-read-write>:read-write</span></h4>
<p>An element whose contents are not user-alterable is :read-only. However,
elements whose contents are user-alterable (such as text input fields) are
considered to be in a :read-write state. In typical documents, most
elements are :read-only. However it may be possible (e.g. in the context
of an editor) for any element to become :read-write.
<h3 id=pseudo-elements><span class=secno>4.2. </span>User interface element
fragments: pseudo-elements</h3>
<p> In addition to the above-mentioned pseudo-element, this specification
introduces four new pseudo-elements to provide access to additional user
interface element fragments.
<ul>
<li>::value
<li>::choices
<li>::repeat-item
<li>::repeat-index
</ul>
<p>Specifically, these new pseudo-elements are provided as a way to style
user interface fragments as defined by XForms <a href="#ref-XFORMS11"
rel=biblioentry>[XFORMS11]<!--{{XFORMS11}}--></a>.
<p class=note> Note: The ::value, ::choices, ::repeat-item, and
::repeat-index pseudo-elements are all at risk.
<h4 id=pseudo-value><span class=secno>4.2.1. </span>::value</h4>
<p>A form element may contain both a label for its data value, and the data
value itself. For such elements, the ::value pseudo-element selects the
representation of just the data value itself, in order to style its
appearance.
<div class=example>
<p style="display:none">Example(s):
<h4 class="no-num no-toc">fictional markup and illustration</h4>
<p> Here is an example which illustrates the ::value of a text input field
with fictional markup which is then styled with CSS.
<h5 class="no-num no-toc">sample XForms fragment with fictional markup:</h5>
<pre><code>
&lt;input&gt;
&lt;label&gt;Zip code&lt;label&gt;
<em>&lt;input::value/&gt;</em>
&lt;/input&gt;
</code></pre>
<h5 class="no-num no-toc">sample CSS:</h5>
<pre><code class=css>
input { border:dashed }
label { border:dotted }
input::value { border:solid }
</code></pre>
<h5 class="no-num no-toc">an HTML+CSS approximation of this example</h5>
<p> <span style="border:dashed;display:inline-block;padding:10px"> <label
style="border:dotted;display:inline-block;padding:2px;margin:0;font-size:1em">Zip
code</label> <input
style="border:solid;display:inline-block;padding:2px;margin:0;font-size:1em"
type=text value=94117> </span>
<p>Spacing (in the form of padding) has been added to the above
approximation to separate the borders and make the individual
(pseudo-)elements easier to distinguish.
</div>
<p>The ::value pseudo-element is similar to an inline-level element, but
with certain restrictions. The following properties apply to
<code>::value</code> pseudo-element: font properties, color property,
background properties, ‘<code class=property>word-spacing</code>’,
‘<code class=property>letter-spacing</code>’, ‘<code
class=property>text-decoration</code>’, ‘<code
class=property>vertical-align</code>’, ‘<code
class=property>text-transform</code>’, ‘<code
class=property>line-height</code>’. UAs may apply other properties as
well.
<h4 id=pseudo-choices><span class=secno>4.2.2. </span>::choices</h4>
<p>Similarly, a form element which represents a list of options may contain
both a label for the list, and the list of choices itself. For such
elements, the ::choices pseudo-element selects the representation of just
the list of choices themselves, in order to style their appearance.
<p>A list of radio buttons can also be selected with the ::choices
pseudo-element, and the currently chosen radio button can be selected with
the ::value pseudo-element.
<h4 id=pseudo-repeat-item><span class=secno>4.2.3. </span>::repeat-item</h4>
<p> The ::repeat-item pseudo-element represents a single item from a
repeating sequence. It is generated as a parent to all the elements in a
single repeating item. Each ::repeat-item is associated with a particular
instance data node, and is affected by the model item properties (e.g.
‘<code class=css><code>relevant</code></code>’) found there, as the
related style properties will cascade to the child elements.
<h4 id=pseudo-repeat-index><span class=secno>4.2.4. </span>::repeat-index</h4>
<p> The ::repeat-index pseudo-element represents the current item of a
repeating sequence. It takes the place of the ::repeat-item as a parent of
all the elements in the index repeating item.
<div class=note>
<p> <em><strong>Note.</strong> Any style declarations that an author wants
to apply to all repeat items, including the index, must be done so by
using both ::repeat-item and ::repeat-index selectors. Styles that are
only applied to ::repeat-item will not automatically be applied to the
respective ::repeat-index. </em>
</div>
<div class=example>
<p style="display:none">Example(s):
<h4 class="no-num no-toc">::repeat-item and ::repeat-index fictional
markup</h4>
<p> Here is an example that illustra 39F4 tes both ::repeat-item and
::repeat-index, since they are often both available and used at the same
time. Assume appropriate namespace declarations were made in a header
somewhere preceding the code in the example.
<p>The following markup snippet uses XHTML and XForms:
<pre><code lang=x-xhtml>
&lt;html:table xforms:repeat-nodeset="..."&gt;
&lt;html:tr&gt;
&lt;html:td&gt;&lt;xforms:input ref="..."/&gt;&lt;xforms:input ref="..."/&gt;&lt;/html:td&gt;
View remainder of file in raw view