You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
4088 lines
124 KiB
4088 lines
124 KiB
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
|
|
"http://www.w3.org/TR/html401/strict.dtd">
|
|
<!-- the command line to process is this is:
|
|
|
|
num -l 2 template.html | toc -l 2 | perl bin/htmlindex | perl \
|
|
bin/propindex | perl bin/addcite -r '' template.html \
|
|
>template-processed.html
|
|
|
|
To do: add longdesc
|
|
|
|
-->
|
|
|
|
<html>
|
|
<head>
|
|
<meta content="text/html; charset=iso-8859-1" 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>CSS3 Basic User Interface Module</title>
|
|
|
|
<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%}
|
|
table.twod { border: solid 2px #777; font-family:sans-serif; font-size:9px }
|
|
table.twod td { border: solid 1px #777; font-family:sans-serif; font-size:9px }
|
|
table.twod th { font-size:10px; font-weight:bold }
|
|
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 }
|
|
|
|
table.tprofile th.title {background:gray; color:white}
|
|
table.tprofile th { width:29%;padding:2px }
|
|
table.tprofile td { width:71%;padding:2px }
|
|
|
|
table#egappearance td:first-child { text-align:center; line-height:1.5 }
|
|
table#egappearance label { white-space:nowrap }
|
|
table#egappearance fieldset { line-height:1.4 }
|
|
table#egappearance legend { line-height:1.1 }
|
|
|
|
</style>
|
|
|
|
<link href="http://www.w3.org/StyleSheets/TR/W3C-CR" rel="stylesheet"
|
|
type="text/css">
|
|
|
|
<body>
|
|
<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 id="css3-basic">CSS3 Basic User Interface Module</h1>
|
|
|
|
<h2 class="no-num no-toc" id="w3c-candidate">W3C Candidate Recommendation 11
|
|
May 2004</h2>
|
|
|
|
<dl>
|
|
<dt>This version:
|
|
|
|
<dd><a
|
|
href="http://www.w3.org/TR/2004/CR-css3-ui-20040511">http://www.w3.org/TR/2004/CR-css3-ui-20040511</a>
|
|
|
|
<dt>Latest version:
|
|
|
|
<dd><a href="http://www.w3.org/TR/css3-ui">http://www.w3.org/TR/css3-ui</a>
|
|
|
|
<dt>Previous version:
|
|
|
|
<dd><a
|
|
href="http://www.w3.org/TR/2003/WD-css3-ui-20030703/">http://www.w3.org/TR/2003/WD-css3-ui-20030703/</a>
|
|
|
|
<dt>Editor:
|
|
|
|
<dd><span lang="tr">Tantek Çelik</span> (<span class="company"><a
|
|
href="http://www.microsoft.com/">Microsoft Corporation</a></span>) <<a
|
|
href="mailto:tantekc@microsoft.com">tantekc@microsoft.com</a>>
|
|
</dl>
|
|
<!--begin-include "../copyright.inc"-->
|
|
<p class="copyright"><a
|
|
href="http://www.w3.org/Consortium/Legal/ipr-notice#Copyright"> Copyright</a>
|
|
© 2004 <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.org/"><acronym
|
|
title="European Research Consortium for Informatics and
|
|
Mathematics">ERCIM</acronym></a>, <a href="http://www.keio.ac.jp/">Keio</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>,
|
|
<a href="http://www.w3.org/Consortium/Legal/copyright-documents">document
|
|
use</a> and <a
|
|
href="http://www.w3.org/Consortium/Legal/copyright-software">software
|
|
licensing</a> rules apply.</p>
|
|
<!--end-include-->
|
|
<hr title="Separator for header">
|
|
</div>
|
|
|
|
<h2 class="no-num no-toc" id="abstract">Abstract</h2>
|
|
|
|
<p>This section is <em>informative</em>.
|
|
|
|
<p>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. This specification describes those user interface related
|
|
selectors, properties and values that are proposed for CSS level 3 to
|
|
style HTML and XML (including XHTML and XForms). It includes and extends user
|
|
interface related features from the selectors, properties and values of CSS
|
|
level 2 revision 1 and Selectors specifications.
|
|
|
|
<h2 class="no-num no-toc" id="status" style="page-break-before:auto">Status
|
|
of this document</h2>
|
|
|
|
<p>This section is <em>normative</em>.
|
|
|
|
<p><em>This section describes the status of this document at the time of its
|
|
publication. Other documents may supersede it. A list of current W3C
|
|
publications and the latest revision of this technical report can be found in
|
|
the <a href="http://www.w3.org/TR/">W3C technical reports index at
|
|
http://www.w3.org/TR/</a>.</em>
|
|
|
|
<p>This is a W3C Candidate Recommendation, which means the specification has
|
|
been widely reviewed and W3C recommends that it be implemented. It will
|
|
remain Candidate Recommendation <a href="#crec">at least until 11 November
|
|
2004.</a>
|
|
|
|
<p>Publication as a Candidate Recommendation does not imply endorsement by
|
|
the W3C Membership. It is inappropriate to cite this document as other than
|
|
work in progress.
|
|
|
|
<p>To find the latest version of this specification, please follow the
|
|
"Latest version" link above, or visit the list of W3C <a
|
|
href="http://www.w3.org/TR">Technical Reports</a>.
|
|
|
|
<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.
|
|
|
|
<p>The (<a
|
|
href="http://lists.w3.org/Archives/Public/www-style/">archived</a>) public
|
|
mailing list <a href="mailto:www-style@w3.org">www-style@w3.org</a> (see <a
|
|
href="http://www.w3.org/Mail/Request">instructions</a>) is preferred for
|
|
discussion of this and other specifications in the Style area. When
|
|
commenting on this document, please put the text "CSS3UI" in the subject,
|
|
preferably like this: "[CSS3UI] <summary of comment>"
|
|
|
|
<p>This document is 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>, see <a
|
|
href="http://www.w3.org/Style/Activity">summary</a>).
|
|
|
|
<p>Patent disclosures relevant to CSS may be found on the Working Group's
|
|
public <a href="http://www.w3.org/Style/CSS/Disclosures">patent disclosure
|
|
page.</a> The document was developed under the <a
|
|
href="http://www.w3.org/TR/2002/NOTE-patent-practice-20020124">24 January
|
|
2002 CPP</a> as amended by the <a
|
|
href="http://www.w3.org/2004/02/05-pp-transition">W3C Patent Policy
|
|
Transition Procedure.</a>
|
|
|
|
<h3 class="no-num no-toc" id="crec">Candidate Recommendation Exit Criteria</h3>
|
|
|
|
<p>For this specification to exit the CR stage, the following conditions must
|
|
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:</p>
|
|
|
|
<dl>
|
|
<dt>feature
|
|
|
|
<dd>
|
|
<p> A section or subsection of the specification.</p>
|
|
|
|
<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.</p>
|
|
|
|
<dt>implementation
|
|
|
|
<dd>
|
|
<p>a user agent which:</p>
|
|
|
|
<ol>
|
|
<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>
|
|
|
|
<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 CSS3 Basic User Interface 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="#CSS21"
|
|
rel="biblioentry">[CSS21]</a> or Selectors <a href="#SELECT"
|
|
rel="biblioentry">[SELECT]</a>), or dependencies for another specification
|
|
(e.g. XForms <a href="#XFORMS10" rel="biblioentry">[XFORMS10]</a>) or are
|
|
believed to have one or more implementations (perhaps experimental), and thus
|
|
will not be dropped without returning to last call.
|
|
|
|
<ul><!-- Not at risk:
|
|
<li>CSS2.1: :hover :active :focus</li>
|
|
<li>Selectors: :enabled :disabled :checked :indeterminate ::selection</li>
|
|
<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>appearance:
|
|
Moz implements:
|
|
checkbox tab tooltip window dialog menubar
|
|
none(same as normal) button(same as push-buttom) radio(same as radio-button) menupopup(same as pop-up-menu) menuitem(same as menu-item)
|
|
checkboxcontainer(same as checkbox-group?) radiocontainer(same as radio-group?)
|
|
treeview(same as outline-tree?) textfield(same as field) menulist(same as list-menu?) slider(same as range?) menulist(same as pull-down-menu?)
|
|
listbox? listitem?
|
|
hyperlink (with a different mechanism?)
|
|
XForms asked for and/or needs:
|
|
combo-box signature password
|
|
Required generic values:
|
|
icon button menu
|
|
Necessary to replace old CSS3 Color values, so they can be deprecated
|
|
document workspace desktop
|
|
</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>nav-* properties
|
|
implemented by Tasman v1, internal implementation
|
|
required (depended on) by DVB-HTML, ATSC standards
|
|
</li>
|
|
-->
|
|
|
|
<li>'cursor' property values: ew-resize | ns-resize | nesw-resize |
|
|
nwse-resize
|
|
|
|
<li>'font' property values: window | document | workspace | desktop | tooltip
|
|
| dialog | button | push-button | hyperlink | radio-button | checkbox |
|
|
menu-item | tab | menubar | pull-down-menu | pop-up-menu | list-menu |
|
|
radio-group | checkbox-group | outline-tree | range | field | combo-box |
|
|
signature | password
|
|
|
|
<li>'content' property value: icon
|
|
|
|
<li>'icon' property
|
|
|
|
<li>'resize' property
|
|
</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="#CSS1" rel="biblioentry">[CSS1]</a> and <a
|
|
href="http://www.w3.org/TR/CSS21">CSS2.1</a> <a href="#CSS21"
|
|
rel="biblioentry">[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="#CSS21"
|
|
rel="biblioentry">[CSS21]</a>
|
|
|
|
<li>User Interface for CSS3 (16 February 2000) <a href="#CSSUI"
|
|
rel="biblioentry">[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>The ability to style the appearance of various standard form elements in
|
|
languages such as HTML/XHTML/XForms (and properties to augment or replace
|
|
some of the remaining stylistic attributes in HTML4/XHTML1).
|
|
|
|
<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>
|
|
|
|
<li><a href="#scope"><span class="secno">1.2. </span>Scope</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"><span class="secno">2.2. </span>Classes of
|
|
products</a>
|
|
|
|
<li><a href="#profiles"><span class="secno">2.3. </span>Profiles</a>
|
|
|
|
<li><a href="#extensions"><span class="secno">2.4. </span>Extensions</a>
|
|
</ul>
|
|
|
|
<li><a href="#dependencies"><span class="secno">3. </span>Dependencies on
|
|
other modules</a>
|
|
|
|
<li><a href="#user-interface"><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="#pseudo-default"><span class="secno">4.1.2. </span>:default</a>
|
|
|
|
<li><a href="#pseudo-validity"><span class="secno">4.1.3.
|
|
</span><span>:valid</span> and <span>:invalid</span></a>
|
|
|
|
<li><a href="#pseudo-range"><span class="secno">4.1.4.
|
|
</span><span>:in-range</span> and <span>:out-of-range</span></a>
|
|
|
|
<li><a href="#pseudo-required-value"><span class="secno">4.1.5.
|
|
</span><span>:required</span> and <span>:optional</span></a>
|
|
|
|
<li><a href="#pseudo-ro-rw"><span class="secno">4.1.6.
|
|
</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="#system"><span class="secno">5. </span>System Appearance</a>
|
|
<ul class="toc">
|
|
<li><a href="#appearance-val"><span class="secno">5.1. </span>Appearance
|
|
values</a>
|
|
|
|
<li><a href="#appearance"><span class="secno">5.2. </span><span
|
|
class="property">'appearance'</span> property</a>
|
|
|
|
<li><a href="#system0"><span class="secno">5.3. </span>System fonts</a>
|
|
</ul>
|
|
|
|
<li><a href="#element"><span class="secno">6. </span>Element icons</a>
|
|
<ul class="toc">
|
|
<li><a href="#content0"><span class="secno">6.1. </span><span
|
|
class="property">'content'</span> property addition</a>
|
|
|
|
<li><a href="#icon-property"><span class="secno">6.2. </span><span
|
|
class="property">'icon'</span> property</a>
|
|
</ul>
|
|
|
|
<li><a href="#box-model"><span class="secno">7. </span>Box Model addition</a>
|
|
|
|
<ul class="toc">
|
|
<li><a href="#box-sizing"><span class="secno">7.1. </span><span
|
|
class="property">'box-sizing'</span> property</a>
|
|
</ul>
|
|
|
|
<li><a href="#outline1"><span class="secno">8. </span>Outline properties</a>
|
|
<ul class="toc">
|
|
<li><a href="#outline"><span class="secno">8.1. </span><span
|
|
class="property">'outline'</span> property</a>
|
|
|
|
<li><a href="#outline-width"><span class="secno">8.2. </span><span
|
|
class="property">'outline-width'</span> property</a>
|
|
|
|
<li><a href="#outline-style"><span class="secno">8.3. </span><span
|
|
class="property">'outline-style'</span> property</a>
|
|
|
|
<li><a href="#outline-color"><span class="secno">8.4. </span><span
|
|
class="property">'outline-color'</span> property</a>
|
|
|
|
<li><a href="#outline-offset"><span class="secno">8.5. </span><span
|
|
class="property">'outline-offset'</span> property</a>
|
|
</ul>
|
|
|
|
<li><a href="#resizing"><span class="secno">9. </span>Resizing</a>
|
|
<ul class="toc">
|
|
<li><a href="#resize"><span class="secno">9.1. </span><span
|
|
class="property">'resize'</span> property</a>
|
|
</ul>
|
|
|
|
<li><a href="#mouse"><span class="secno">10. </span>Mouse and Keyboard</a>
|
|
<ul class="toc">
|
|
<li><a href="#cursor"><span class="secno">10.1. </span><span
|
|
class="property">'cursor'</span> property</a>
|
|
|
|
<li><a href="#keyboard"><span class="secno">10.2. </span>Keyboard control</a>
|
|
|
|
<ul class="toc">
|
|
<li><a href="#nav-index"><span class="secno">10.2.1. </span>Sequential
|
|
navigation order: the <span class="property">'nav-index'</span> property</a>
|
|
|
|
<li><a href="#nav-dir"><span class="secno">10.2.2. </span>Directional focus
|
|
navigation: the <span class="property">'nav-up'</span>, <span
|
|
class="property">'nav-right'</span>, <span
|
|
class="property">'nav-down'</span>, <span class="property">'nav-left'</span>
|
|
properties</a>
|
|
</ul>
|
|
</ul>
|
|
|
|
<li><a href="#acknowledgments">Appendix A. Acknowledgments</a>
|
|
|
|
<li><a href="#references">Appendix B. Bibiliography</a>
|
|
|
|
<li><a href="#changes">Appendix C. Changes</a>
|
|
|
|
<li><a href="#appendix">Appendix D. Default style sheet additions for
|
|
HTML4/XHTML1</a>
|
|
|
|
<li><a href="#appendix0">Appendix E. Example profiles</a>
|
|
|
|
<li><a href="#appendix1">Appendix F: Test Suite</a>
|
|
|
|
<li><a href="#index">Index</a>
|
|
|
|
<li><a href="#property">Property index</a>
|
|
</ul>
|
|
<!--end-toc-->
|
|
|
|
<hr>
|
|
|
|
<h2 id="intro"><span class="secno">1. </span>Introduction</h2>
|
|
|
|
<p>This section is <em>normative</em>.
|
|
|
|
<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="#CSS1" rel="biblioentry">[CSS1]</a> and <a
|
|
href="http://www.w3.org/TR/CSS2/ui.html">Chapter 18 of CSS2</a> <a
|
|
href="#CSS2" rel="biblioentry">[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="#SELECT" rel="biblioentry">[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 simulate the appearance of various
|
|
standard form elements.
|
|
|
|
<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>
|
|
|
|
<h3 id="scope"><span class="secno">1.2. </span>Scope</h3>
|
|
|
|
<p>This proposal specifies how to alter the look and feel of various
|
|
elements, and specifically does not address the meaning behind what a
|
|
specific look and feel may imply. For example, with the additions in the
|
|
proposal, an author can make any element look and even feel like a submit
|
|
button. Yet, that arbitrary element is not afforded any additional meaning,
|
|
so pushing it does nothing by default, and certainly does not submit a form.
|
|
|
|
<p> Similarly, the HTML4 <code><SELECT></code> element for example,
|
|
provides a list or menu of choices to the user. The meaning of the HTML4
|
|
<code><SELECT></code> element is that it allows the user to make a
|
|
choice, to choose something among several alternatives. This says nothing
|
|
about its look and feel, and in fact, the "concept" of a HTML4
|
|
<code><SELECT></code> could be visually implemented as a list-box, a
|
|
popup-menu, or a group of radio-buttons. Or a group of HTML4 checkboxes
|
|
(<code><INPUT type="checkbox"></code>) could be styled to appear as a
|
|
group of radio-buttons, and yet, since those elements are still semantic
|
|
checkboxes, they can still be individually checked or unchecked, rather than
|
|
acquiring any kind of radio-button group semantic where only one can be
|
|
checked.
|
|
|
|
<p> Each example of presentation has a different look and feel, but maintains
|
|
its original meaning, a choice (or choices) among several alternatives. This
|
|
proposal addresses only the former (look and feel), not the latter (meaning).
|
|
|
|
<p> Since this proposal serves to simulate the appearance of various user
|
|
interface and forms elements in HTML4/XHTML, it is perhaps useful to call out
|
|
what specifically is believed to be outside the scope of CSS, or better
|
|
suited to document structure rather than style and therefore not addressed by
|
|
this proposal:
|
|
|
|
<ul>
|
|
<li>Form semantics, including, but not limited to, submission, resetting,
|
|
naming, what determines a successful or valid form control, and how to
|
|
process form data.
|
|
|
|
<li>Form contents, including, but not limited to initial value, current
|
|
value, and form content types. The HTML4 '<code>maxlength</code>' attribute,
|
|
for example, determines the maximum number of characters the user can enter
|
|
into an <code><INPUT type="text"></code> or <code><INPUT
|
|
type="password"></code> field, and as such is a content constraint rather
|
|
than a presentational suggestion.
|
|
|
|
<li>Form control dependencies, including, but not limited to, whether only
|
|
one option from a set of choices may be chosen, or whether multiple options
|
|
may be chosen.
|
|
|
|
<li>The HTML4/XHTML1 <code><form></code> element and its unique
|
|
attributes ('<code>action</code>', '<code>method</code>',
|
|
'<code>enctype</code>', '<code>accept</code>',
|
|
'<code>accept-charset</code>').
|
|
</ul>
|
|
|
|
<p>In addition, this document does not attempt to solve all user interface
|
|
related issues / features that can be found in modern user interfaces.
|
|
Perhaps future versions may attempt to solve these. For example:
|
|
|
|
<ul>
|
|
<li>Complex or composite controls (e.g. the HTML4 <code><INPUT
|
|
type="file"></code> and the <code><ISINDEX></code> elements).
|
|
|
|
<li>The appearance, styling and coloring of scrollbars.
|
|
|
|
<li>Window layering. There is no attempt made to distinguish the appearance
|
|
of elements in the front-most window versus non-front-most windows. The
|
|
semantics of window layering must be addressed before it is appropriate to
|
|
attempt to style such concepts.
|
|
|
|
<li>Palettes and floating windows. Along with the concept of "frontmost"
|
|
window, windows that float but do not receive focus are also not addressed.
|
|
|
|
<li>Browser window chrome and toolbars.
|
|
|
|
<li>The default styling of the HTML4/XHTML1 <code><fieldset></code>,
|
|
<code><legend></code>, <code><frame></code> and
|
|
<code><frameset></code> elements.
|
|
|
|
<li>Frame-resizing behavior. The behavior of <code><frame></code> and
|
|
<code><frameset></code>, specifically the ability to "share"
|
|
resizability when elements share a border, perhaps by leveraging the
|
|
border-collapse property is also not addressed.
|
|
</ul>
|
|
|
|
<h2 id="conformance"><span class="secno">2. </span>Conformance</h2>
|
|
|
|
<p>This section is <em>normative</em>.
|
|
|
|
<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="shall0"
|
|
title="SHALL NOT">"SHALL NOT"</span>, <span class="index-def" id="should"
|
|
title="SHOULD">"SHOULD"</span>, <span class="index-def" id="should0"
|
|
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="#RFC2119" rel="biblioentry">[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#q1">defined by CSS 2.1</a> (<a
|
|
href="#CSS21" rel="biblioentry">[CSS21]</a>, section 3.1).
|
|
|
|
<h3 id="classes"><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 (e.g. <a href="#HTML401" rel="biblioentry">[HTML401]</a>), XHTML (e.g.
|
|
<a href="#XHTML10" rel="biblioentry">[XHTML10]</a>, <a href="#XHTML11"
|
|
rel="biblioentry">[XHTML11]</a>), XForms (e.g. <a href="#XFORMS10"
|
|
rel="biblioentry">[XFORMS10]</a>), SVG (e.g. <a href="#SVG10"
|
|
rel="biblioentry">[SVG10]</a>, <a href="#SVG11"
|
|
rel="biblioentry">[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, modules and or profiles of
|
|
CSS (e.g. <a href="#CSS1" rel="biblioentry">[CSS1]</a>, <a href="#CSS21"
|
|
rel="biblioentry">[CSS21]</a>)
|
|
</ul>
|
|
|
|
<h3 id="profiles"><span class="secno">2.3. </span>Profiles</h3>
|
|
|
|
<p>This specification contains a number of informative profiles. These
|
|
profiles are not mandatory for conformance.
|
|
|
|
<h3 id="extensions"><span class="secno">2.4. </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#q4">Vendor-specific
|
|
extensions</a> (<a href="#CSS21" rel="biblioentry">[CSS21]</a>, section
|
|
4.1.2).
|
|
|
|
<h2 id="dependencies"><span class="secno">3. </span>Dependencies on other
|
|
modules</h2>
|
|
|
|
<p>This section is <em>normative</em>.
|
|
|
|
<p>This CSS3 module depends on the following other specifications. Some of
|
|
these specifications may be in their "Candidate Recommendation" phase. If
|
|
this module depends on feature or portion of such a specification which ends
|
|
up being dropped during their "CR" phase(s), then such feature or portion
|
|
thereof will be presumed to be incorporated into this specification. For
|
|
example, if the ":indeterminate" selector was dropped from Selectors, then
|
|
the definition and description of ":indeterminate" would be incorporated into
|
|
the next draft of this specification.
|
|
|
|
<ul>
|
|
<li><a href="#SELECT" rel="biblioentry">[SELECT]</a>
|
|
|
|
<li><a href="#CSS3COLOR" rel="biblioentry">[CSS3COLOR]</a>
|
|
|
|
<li><a href="#CSS21" rel="biblioentry">[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 CSS3 Module Basic User Interface
|
|
Working Draft.
|
|
|
|
<ul>
|
|
<li><a href="#HTML401" rel="biblioentry">[HTML401]</a>
|
|
|
|
<li><a href="#UAAG10" rel="biblioentry">[UAAG10]</a>
|
|
|
|
<li><a href="#XML10" rel="biblioentry">[XML10]</a>
|
|
|
|
<li><a href="#XHTML10" rel="biblioentry">[XHTML10]</a>
|
|
|
|
<li><a href="#XHTML11" rel="biblioentry">[XHTML11]</a>
|
|
|
|
<li><a href="#XFORMS10" rel="biblioentry">[XFORMS10]</a>
|
|
</ul>
|
|
|
|
<p>This specification does not define what is a form element.
|
|
|
|
<h2 id="user-interface"><span class="secno">4. </span>User Interface
|
|
Selectors</h2>
|
|
|
|
<p>This section is <em>normative</em>.
|
|
|
|
<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="#SELECT" rel="biblioentry">[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/#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="#SELECT"
|
|
rel="biblioentry">[SELECT]</a> are included in this specification by
|
|
reference.
|
|
|
|
<p>CSS 2.1 <a href="#CSS21" rel="biblioentry">[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.
|
|
|
|
<div class="example">
|
|
<p style="display:none">Example(s):</p>
|
|
|
|
<h4 class="no-num no-toc" id="restyling">restyling a checkbox</h4>
|
|
|
|
<p> Authors may wish to completely redo the styling of a form control, such
|
|
as a checkbox. This can be achieved using several of the above pseudo-classes
|
|
and the '<span class="value">normal</span>' value for the <span
|
|
class="property"><a href="#appearance0">'appearance'</a></span> property
|
|
which is explained later in this specification. In this example, checkboxes
|
|
with a class of "redone" are styled with specific background images according
|
|
to their respective user interface states using one or more pseudo-classes.</p>
|
|
|
|
<pre><code class="css">
|
|
input[type=checkbox] {
|
|
appearance:checkbox; /* expected from UA defaults */
|
|
}
|
|
|
|
input[type=checkbox].redone {
|
|
appearance:normal; /* resets various properties */
|
|
display:inline-block;
|
|
width:20px; height:20px;
|
|
background:url(customuncheckedimage.png);
|
|
}
|
|
|
|
input[type=checkbox].redone:active {
|
|
background:url(customuncheckedactiveimage.png);
|
|
}
|
|
|
|
input[type=checkbox].redone:checked {
|
|
background:url(customcheckedimage.png);
|
|
}
|
|
|
|
input[type=checkbox].redone:checked:active {
|
|
background:url(customcheckedactiveimage.png);
|
|
}
|
|
|
|
input[type=checkbox].redone:disabled {
|
|
background:url(customdisableduncheckedimage.png);
|
|
}
|
|
|
|
input[type=checkbox].redone:disabled:checked {
|
|
background:url(customdisabledcheckedimage.png);
|
|
}
|
|
</code></pre>
|
|
</div>
|
|
|
|
<h4 class="no-num no-toc" id="new-user">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="#XFORMS10" rel="biblioentry">[XFORMS10]</a>.
|
|
|
|
<h4 id="pseudo-default"><span class="secno">4.1.2. </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. 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.3. </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="#XFORMS10" rel="biblioentry">[XFORMS10]</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.4. </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.5. </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.6. </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>Selectors (<a href="#SELECT" rel="biblioentry">[SELECT]</a>, section 7.3)
|
|
also defines one user interface element fragment selector:
|
|
|
|
<ul>
|
|
<li id="pseudo-selection"><a
|
|
href="http://www.w3.org/TR/css3-selectors/#selection">::selection</a>
|
|
</ul>
|
|
|
|
<p>This pseudo-element is included in this specification as defined by <a
|
|
href="#SELECT" rel="biblioentry">[SELECT]</a> by reference.
|
|
|
|
<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="#XFORMS10"
|
|
rel="biblioentry">[XFORMS10]</a>.
|
|
|
|
<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):</p>
|
|
|
|
<h4 class="no-num no-toc" id="fictional">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.</p>
|
|
|
|
<h5 class="no-num no-toc" id="sample">sample XForms fragment with fictional
|
|
markup:</h5>
|
|
|
|
<pre><code>
|
|
<input>
|
|
<label>Zip code<label>
|
|
<em><input::value/></em>
|
|
</input>
|
|
</code></pre>
|
|
|
|
<h5 class="no-num no-toc" id="sample0">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" id="an-xhtmlcss">an (X)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>
|
|
|
|
<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.</p>
|
|
</div>
|
|
|
|
<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>relevant</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></p>
|
|
</div>
|
|
|
|
<div class="example">
|
|
<p style="display:none">Example(s):</p>
|
|
|
|
<h4 class="no-num no-toc" id="repeat-item">::repeat-item and ::repeat-index
|
|
fictional markup</h4>
|
|
|
|
<p> Here is an example that illustrates 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>
|
|
|
|
<p>The following markup snippet uses XHTML and XForms:</p>
|
|
|
|
<pre><code lang="x-xhtml">
|
|
<html:table xforms:repeat-nodeset="...">
|
|
<html:tr>
|
|
<html:td><xforms:input ref="..."/><xforms:input ref="..."/></html:td>
|
|
</html:tr>
|
|
</html:table>
|
|
</code></pre>
|
|
|
|
<p> The following style rules are used to style all the repeated items and
|
|
the current repeated item.</p>
|
|
|
|
<pre><code class="css" lang="x-css">
|
|
html|tr::repeat-item { outline: medium solid; color:gray }
|
|
html|tr::repeat-index { outline: medium dashed; color:black }
|
|
</code></pre>
|
|
|
|
<p> The following fictional markup shows the state of the above markup when
|
|
through user interaction the XForm contains three of the repeated items,
|
|
where the third item is current.</p>
|
|
|
|
<pre><code lang="x-xhtml">
|
|
<html:table xforms:repeat-nodeset="...">
|
|
<em><html:tr::repeat-item></em>
|
|
<html:tr>
|
|
<html:td><xforms:input ref="..."/><xforms:input ref="..."/></html:td>
|
|
</html:tr>
|
|
<em></html:tr::repeat-item></em>
|
|
<em><html:tr::repeat-item></em>
|
|
<html:tr>
|
|
<html:td><xforms:input ref="..."/><xforms:input ref="..."/></html:td>
|
|
</html:tr>
|
|
<em></html:tr::repeat-item></em>
|
|
<em><html:tr::repeat-index></em>
|
|
<html:tr>
|
|
<html:td><xforms:input ref="..."/><xforms:input ref="..."/></html:td>
|
|
</html:tr>
|
|
<em></html:tr::repeat-index></em>
|
|
</html:table>
|
|
</code></pre>
|
|
</div>
|
|
|
|
<div class="note">
|
|
<p> <em><strong>Note.</strong> The ::repeat-index pseudo-element takes the
|
|
place of the ::repeat-item rather than being nested inside as a separate
|
|
element. Thus just like :link or :visited are mutually exclusive for
|
|
selecting hyperlinks, only one will exist and apply to a particular repeated
|
|
item at any point.</em></p>
|
|
</div>
|
|
|
|
<div class="example">
|
|
<p style="display:none">Example(s):</p>
|
|
|
|
<h4 class="no-num no-toc" id="ui-selectors">UI selectors example from XForms
|
|
1.0</h4>
|
|
|
|
<p> The following <a
|
|
href="http://www.w3.org/TR/xforms/sliceF.html#id2645356">example from XForms
|
|
1.0</a> (<a href="#XFORMS10" rel="biblioentry">[XFORMS10]</a>, section F.3)
|
|
shows how basic styling can be accomplished on form controls and repeating
|
|
structures using the new pseudo-classes and XForms elements.</p>
|
|
|
|
<pre><code class="css">
|
|
@namespace xforms url(http://www.w3.org/2002/xforms);
|
|
/* Display a red background on all invalid form controls */
|
|
*:invalid { background-color:red; }
|
|
/* Display a red asterisk after all required form controls */
|
|
*:required::after { content: "*"; color:red; }
|
|
/* Do not render non-relevant form controls */
|
|
*:disabled { visibility: hidden; }
|
|
/* The following declarations cause form controls and their labels
|
|
to align neatly, as if a two-column table were used */
|
|
xforms|group { display: table; }
|
|
xforms|input { display: table-row; }
|
|
xforms|input > xforms|label { display: table-cell; }
|
|
xforms|input::value { border: thin black solid; display: table-cell; }
|
|
/* Display an alert message when appropriate */
|
|
*:valid > xforms|alert { display: none; }
|
|
*:invalid > xforms|alert { display: inline; }
|
|
/* Display repeat-items with a dashed border */
|
|
*::repeat-item,*::repeat-index { border: dashed; }
|
|
/* Display a teal highlight behind the current repeat item */
|
|
*::repeat-index { background-color: teal; }
|
|
</code></pre>
|
|
</div>
|
|
|
|
<h2 id="system"><span class="secno">5. </span>System Appearance</h2>
|
|
|
|
<p>This section is <em>normative</em>.
|
|
|
|
<h3 id="appearance-val"><span class="secno">5.1. </span>Appearance values</h3>
|
|
|
|
<p> CSS2 introduced the concept of system colors, which is a set of keywords
|
|
that allows authors to specify colors in a manner that integrates them into
|
|
the user's graphic environment. However, color is not the only property for
|
|
which native form controls have a default.
|
|
|
|
<p>The properties defined and extended in this section refer to the <dfn
|
|
id="ltappearancegt"><appearance></dfn> value type, which may take one
|
|
of the following values which have been derived from the <a
|
|
href="http://www.w3.org/TR/CSS21/ui.html#system-colors">list of CSS2.1 System
|
|
Colors</a> (<a href="#CSS21" rel="biblioentry">[CSS21]</a>, section 18.2),
|
|
the list of <a href="http://www.w3.org/TR/html401/interact/forms.html">HTML4
|
|
form controls</a> (<a href="#HTML401" rel="biblioentry">[HTML401]</a>,
|
|
section 17), and additional typical platform user interface (UI) controls
|
|
(e.g. dialog window, icon):
|
|
|
|
<dl>
|
|
<dt><strong title="">icon</strong>
|
|
|
|
<dd>a small picture representing an object, often with a name or label.
|
|
|
|
<dt><strong>window</strong>
|
|
|
|
<dd>a viewport, a framed surface used to present objects and content for user
|
|
viewing and interaction. There are several specific types of windows:
|
|
<dl>
|
|
<dt><strong>desktop</strong>
|
|
|
|
<dd>a window used to represent a system as a whole that often contains other
|
|
windows.
|
|
|
|
<dt><strong>workspace</strong>
|
|
|
|
<dd>a window used to represent a project or application that may contain
|
|
other windows, typically with a titlebar that shows the name of the project
|
|
or application.
|
|
|
|
<dt><strong>document</strong>
|
|
|
|
<dd>a window used to represent a user document, typically with a titlebar
|
|
that shows its name. May also be used to represent folders or directories in
|
|
a file system.
|
|
|
|
<dt><strong>tooltip</strong>
|
|
|
|
<dd>a window that is used to temporarily display information or help about an
|
|
object. Also called "info" in the CSS2 system colors.
|
|
|
|
<dt><strong>dialog</strong>
|
|
|
|
<dd>a window used to present a notification or alternatives for the user to
|
|
choose as part of an action taken by the user. Also called "message-box" in
|
|
the CSS2 system fonts.
|
|
</dl>
|
|
|
|
<dt><strong>button</strong>
|
|
|
|
<dd>a small object usually labeled with text that represents a user choice
|
|
<dl>
|
|
<dt><strong>push-button</strong>
|
|
|
|
<dd>a button that has a border surrounding it, often beveled to appear three
|
|
dimensional, as if it is raised. Also called "caption" in CSS2 system fonts.
|
|
|
|
<dt><strong>hyperlink</strong>
|
|
|
|
<dd>a button that represents a hypertext link, often as simple as normal text
|
|
that is underlined and perhaps colored differently.
|
|
|
|
<dt><strong>radio-button</strong>
|
|
|
|
<dd>a button that displays whether or not it is checked with a small circle
|
|
next to the button label. There may be a disc inside the circle when the
|
|
button is checked. An indeterminate (neither checked nor unchecked) state may
|
|
be indicated with some other graphic in the circle.
|
|
|
|
<dt><strong>checkbox</strong>
|
|
|
|
<dd>a button that displays whether or not it is checked with a small box next
|
|
to the button label. There may be an 'x' or check mark inside the box when
|
|
the button is checked. An indeterminate (neither checked nor unchecked) state
|
|
may be indicated with a dash '-' or a square or some other graphic in the
|
|
box.
|
|
|
|
<dt><strong>menu-item</strong>
|
|
|
|
<dd>a choice within a menu, which may also act as a label for a nested
|
|
(hierarchical) menu.
|
|
|
|
<dt><strong>tab</strong>
|
|
|
|
<dd>a button representing the label for a pane in a tabbed interface.
|
|
</dl>
|
|
|
|
<dt><strong>menu</strong>
|
|
|
|
<dd>a set of options for the user to choose from, perhaps more than one at a
|
|
time. There are several specific types of menus.
|
|
<dl>
|
|
<dt><strong>menubar</strong>
|
|
|
|
<dd>a menu of menus, typically arranged linearly, in a horizontal bar.
|
|
|
|
<dt><strong>pull-down-menu</strong>
|
|
|
|
<dd>a menu where the name of the menu is displayed and the options remain
|
|
hidden until the user activates the menu. When the user releases or
|
|
deactivates the menu, the options are hidden again.
|
|
|
|
<dt><strong>pop-up-menu</strong>
|
|
|
|
<dd>a menu where all but the currently selected option remains hidden until
|
|
the user activates the menu. When the user releases or deactivates the menu,
|
|
all but the selected option are hidden again.
|
|
|
|
<dt><strong>list-menu</strong>
|
|
|
|
<dd>a list of options for the user to choose from, perhaps more than one at a
|
|
time.
|
|
|
|
<dt><strong>radio-group</strong>
|
|
|
|
<dd>a menu where the options are displayed as radio-buttons.
|
|
|
|
<dt><strong>checkbox-group</strong>
|
|
|
|
<dd>a menu where the options are displayed as checkboxes.
|
|
|
|
<dt><strong>outline-tree</strong>
|
|
|
|
<dd>a menu where the options can be shown or hidden with small widgets, often
|
|
represented by a small triangle or plus and minus signs.
|
|
|
|
<dt><strong>range</strong>
|
|
|
|
<dd>a control that displays the current option, perhaps graphically and
|
|
allows the user to select other options, perhaps by dragging a slider or
|
|
turning a knob.
|
|
</dl>
|
|
|
|
<dt><strong>field</strong>
|
|
|
|
<dd>an area provided for a user to enter or edit a value, typically using a
|
|
keyboard. There are several special fields.
|
|
<dl>
|
|
<dt><strong>combo-box</strong>
|
|
|
|
<dd>a field which is accompanied by a menu of preset values that can be used
|
|
to quickly enter common or typical values.
|
|
|
|
<dt><strong>signature</strong>
|
|
|
|
<dd>a field for entering a signature.
|
|
|
|
<dt><strong>password</strong>
|
|
|
|
<dd>a field for entering a password. Typically the text is rendered as a set
|
|
of bullets or boxes to obscure the value.
|
|
</dl>
|
|
</dl>
|
|
|
|
<p> Conforming user agents must support the five generic appearance values:
|
|
'<span class="value" title="">icon</span>', '<span
|
|
class="value">window</span>', '<span class="value">button</span>', '<span
|
|
class="value">menu</span>' and '<span class="property">field</span>'. If a
|
|
user agent or platform does not support a specific user interface element
|
|
(e.g. '<span class="value">dialog</span>'), it may apply the values for the
|
|
respective generic user interface element (e.g. '<span
|
|
class="value">window</span>').
|
|
|
|
<p class="note"><em><strong>Note.</strong> This specification recommends that
|
|
user agents allow users to override system appearance and font selections
|
|
with their own choices or proportions, within the user agent. See the User
|
|
Agent Accessibility Guidelines, specifically <a
|
|
href="http://www.w3.org/TR/UAAG10/guidelines.html#gl-user-control-styles">Ensure
|
|
user control of rendering</a> (<a href="#UAAG10"
|
|
rel="biblioentry">[UAAG10]</a>, section 2 guideline 4). </em>
|
|
|
|
<h3 id="appearance"><span class="secno">5.2. </span><span class="property"><a
|
|
href="#appearance0">'appearance'</a></span> property</h3>
|
|
|
|
<table class="propdef" id="nameappearance">
|
|
<tbody>
|
|
<tr>
|
|
<td><em>Name:</em>
|
|
|
|
<td><dfn id="appearance0">appearance</dfn>
|
|
|
|
<tr>
|
|
<td><em>Value: </em>
|
|
|
|
<td>normal | <a href="#appearance-val"><appearance></a> | inherit
|
|
|
|
<tr>
|
|
<td><em>Initial:</em>
|
|
|
|
<td>normal
|
|
|
|
<tr>
|
|
<td><em>Applies to:</em>
|
|
|
|
<td>all elements
|
|
|
|
<tr>
|
|
<td><em>Inherited:</em>
|
|
|
|
<td>no
|
|
|
|
<tr>
|
|
<td><em>Percentages:</em>
|
|
|
|
<td>N/A
|
|
|
|
<tr>
|
|
<td><em>Media:</em>
|
|
|
|
<td>visual, interactive
|
|
|
|
<tr>
|
|
<td><em>Computed value:</em>
|
|
|
|
<td>specified value
|
|
</table>
|
|
|
|
<p>This document introduces the <span class="property"><a
|
|
href="#appearance0">'appearance'</a></span> property which can be used to
|
|
make an element look like a standard user interface element on the platform.
|
|
|
|
<div class="example">
|
|
<p style="display:none">Example(s):</p>
|
|
|
|
<h4 class="no-num no-toc" id="a-few">A few <span class="property"><a
|
|
href="#appearance0">'appearance'</a></span> values demonstrated using HTML4</h4>
|
|
|
|
<table border="1" id="egappearance">
|
|
<thead>
|
|
<tr>
|
|
<th style="width:10em"><span class="property"><a
|
|
href="#appearance0">'appearance'</a></span>
|
|
|
|
<th>HTML4 demonstration
|
|
|
|
<tbody>
|
|
<tr>
|
|
<td>normal
|
|
|
|
<td><span>hello</span>
|
|
|
|
<tr>
|
|
<td>button
|
|
|
|
<td>
|
|
<button>Search</button>
|
|
|
|
<tr>
|
|
<td>push-button
|
|
|
|
<td><input type="button" value="Sign up">
|
|
|
|
<tr>
|
|
<td>hyperlink
|
|
|
|
<td><a href="http://www.w3.org/Style/CSS/">CSS home page</a>
|
|
|
|
<tr>
|
|
<td>radio-button
|
|
|
|
<td><input id="sticky" type="radio"><label for="sticky">Sticky</label>
|
|
|
|
<tr>
|
|
<td>checkbox
|
|
|
|
<td><input id="giftwrap" type="checkbox"><label for="giftwrap">Gift
|
|
wrap</label>
|
|
|
|
<tr>
|
|
<td>pop-up-menu
|
|
|
|
<td><label for="pophoney">Honey</label> <select id="pophoney" size="1">
|
|
<option>Water White
|
|
|
|
<option>Extra White
|
|
|
|
<option>White
|
|
|
|
<option>Extra Light Amber
|
|
|
|
<option>Light Amber
|
|
|
|
<option selected>Amber
|
|
|
|
<option>Dark Amber
|
|
</select>
|
|
|
|
<tr>
|
|
<td>list-menu
|
|
|
|
<td> <label for="listhoney">Honey</label> <select id="listhoney" size="5">
|
|
<option>Water White
|
|
|
|
<option>Extra White
|
|
|
|
<option>White
|
|
|
|
<option>Extra Light Amber
|
|
|
|
<option>Light Amber
|
|
|
|
<option selected>Amber
|
|
|
|
<option>Dark Amber
|
|
</select>
|
|
|
|
<tr>
|
|
<td>radio-group
|
|
|
|
<td>
|
|
<fieldset>
|
|
<legend>tea</legend>
|
|
<input checked id="earl" name="teachoice" type="radio"><label for="earl">Earl
|
|
Grey</label> <input id="lemon" name="teachoice" type="radio"><label
|
|
for="lemon">lemon ginger</label> <input id="green" name="teachoice"
|
|
type="radio"><label for="green">green tea</label> <input id="jasmine"
|
|
name="teachoice" type="radio"><label for="jasmine">jasmine tea</label></fieldset>
|
|
|
|
<tr>
|
|
<td>checkbox-group
|
|
|
|
<td>
|
|
<fieldset>
|
|
<legend>pizza toppings</legend>
|
|
<input id="freshbasil" type="checkbox"><label for="freshbasil">fresh
|
|
basil</label> <input id="freshgarlic" type="checkbox"><label
|
|
for="freshgarlic">fresh garlic</label> <input id="freshspinach"
|
|
type="checkbox"><label for="freshspinach">fresh spinach</label> <input
|
|
id="greenpeppers" type="checkbox"><label for="greenpeppers">green
|
|
peppers</label> <input checked id="mushroom" type="checkbox"><label
|
|
for="mushroom">mushrooms</label> <input id="olives" type="checkbox"><label
|
|
for="olives">olives</label> <input checked id="onions" type="checkbox"><label
|
|
for="onions">onions</label> <input id="pineapple" type="checkbox"><label
|
|
for="pineapple">pineapple</label> <input checked id="tomatoes"
|
|
type="checkbox"><label for="tomatoes">tomatoes</label></fieldset>
|
|
|
|
<tr>
|
|
<td>field
|
|
|
|
<td><textarea cols="20" rows="3">Note to self.</textarea>
|
|
|
|
<tr>
|
|
<td>password
|
|
|
|
<td><input type="password" value="secret">
|
|
</table>
|
|
</div>
|
|
|
|
<h4 class="no-num no-toc" id="appearance1"><span class="property"><a
|
|
href="#appearance0">'appearance'</a></span> property details</h4>
|
|
|
|
<p> The <span class="property"><a href="#appearance0">'appearance'</a></span>
|
|
property is a shorthand for <span class="property"><a
|
|
href="#appearance0">'appearance</a></span>', <span
|
|
class="property">'color</span>', <span class="property"><a
|
|
href="#font">'font</a></span>', and <span class="property"><a
|
|
href="#cursor0">'cursor</a></span>'. It sets <span class="property"><a
|
|
href="#appearance0">'appearance'</a></span> to the specified value and the
|
|
other properties to their appropriate system value; '<span
|
|
class="value">normal</span>' resets <span class="property"><a
|
|
href="#appearance0">'appearance'</a></span> to '<span
|
|
class="value">normal</span>' and the others to '<span
|
|
class="value">inherit</span>'. The <span class="property"><a
|
|
href="#appearance0">'appearance'</a></span> property does not affect the
|
|
specified or computed values of any other properties.
|
|
|
|
<p> If <span class="property"><a href="#appearance0">'appearance'</a></span>
|
|
is not '<span class="value">normal</span>', the UA must render the element as
|
|
if it was the specified user interface (UI) control from the platform. The UA
|
|
should use the computed values of the <span
|
|
class="property">'background-*'</span>, <span
|
|
class="property">'border-*'</span>, <span
|
|
class="property">'padding-*'</span>, <span
|
|
class="property">'outline-*'</span>, and <span
|
|
class="property">'text-decoration'</span> properties when they do not have
|
|
their initial values and the computed values of <span
|
|
class="property">'color'</span>, <span class="property"><a
|
|
href="#font">'font'</a></span>, and <span class="property"><a
|
|
href="#cursor0">'cursor'</a></span> (whatever their values) to influence the
|
|
rendering where possible. Any values from those properties that cannot be
|
|
used to influence the rendering of the UI control must not affect the
|
|
rendering at all.
|
|
|
|
<p class="example"> For example, the UA should not draw a second border
|
|
around a UI control that already has a border.
|
|
|
|
<p> If <span class="property">'background-color'</span> or <span
|
|
class="property">'background-image'</span> have non-initial values and the UA
|
|
is using their values for influencing the rendering of the UI control, then
|
|
the UA must ensure that the <span class="property">'color'</span> property is
|
|
also used to influence the rendering. <!--
|
|
Similarly if <span class="property">'color'</span> is used to influence the rendering, then <span class="property">'background-color'</span> must be used to influence the rendering, and the other <span class="property">'background-*'</span> properties should be used to influence the rendering as well.
|
|
-->
|
|
|
|
<p> Other properties must not affect the handling of <span
|
|
class="property"><a href="#appearance0">'appearance'</a></span> and must
|
|
instead be applied according to normal CSS rules. In particular <span
|
|
class="property">'margin'</span>, <span class="property">'display'</span>,
|
|
<span class="property">'float'</span>, <span
|
|
class="property">'height'</span>, <span class="property">'width'</span>, and
|
|
<span class="property">'line-height'</span>, are not ignored and affect the
|
|
element as normal.
|
|
|
|
<p> This specification does not define the term "platform".
|
|
|
|
<p class="example"> For example, it could be the native graphical rendering
|
|
engine of the operating system, or it could be a user-agent-specific skin. In
|
|
addition, which of several toolkits to use could also be decided on an
|
|
element-by-element basis depending on the values of the <span
|
|
class="property">'background-color'</span>, <span
|
|
class="property">'background-image'</span>, <span
|
|
class="property">'border-*-style'</span>, and <span class="property"><a
|
|
href="#outline-style0">'outline-style'</a></span> properties, so that the
|
|
author styles could be honored while still honoring <span class="property"><a
|
|
href="#appearance0">'appearance'</a></span> even though the UA is unable to
|
|
influence the rendering of OS native UI controls.
|
|
|
|
<p class="note"><em><strong>Note.</strong> The exact list of properties set
|
|
by, influencing, and not affected by <span class="property"><a
|
|
href="#appearance0">'appearance'</a></span> given in the lists above may be
|
|
adjusted based on UA implementor feedback. </em>
|
|
|
|
<p>Appearance values take into account the user interface state (if any) of
|
|
the element; thus there is no need for separate values for enabled vs.
|
|
disabled checkboxes for example.
|
|
|
|
<div class="example">
|
|
<p style="display:none">Example(s):</p>
|
|
|
|
<h4 class="no-num no-toc" id="influencing">Influencing the color and
|
|
background-color of a button</h4>
|
|
|
|
<p>This example demonstrates setting the color and background-color of an
|
|
element that is set to '<code class="css">appearance:push-button</code>'.</p>
|
|
|
|
<h5 class="no-num no-toc" id="sample1">sample CSS:</h5>
|
|
|
|
<pre><code class="css">
|
|
input[type=button] {
|
|
appearance:push-button; /* expected from UA defaults */
|
|
}
|
|
|
|
input[type=button].custom {
|
|
color: #393;
|
|
background-color: #9cf;
|
|
}
|
|
</code></pre>
|
|
|
|
<h5 class="no-num no-toc" id="sample2">sample (X)HTML fragment:</h5>
|
|
|
|
<pre><code>
|
|
<input type="button" value="Plain button" />
|
|
<input type="button" value="With color" class="custom" />
|
|
</code></pre>
|
|
|
|
<h5 class="no-num no-toc" id="a-graphical">A graphical browser might render
|
|
these buttons as follows:</h5>
|
|
|
|
<p><object data="plainbutton.png" type="image/png"> First, a rounded button
|
|
with black text on a white background, with shades of gray being used near
|
|
the edges to give the impression of depth. </object> <object
|
|
data="colorbutton.png" type="image/png"> Second, a similar rounded button but
|
|
with blue text on a light blue background, and with shades of blue used to
|
|
give the impression of depth. </object></p>
|
|
|
|
<h5 class="no-num no-toc" id="your-browser">Your browser on your system:</h5>
|
|
|
|
<p><input type="button" value="Plain button"> <input
|
|
style="color:#339;background-color:#9cf" type="button" value="With color"></p>
|
|
</div>
|
|
|
|
<h3 id="system0"><span class="secno">5.3. </span>System fonts</h3>
|
|
|
|
<p>CSS2 introduced system font keywords as values for the shorthand <span
|
|
class="property"><a href="#font">'font'</a></span> property which have the
|
|
effect of setting all the elemental <span class="property">'font-*'</span>
|
|
properties. This specification adds the list of <a
|
|
href="#appearance-val"><appearance></a> values to the set of system
|
|
fonts to allow styling text the same as such system controls.
|
|
|
|
<table class="propdef" id="namefont">
|
|
<tbody>
|
|
<tr>
|
|
<td><em>Name:</em>
|
|
|
|
<td><dfn id="font">font</dfn>
|
|
|
|
<tr>
|
|
<td><em>System values: </em>
|
|
|
|
<td> <a href="#appearance-val"><appearance></a> | status-bar |
|
|
message-box | caption | small-caption | inherit
|
|
|
|
<tr>
|
|
<td><em>Initial:</em>
|
|
|
|
<td>see individual properties in CSS 2.1
|
|
|
|
<tr>
|
|
<td><em>Applies to:</em>
|
|
|
|
<td>all elements
|
|
|
|
<tr>
|
|
<td><em>Inherited:</em>
|
|
|
|
<td>yes
|
|
|
|
<tr>
|
|
<td><em>Percentages:</em>
|
|
|
|
<td>N/A for system values
|
|
|
|
<tr>
|
|
<td><em>Media:</em>
|
|
|
|
<td>visual
|
|
|
|
<tr>
|
|
<td><em>Computed value:</em>
|
|
|
|
<td> The computed values for system font keywords are simply the keywords
|
|
themselves.
|
|
</table>
|
|
|
|
<dl>
|
|
<dt><strong title="">icon</strong>
|
|
|
|
<dd>The font used to label icons.
|
|
|
|
<dt><strong>window</strong>
|
|
|
|
<dd>The font used in the content of a window.
|
|
|
|
<dt><strong>desktop</strong>
|
|
|
|
<dd>The font used on the desktop.
|
|
|
|
<dt><strong>workspace</strong>
|
|
|
|
<dd>The font used in a workspace window.
|
|
|
|
<dt><strong>document</strong>
|
|
|
|
<dd>The font used for the content of a document window.
|
|
|
|
<dt><strong>tooltip</strong>
|
|
|
|
<dd>The font used in a tooltip window.
|
|
|
|
<dt><strong>status-bar</strong>
|
|
|
|
<dd>The font used in window status bars.
|
|
|
|
<dt><strong>dialog</strong>
|
|
|
|
<dt><strong>message-box</strong>
|
|
|
|
<dd>The font used in dialog boxes.
|
|
|
|
<dt><strong>button</strong>
|
|
|
|
<dt><strong>caption</strong>
|
|
|
|
<dd>The font used for buttons (captioned controls etc.).
|
|
|
|
<dt><strong>small-caption</strong>
|
|
|
|
<dd>The font used for labeling small controls.
|
|
|
|
<dt><strong>push-button</strong>
|
|
|
|
<dd>The specific font used for push-buttons.
|
|
|
|
<dt><strong>hyperlink</strong>
|
|
|
|
<dd>The specific font used for hyperlinks.
|
|
|
|
<dt><strong>radio-button</strong>
|
|
|
|
<dd>The specific font used for radio-button labels.
|
|
|
|
<dt><strong>checkbox</strong>
|
|
|
|
<dd>The font used for checkbox button labels.
|
|
|
|
<dt><strong>menu-item</strong>
|
|
|
|
<dd>The font used for menu-item labels.
|
|
|
|
<dt><strong>tab</strong>
|
|
|
|
<dd>The font used for tab labels in a tabbed panel interface.
|
|
|
|
<dt><strong>menu</strong>
|
|
|
|
<dd>The font used in menus (e.g., dropdown menus and menu lists).
|
|
|
|
<dt><strong>menubar</strong>
|
|
|
|
<dd>The specific font used in a menubar.
|
|
|
|
<dt><strong>pull-down-menu</strong>
|
|
|
|
<dd>The specific font used in pull-down menus.
|
|
|
|
<dt><strong>pop-up-menu</strong>
|
|
|
|
<dd>The specific font used in popup menus.
|
|
|
|
<dt><strong>list-menu</strong>
|
|
|
|
<dd>The specific font used in menu lists.
|
|
|
|
<dt><strong>radio-group</strong>
|
|
|
|
<dd>The specific font used in radio button groups.
|
|
|
|
<dt><strong>checkbox-group</strong>
|
|
|
|
<dd>The specific font used in checkbox button groups.
|
|
|
|
<dt><strong>outline-tree</strong>
|
|
|
|
<dd>The specific font used in outline tree views.
|
|
|
|
<dt><strong>range</strong>
|
|
|
|
<dd>The specific font used in range controls.
|
|
|
|
<dt><strong>field</strong>
|
|
|
|
<dd>The specific font used in form text fields (input or output).
|
|
|
|
<dt><strong>combo-box</strong>
|
|
|
|
<dd>The specific font used in a combo-box field.
|
|
|
|
<dt><strong>signature</strong>
|
|
|
|
<dd>The specific font used in a signature field.
|
|
|
|
<dt><strong>password</strong>
|
|
|
|
<dd>The specific font used in a password field.
|
|
</dl>
|
|
|
|
<h2 id="element"><span class="secno">6. </span>Element icons</h2>
|
|
|
|
<p>This section is <em>normative</em>.
|
|
|
|
<h3 id="content0"><span class="secno">6.1. </span><span class="property"><a
|
|
href="#content">'content'</a></span> property addition</h3>
|
|
|
|
<table class="propdef" id="namecontent">
|
|
<tbody>
|
|
<tr>
|
|
<td><em>Name:</em>
|
|
|
|
<td><dfn id="content">content</dfn>
|
|
|
|
<tr>
|
|
<td><em>New Value(s):</em>
|
|
|
|
<td title="">icon
|
|
|
|
<tr>
|
|
<td><em>Initial:</em>
|
|
|
|
<td>same as CSS 2.1
|
|
|
|
<tr>
|
|
<td><em>Applies to:</em>
|
|
|
|
<td>same as CSS 2.1
|
|
|
|
<tr>
|
|
<td><em>Inherited:</em>
|
|
|
|
<td>same as CSS 2.1
|
|
|
|
<tr>
|
|
<td><em>Percentages:</em>
|
|
|
|
<td>same as CSS 2.1
|
|
|
|
<tr>
|
|
<td><em>Media:</em>
|
|
|
|
<td>same as CSS 2.1
|
|
|
|
<tr>
|
|
<td><em>Computed value:</em>
|
|
|
|
<td>the keyword '<span class="value" title="">icon</span>' if specified as
|
|
such, otherwise same as CSS 2.1
|
|
</table>
|
|
|
|
<dl>
|
|
<dt><strong title="">icon</strong>
|
|
|
|
<dd>The (pseudo-)element is replaced in its entirety by the resource
|
|
referenced by its <span class="property"><a href="#icon">'icon'</a></span>
|
|
property, and treated as a replaced element.
|
|
</dl>
|
|
|
|
<p class="note"><em><strong>Note.</strong> It is expected that the next draft
|
|
of the CSS3 Generated Content module <a href="#CSS3GENCON"
|
|
rel="biblioentry">[CSS3GENCON]</a> will include and superset this
|
|
functionality. </em>
|
|
|
|
<h3 id="icon-property"><span class="secno">6.2. </span><span
|
|
class="property"><a href="#icon">'icon'</a></span> property</h3>
|
|
|
|
<table class="propdef" id="nameicon">
|
|
<tbody>
|
|
<tr>
|
|
<td><em>Name:</em>
|
|
|
|
<td><dfn id="icon">icon</dfn>
|
|
|
|
<tr>
|
|
<td><em>Value:</em>
|
|
|
|
<td>auto | <uri> [, <uri>]* | inherit
|
|
|
|
<tr>
|
|
<td><em>Initial:</em>
|
|
|
|
<td>auto
|
|
|
|
<tr>
|
|
<td><em>Applies to:</em>
|
|
|
|
<td>all elements
|
|
|
|
<tr>
|
|
<td><em>Inherited:</em>
|
|
|
|
<td>no
|
|
|
|
<tr>
|
|
<td><em>Percentages:</em>
|
|
|
|
<td>N/A
|
|
|
|
<tr>
|
|
<td><em>Media:</em>
|
|
|
|
<td>all
|
|
|
|
<tr>
|
|
<td><em>Computed value:</em>
|
|
|
|
<td>The computed value for '<span class="value">auto</span>' is '<span
|
|
class="value">auto</span>'. The computed value for the <uri> value is
|
|
either the fully qualified URI value for the referenced icon that the UA is
|
|
able to render, or '<span class="value">auto</span>' if the UA did not find
|
|
any referenced icons that it could render.
|
|
</table>
|
|
|
|
<dl>
|
|
<dt><strong>auto</strong>
|
|
|
|
<dd>Use a default generic icon provided by the user agent.
|
|
|
|
<dt><strong><uri></strong>
|
|
|
|
<dd>URIs (see <a href="#URI" rel="biblioentry">[URI]</a>, <a href="#RFC1738"
|
|
rel="biblioentry">[RFC1738]</a> and <a href="#RFC1808"
|
|
rel="biblioentry">[RFC1808]</a>) provide a way of identifying resources. The
|
|
<uri> value(s) in this property refer to one or more icons in a comma
|
|
delimited list. The user agent loads the referenced icons one by one until it
|
|
finds one that it is able to render. This permits the usage of multiple
|
|
different icon formats for various platforms, and various media for that
|
|
matter.
|
|
</dl>
|
|
|
|
<p>The <span class="property"><a href="#icon">'icon'</a></span> property
|
|
provides the author the ability to style any arbitrary element with an iconic
|
|
equivalent. An element's icon is not used/rendered unless the <span
|
|
class="property"><a href="#content">'content'</a></span> property is set to
|
|
the value '<span class="value" title="">icon</span>' (see above). Documents
|
|
whose elements have icons assigned to them can be more easily viewed by users
|
|
who find too much text distracting.
|
|
|
|
<div class="example">
|
|
<p style="display:none">Example(s):</p>
|
|
|
|
<h4 class="no-num no-toc" id="representing">Representing elements with icons</h4>
|
|
|
|
<p>This example uses the above icon features to display icons in place of
|
|
images and objects.</p>
|
|
|
|
<pre><code class="css">
|
|
img,object { content:icon }
|
|
/* note that the CSS3 Generated Content module <a href="#CSS3GENCON" rel="biblioentry">[CSS3GENCON]</a>
|
|
expands the <span class="property"><a href="#content">'content'</a></span> property to apply to all elements. */
|
|
|
|
img { icon:url(imgicon.png); }
|
|
/* provide a custom icon for images */
|
|
|
|
object { icon:url(objicon.png); }
|
|
/* provide a different custom icon for objects */
|
|
</code></pre>
|
|
</div>
|
|
|
|
<h2 id="box-model"><span class="secno">7. </span>Box Model addition</h2>
|
|
|
|
<p>This section is <em>normative</em>.
|
|
|
|
<h3 id="box-sizing"><span class="secno">7.1. </span><span class="property"><a
|
|
href="#box-sizing0">'box-sizing'</a></span> property</h3>
|
|
|
|
<table class="propdef" id="namebox-sizing">
|
|
<tbody>
|
|
<tr>
|
|
<td><em>Name:</em>
|
|
|
|
<td><dfn id="box-sizing0">box-sizing</dfn>
|
|
|
|
<tr>
|
|
<td><em>Value:</em>
|
|
|
|
<td>content-box | border-box | inherit
|
|
|
|
<tr>
|
|
<td><em>Initial:</em>
|
|
|
|
<td>content-box
|
|
|
|
<tr>
|
|
<td><em>Applies to:</em>
|
|
|
|
<td>all elements that accept width or height
|
|
|
|
<tr>
|
|
<td><em>Inherited:</em>
|
|
|
|
<td>no
|
|
|
|
<tr>
|
|
<td><em>Percentages:</em>
|
|
|
|
<td>N/A
|
|
|
|
<tr>
|
|
<td><em>Media:</em>
|
|
|
|
<td>visual
|
|
|
|
<tr>
|
|
<td><em>Computed value:</em>
|
|
|
|
<td>specified value
|
|
</table>
|
|
|
|
<dl>
|
|
<dt><strong>content-box</strong>
|
|
|
|
<dd>This is the behavior of width and height as specified by CSS2.1. The
|
|
specified width and height (and respective min/max properties) apply to the
|
|
width and height respectively of the content box of the element. The padding
|
|
and border of the element are laid out and drawn outside the specified width
|
|
and height.
|
|
|
|
<dt><strong>border-box</strong>
|
|
|
|
<dd>The specified width and height (and respective min/max properties) on
|
|
this element determine the border box of the element. That is, any padding or
|
|
border specified on the element is laid out and drawn inside this specified
|
|
width and height. The content width and height are calculated by subtracting
|
|
the border and padding widths of the respective sides from the specified
|
|
<span class="property">'width'</span> and <span
|
|
class="property">'height'</span> properties. As the content width and height
|
|
<a href="http://www.w3.org/TR/CSS21/visudet.html#the-width-property">cannot
|
|
be negative</a> (<a href="#CSS21" rel="biblioentry">[CSS21]</a>, section
|
|
10.2), this computation is floored at 0.
|
|
<p class="note"><em><strong>Note.</strong> This is the behavior of width and
|
|
height as commonly implemented by legacy HTML user agents for replaced
|
|
elements and input elements.</em></p>
|
|
</dl>
|
|
|
|
<div class="example">
|
|
<p style="display:none">Example(s):</p>
|
|
|
|
<h4 class="no-num no-toc" id="using">Using box-sizing to evenly share space</h4>
|
|
|
|
<p>This example uses box-sizing to evenly horizontally split two divs with
|
|
fixed size borders inside a div container, which would otherwise require
|
|
additional markup.</p>
|
|
|
|
<h5 class="no-num no-toc" id="sample3">sample CSS:</h5>
|
|
|
|
<pre><code class="css">
|
|
div.container {
|
|
width:38em;
|
|
border:1em solid black;
|
|
}
|
|
|
|
div.split {
|
|
box-sizing:border-box;
|
|
width:50%;
|
|
border:1em silver ridge;
|
|
float:left;
|
|
}
|
|
</code></pre>
|
|
|
|
<h5 class="no-num no-toc" id="sample4">sample (X)HTML fragment:</h5>
|
|
|
|
<pre><code>
|
|
<div class="container">
|
|
<div class="split">This div occupies the left half.</div>
|
|
<div class="split">This div occupies the right half.</div>
|
|
</div>
|
|
</code></pre>
|
|
|
|
<h5 class="no-num no-toc" id="demonstration">demonstration of sample CSS and
|
|
(X)HTML:</h5>
|
|
|
|
<div style="width:38em; border:1em solid black">
|
|
<div style="box-sizing:border-box; width:50%; border:1em silver ridge;
|
|
float:left">This div should occupy the left half.</div>
|
|
|
|
<div style="box-sizing:border-box; width:50%; border:1em silver ridge;
|
|
float:left">This div should occupy the right half.</div>
|
|
The two divs above should appear side by side, each (including borders) 50%
|
|
of the content width of their container. If instead they are stacked one on
|
|
top of the other then your browser does not support <span class="property"><a
|
|
href="#box-sizing0">'box-sizing'</a></span>.</div>
|
|
</div>
|
|
|
|
<h2 id="outline1"><span class="secno">8. </span>Outline properties</h2>
|
|
|
|
<p>This section is <em>normative</em>.
|
|
|
|
<p>At times, style sheet authors may want to create outlines around visual
|
|
objects such as buttons, active form fields, image maps, etc., to make them
|
|
stand out. Outlines differ from borders in the following ways:
|
|
|
|
<ol>
|
|
<li>Outlines do not take up space.
|
|
|
|
<li>Outlines may be non-rectangular.
|
|
</ol>
|
|
|
|
<p>The outline properties control the style of these dynamic outlines.
|
|
|
|
<h3 id="outline"><span class="secno">8.1. </span><span class="property"><a
|
|
href="#outline0">'outline'</a></span> property</h3>
|
|
|
|
<table class="propdef" id="propdef-outline">
|
|
<tbody>
|
|
<tr>
|
|
<td><em>Name:</em>
|
|
|
|
<td><dfn id="outline0">outline</dfn>
|
|
|
|
<tr>
|
|
<td><em>Value:</em>
|
|
|
|
<td> [ <span class="property"><'outline-color'></span> || <span
|
|
class="property"><'outline-style'></span> || <span
|
|
class="property"><'outline-width'></span> ] | inherit
|
|
|
|
<tr>
|
|
<td><em>Initial:</em>
|
|
|
|
<td>see individual properties
|
|
|
|
<tr>
|
|
<td><em>Applies to:</em>
|
|
|
|
<td>all elements
|
|
|
|
<tr>
|
|
<td><em>Inherited:</em>
|
|
|
|
<td>no
|
|
|
|
<tr>
|
|
<td><em>Percentages:</em>
|
|
|
|
<td>N/A
|
|
|
|
<tr>
|
|
<td><em>Media:</em>
|
|
|
|
<td>visual
|
|
|
|
<tr>
|
|
<td><em>Computed value:</em>
|
|
|
|
<td>undefined for shorthand properties
|
|
</table>
|
|
|
|
<h3 id="outline-width"><span class="secno">8.2. </span><span
|
|
class="property"><a href="#outline-width0">'outline-width'</a></span>
|
|
property</h3>
|
|
|
|
<table class="propdef" id="propdef-outline-width">
|
|
<tbody>
|
|
<tr>
|
|
<td><em>Name:</em>
|
|
|
|
<td><dfn id="outline-width0">outline-width</dfn>
|
|
|
|
<tr>
|
|
<td><em>Value:</em>
|
|
|
|
<td><a class="noxref"
|
|
href="http://www.w3.org/TR/CSS21/box.html#value-def-border-width"><span
|
|
class="value-inst-border-width"><border-width></span></a> | inherit
|
|
|
|
<tr>
|
|
<td><em>Initial:</em>
|
|
|
|
<td>medium
|
|
|
|
<tr>
|
|
<td><em>Applies to:</em>
|
|
|
|
<td>all elements
|
|
|
|
<tr>
|
|
<td><em>Inherited:</em>
|
|
|
|
<td>no
|
|
|
|
<tr>
|
|
<td><em>Percentages:</em>
|
|
|
|
<td>N/A
|
|
|
|
<tr>
|
|
<td><em>Media:</em>
|
|
|
|
<td>visual
|
|
|
|
<tr>
|
|
<td><em>Computed value:</em>
|
|
|
|
<td><length> value in absolute units (px or physical).
|
|
</table>
|
|
|
|
<h3 id="outline-style"><span class="secno">8.3. </span><span
|
|
class="property"><a href="#outline-style0">'outline-style'</a></span>
|
|
property</h3>
|
|
|
|
<table class="propdef" id="propdef-outline-style">
|
|
<tbody>
|
|
<tr>
|
|
<td><em>Name:</em>
|
|
|
|
<td><dfn id="outline-style0">outline-style</dfn>
|
|
|
|
<tr>
|
|
<td><em>Value:</em>
|
|
|
|
<td>auto | <a class="noxref"
|
|
href="http://www.w3.org/TR/CSS21/box.html#value-def-border-style"><span
|
|
class="value-inst-border-style"><border-style></span></a> | inherit
|
|
|
|
<tr>
|
|
<td><em>Initial:</em>
|
|
|
|
<td>none
|
|
|
|
<tr>
|
|
<td><em>Applies to:</em>
|
|
|
|
<td>all elements
|
|
|
|
<tr>
|
|
<td><em>Inherited:</em>
|
|
|
|
<td>no
|
|
|
|
<tr>
|
|
<td><em>Percentages:</em>
|
|
|
|
<td>N/A
|
|
|
|
<tr>
|
|
<td><em>Media:</em>
|
|
|
|
<td>visual
|
|
|
|
<tr>
|
|
<td><em>Computed value:</em>
|
|
|
|
<td>specified value
|
|
</table>
|
|
|
|
<h3 id="outline-color"><span class="secno">8.4. </span><span
|
|
class="property"><a href="#outline-color0">'outline-color'</a></span>
|
|
property</h3>
|
|
|
|
<table class="propdef" id="propdef-outline-color">
|
|
<tbody>
|
|
<tr>
|
|
<td><em>Name:</em>
|
|
|
|
<td><dfn id="outline-color0">outline-color</dfn>
|
|
|
|
<tr>
|
|
<td><em>Value:</em>
|
|
|
|
<td><a class="noxref"
|
|
href="http://www.w3.org/TR/css3-color/#colorunits"><span
|
|
class="value-inst-color"><color></span></a> | invert | inherit
|
|
|
|
<tr>
|
|
<td><em>Initial:</em>
|
|
|
|
<td>invert
|
|
|
|
<tr>
|
|
<td><em>Applies to:</em>
|
|
|
|
<td>all elements
|
|
|
|
<tr>
|
|
<td><em>Inherited:</em>
|
|
|
|
<td>no
|
|
|
|
<tr>
|
|
<td><em>Percentages:</em>
|
|
|
|
<td>N/A
|
|
|
|
<tr>
|
|
<td><em>Media:</em>
|
|
|
|
<td>visual
|
|
|
|
<tr>
|
|
<td><em>Computed value:</em>
|
|
|
|
<td>The computed value for '<span class="value"><a
|
|
href="#invert">invert</a></span>' is '<span class="value"><a
|
|
href="#invert">invert</a></span>'. For <color> values, the computed
|
|
value is as defined for the <a href="#CSS3COLOR"
|
|
rel="biblioentry">[CSS3COLOR]</a> <span class="property">'color'</span>
|
|
property.
|
|
</table>
|
|
|
|
<p>The outline created with the outline properties is drawn "over" a box,
|
|
i.e., the outline is always on top, and doesn't influence the position or
|
|
size of the box, or of any other boxes. Therefore, displaying or suppressing
|
|
outlines does not cause reflow.
|
|
|
|
<p>Outlines may be non-rectangular. For example, if the element is broken
|
|
across several lines, the outline should be an outline or minimum set of
|
|
outlines that encloses all the element's boxes. Each part of the outline
|
|
should be fully connected rather than open on some sides (as borders on
|
|
inline elements are when lines are broken). The parts of the outline are not
|
|
required to be rectangular. The position of the outline may be affected by
|
|
descendant boxes. User agents should use an algorithm for determining the
|
|
outline that encloses a region appropriate for conveying the concept of focus
|
|
to the user.
|
|
|
|
<p>The <span class="property"><a
|
|
href="#outline-width0">'outline-width'</a></span> property accepts the same
|
|
values as <a class="noxref"
|
|
href="http://www.w3.org/TR/CSS21/box.html#propdef-border-width"><span
|
|
class="propinst-border-width">'border-width'</span></a> (<a href="#CSS21"
|
|
rel="biblioentry">[CSS21]</a>, section 8.5.1).
|
|
|
|
<p>The <span class="property"><a
|
|
href="#outline-style0">'outline-style'</a></span> property accepts the same
|
|
values as <a class="noxref"
|
|
href="http://www.w3.org/TR/CSS21/box.html#propdef-border-style"><span
|
|
class="propinst-border-style">'border-style'</span></a> (<a href="#CSS21"
|
|
rel="biblioentry">[CSS21]</a>, section 8.5.3), except that '<span
|
|
class="value">hidden</span>' is not a legal outline style. In addition, in
|
|
CSS3, <span class="property"><a
|
|
href="#outline-style0">'outline-style'</a></span> accepts the value '<span
|
|
class="value">auto</span>'. The '<span class="value">auto</span>' value
|
|
permits the user agent to render a custom outline style, typically a style
|
|
which is either a user interface default for the platform, or perhaps a style
|
|
that is richer than can be described in detail in CSS, e.g. a rounded edge
|
|
outline with semi-translucent outer pixels that appears to glow. As such,
|
|
this specification does not define how the <span class="property"><a
|
|
href="#outline-color0">'outline-color'</a></span> is incorporated or used (if
|
|
at all) when rendering '<span class="value">auto</span>' style outlines. User
|
|
agents may treat '<span class="value">auto</span>' as '<span
|
|
class="value">solid</span>'.
|
|
|
|
<p>The <span class="property"><a
|
|
href="#outline-color0">'outline-color'</a></span> property accepts all
|
|
colors, as well as the keyword '<dfn id="invert">invert</dfn>'. 'Invert' is
|
|
expected to perform a color inversion on the pixels on the screen. This is a
|
|
common trick to ensure the focus border is visible, regardless of color
|
|
background.
|
|
|
|
<p> Conformant UAs may ignore the '<span class="value"><a
|
|
href="#invert">invert</a></span>' value on platforms that do not support
|
|
color inversion of the pixels on the screen. If the UA does not support the
|
|
'<span class="value"><a href="#invert">invert</a></span>' value then the
|
|
initial value of the <span class="property"><a
|
|
href="#outline-color0">'outline-color'</a></span> property is the '<span
|
|
class="value">currentColor</span>' <a href="#CSS3COLOR"
|
|
rel="biblioentry">[CSS3COLOR]</a> keyword.
|
|
|
|
<p>The <span class="property"><a href="#outline0">'outline'</a></span>
|
|
property is a shorthand property, and sets all three of <span
|
|
class="property"><a href="#outline-style0">'outline-style'</a></span>, <span
|
|
class="property"><a href="#outline-width0">'outline-width'</a></span>, and
|
|
<span class="property"><a href="#outline-color0">'outline-color'</a></span>.
|
|
|
|
<p class="note"><em><strong>Note.</strong> The outline is the same on all
|
|
sides. In contrast to borders, there are no 'outline-top' or 'outline-left'
|
|
etc. properties.</em>
|
|
|
|
<p> This specification does not define how multiple overlapping outlines are
|
|
drawn, or how outlines are drawn for boxes that are partially obscured behind
|
|
other elements.
|
|
|
|
<div class="example">
|
|
<p style="display:none">Example(s):
|
|
|
|
<p> Here's an example of drawing a thick outline around a BUTTON element:</p>
|
|
|
|
<pre><code class="css">
|
|
button { outline: thick solid }
|
|
</code></pre>
|
|
</div>
|
|
|
|
<p>Graphical user interfaces may use outlines around elements to tell the
|
|
user which element on the page has the focus. These outlines are in addition
|
|
to any borders, and switching outlines on and off should not cause the
|
|
document to reflow. The focus is the subject of user interaction in a
|
|
document (e.g., for entering text, selecting a button, etc.).
|
|
|
|
<div class="example">
|
|
<p style="display:none">Example(s):</p>
|
|
|
|
<p>For example, to draw a thick black line around an element when it has the
|
|
focus, and a thick red line when it is active, the following rules can be
|
|
used:</p>
|
|
|
|
<pre><code class="css">
|
|
:focus { outline: thick solid black }
|
|
:active { outline: thick solid red }
|
|
</code></pre>
|
|
</div>
|
|
|
|
<div class="note">
|
|
<p> <em><strong>Note.</strong> Since the outline does not affect formatting
|
|
(i.e., no space is left for it in the box model), it may well overlap other
|
|
elements on the page. </em></p>
|
|
</div>
|
|
|
|
<h3 id="outline-offset"><span class="secno">8.5. </span><span
|
|
class="property"><a href="#outline-offset0">'outline-offset'</a></span>
|
|
property</h3>
|
|
|
|
<p>By default, the outline is drawn starting just outside the border edge.
|
|
However, it is possible to offset the outline and draw it beyond the border
|
|
edge.
|
|
|
|
<table class="propdef" id="propdef-outline-offset">
|
|
<tbody>
|
|
<tr>
|
|
<td><em>Name:</em>
|
|
|
|
<td><dfn id="outline-offset0">outline-offset</dfn>
|
|
|
|
<tr>
|
|
<td><em>Value:</em>
|
|
|
|
<td><length> | inherit
|
|
|
|
<tr>
|
|
<td><em>Initial:</em>
|
|
|
|
<td>0
|
|
|
|
<tr>
|
|
<td><em>Applies to:</em>
|
|
|
|
<td>all elements
|
|
|
|
<tr>
|
|
<td><em>Inherited:</em>
|
|
|
|
<td>no
|
|
|
|
<tr>
|
|
<td><em>Percentages:</em>
|
|
|
|
<td>N/A
|
|
|
|
<tr>
|
|
<td><em>Media:</em>
|
|
|
|
<td>visual
|
|
|
|
<tr>
|
|
<td><em>Computed value:</em>
|
|
|
|
<td><length> value in absolute units (px or physical).
|
|
</table>
|
|
|
|
<p>If the computed value of <span class="property"><a
|
|
href="#outline-offset0">'outline-offset'</a></span> is anything other than 0,
|
|
then the outline is outset from the border edge by that amount.
|
|
|
|
<div class="example">
|
|
<p style="display:none">Example(s):</p>
|
|
|
|
<p>For example, to leave 2 pixels of space between a focus outline and the
|
|
element that has the focus, or is active, the following rule can be used:</p>
|
|
|
|
<pre><code class="css">
|
|
:focus,:active { outline-offset: 2px }
|
|
</code></pre>
|
|
</div>
|
|
|
|
<h2 id="resizing"><span class="secno">9. </span>Resizing</h2>
|
|
|
|
<p>This section is <em>normative</em>.
|
|
|
|
<p>CSS2.1 provides a mechanism for controlling the appearance of a scrolling
|
|
mechanism (e.g. scrollbars), and this specification adds to that a mechanism
|
|
for controlling user resizability of elements.
|
|
|
|
<h3 id="resize"><span class="secno">9.1. </span><span class="property"><a
|
|
href="#resize0">'resize'</a></span> property</h3>
|
|
|
|
<p>The <span class="property"><a href="#resize0">'resize'</a></span> property
|
|
allows the author to specify whether or not an element is resizable by the
|
|
user, and if so, along which axis/axes.
|
|
|
|
<table class="propdef" id="propdef-resize">
|
|
<tbody>
|
|
<tr>
|
|
<td><em>Name:</em>
|
|
|
|
<td><dfn id="resize0">resize</dfn>
|
|
|
|
<tr>
|
|
<td><em>Value: </em>
|
|
|
|
<td>none | both | horizontal | vertical | inherit
|
|
|
|
<tr>
|
|
<td><em>Initial:</em>
|
|
|
|
<td>none
|
|
|
|
<tr>
|
|
<td><em>Applies to:</em>
|
|
|
|
<td>elements with <span class="property">'overflow'</span> other than visible
|
|
|
|
<tr>
|
|
<td><em>Inherited:</em>
|
|
|
|
<td>no
|
|
|
|
<tr>
|
|
<td><em>Percentages:</em>
|
|
|
|
<td>N/A
|
|
|
|
<tr>
|
|
<td><em>Media:</em>
|
|
|
|
<td>visual
|
|
|
|
<tr>
|
|
<td><em>Computed value:</em>
|
|
|
|
<td>specified value.
|
|
</table>
|
|
|
|
<dl>
|
|
<dt><strong>none</strong>
|
|
|
|
<dd>The UA does not present a resizing mechanism on the element, and the user
|
|
is given no direct manipulation mechanism to resize the element.
|
|
|
|
<dt><strong>both</strong>
|
|
|
|
<dd>The UA presents a bidirectional resizing mechanism to allow the user to
|
|
adjust both the height and the width of the element.
|
|
|
|
<dt><strong>horizontal</strong>
|
|
|
|
<dd>The UA presents a unidirectional horizontal resizing mechanism to allow
|
|
the user to adjust only the width of the element.
|
|
|
|
<dt><strong>vertical</strong>
|
|
|
|
<dd>The UA presents a unidirectional vertical resizing mechanism to allow the
|
|
user to adjust only the height of the element.
|
|
</dl>
|
|
|
|
<p>Currently it is possible to control the appearance of the scrolling
|
|
mechanism (if any) on an element using the <span
|
|
class="property">'overflow'</span> property (e.g. '<code
|
|
class="css">overflow: scroll</code>' vs. '<code class="css">overflow:
|
|
hidden</code>' etc.). The purpose of the <span class="property"><a
|
|
href="#resize0">'resize'</a></span> property is to also allow control over
|
|
the appearance and function of the resizing mechanism (e.g. a resize box or
|
|
widget) on the element.
|
|
|
|
<p class="note"> <em><strong>Note.</strong> The resizing mechanism is NOT the
|
|
same as the scrolling mechanism. The scrolling mechanism allows the user to
|
|
determine which portion of the contents of an element is shown. The resizing
|
|
mechanism allows the user to determine the size of the element. </em>
|
|
|
|
<p>The <span class="property"><a href="#resize0">'resize'</a></span> property
|
|
applies to elements whose computed <span class="property">'overflow'</span>
|
|
value is something other than '<span class="value">visible</span>'. If <span
|
|
class="property">'overflow'</span> is different in a particular axis (i.e.
|
|
<span class="property">'overflow-x'</span> vs. <span
|
|
class="property">'overflow-y'</span>), then this property applies to the
|
|
dimension(s) which do not have the value '<span
|
|
class="value">visible</span>'.
|
|
|
|
<p> When an element is resized by the user, the user agent keeps track of a
|
|
resize factor (which is initially 1.0) for the width and height, which it
|
|
then applies to the computed width and height as part of determining the used
|
|
width and height. The element's contents (and surroundings) are reformatted
|
|
as necessary.
|
|
|
|
<p>The resize factor introduces a step in width/height calculations and
|
|
formatting as described in <a
|
|
href="http://www.w3.org/TR/CSS21/visudet.html">chapter 10 of CSS2.1</a>.
|
|
Specifically the following step is inserted between steps 1 and 2 of the
|
|
algorithm in <a
|
|
href="http://www.w3.org/TR/CSS21/visudet.html#min-max-widths">section
|
|
10.4</a> and <a
|
|
href="http://www.w3.org/TR/CSS21/visudet.html#min-max-heights">10.7</a> in
|
|
CSS2.1 <a href="#CSS21" rel="biblioentry">[CSS21]</a>, where [dimension] is
|
|
'width' for 10.4 and 'height' for 10.7.
|
|
|
|
<blockquote>
|
|
<p style="text-indent:-2em"> 1b. If the resize [dimension] factor is not 1.0,
|
|
then the tentative used [dimension] is multiplied by that factor, and the
|
|
rules above are applied again, but this time using the result of that
|
|
multiplication as the computed value for '[dimension]'.
|
|
</blockquote>
|
|
|
|
<p> With regard to interactivity and the Document Object Model (DOM), the
|
|
resize factor on an element lasts the lifetime of the element, however, if
|
|
the <span class="property"><a href="#resize0">'resize'</a></span> property
|
|
itself is altered (e.g. via pseudo-class change or via DOM manipulation),
|
|
then the resize factor is reset to 1.0.
|
|
|
|
<p> The precise direction of resizing (i.e. altering the top left of the
|
|
element or altering the bottom right) may depend on a number of factors
|
|
including whether the element is absolutely positioned, whether it is
|
|
positioned using the <span class="property">'right'</span> and <span
|
|
class="property">'bottom'</span> properties, whether the language of the
|
|
element is right-to-left etc. The precise direction of resizing is left to
|
|
the UA to properly determine for the platform.
|
|
|
|
<p> The user agent may restrict the resizing range to something suitable,
|
|
such as between the original formatted size of the element, and large enough
|
|
to encompass all the element's contents.
|
|
|
|
<div class="example">
|
|
<p style="display:none">Example(s):</p>
|
|
|
|
<p>For example, to make iframes scrollable <em>and</em> resizable, the
|
|
following rule can be used:</p>
|
|
|
|
<pre><code class="css">
|
|
iframe,object[type^="text/"],
|
|
object[type$="+xml"],object[type="application/xml"]
|
|
{
|
|
overflow:auto;
|
|
resize:both;
|
|
}
|
|
</code></pre>
|
|
</div>
|
|
<!--
|
|
too bad we don't have @viewport yet. otherwise this would be cool:
|
|
<pre><code class="css">
|
|
@viewport {
|
|
width: 100px;
|
|
height: 100px;
|
|
overflow: hidden;
|
|
resize: none
|
|
} /* display content in a non-resizable 100px by 100px window */
|
|
</code></pre>
|
|
-->
|
|
|
|
<h2 id="mouse"><span class="secno">10. </span>Mouse and Keyboard</h2>
|
|
|
|
<p>This section is <em>normative</em>.
|
|
|
|
<h3 id="cursor"><span class="secno">10.1. </span><span class="property"><a
|
|
href="#cursor0">'cursor'</a></span> property</h3>
|
|
|
|
<table class="propdef" id="propdef-cursor">
|
|
<tbody>
|
|
<tr>
|
|
<td><em>Name:</em>
|
|
|
|
<td><dfn id="cursor0">cursor</dfn>
|
|
|
|
<tr>
|
|
<td><em>Value:</em>
|
|
|
|
<td> [ [<uri> [<x> <y>]?,]* <br>
|
|
[ auto | default | none |<br>
|
|
context-menu | help | pointer | progress | wait | <br>
|
|
cell | crosshair | text | vertical-text | <br>
|
|
alias | copy | move | no-drop | not-allowed | <br>
|
|
e-resize | n-resize | ne-resize | nw-resize | s-resize | se-resize |
|
|
sw-resize | w-resize | ew-resize | ns-resize | nesw-resize | nwse-resize |
|
|
col-resize | row-resize | all-scroll <br>
|
|
] ] | inherit
|
|
|
|
<tr>
|
|
<td><em>Initial:</em>
|
|
|
|
<td>auto
|
|
|
|
<tr>
|
|
<td><em>Applies to:</em>
|
|
|
|
<td>all elements
|
|
|
|
<tr>
|
|
<td><em>Inherited:</em>
|
|
|
|
<td>yes
|
|
|
|
<tr>
|
|
<td><em>Percentages:</em>
|
|
|
|
<td>N/A
|
|
|
|
<tr>
|
|
<td><em>Media:</em>
|
|
|
|
<td>visual, interactive
|
|
|
|
<tr>
|
|
<td><em>Computed value:</em>
|
|
|
|
<td>If there are one or more <uri> values specified, and the UA finds a
|
|
<uri> that it is able to support (due to format, resource availability
|
|
etc.), then the computed value is that resolved absolute URI, fully
|
|
qualified, with optional <x> and <y> coordinates. If no such
|
|
supported <uri> value is found, or if no <uri> values were
|
|
specified, then the computed value is the specified keyword value.
|
|
</table>
|
|
|
|
<h4 class="no-num no-toc" id="value">Value descriptions</h4>
|
|
|
|
<h5 class="no-num no-toc" id="image">image cursors</h5>
|
|
|
|
<dl>
|
|
<dt><strong><uri></strong>
|
|
|
|
<dd>The user agent retrieves the cursor from the resource designated by the
|
|
URI. If the user agent cannot handle the first cursor of a list of cursors,
|
|
it must attempt to handle the second, etc. If the user agent cannot handle
|
|
any user-defined cursor, it must use the cursor keyword at the end of the
|
|
list. The optional <x> and <y> coordinates identify the exact
|
|
position within the image which is the pointer position (i.e., the hotspot).
|
|
|
|
<dt><strong><x></strong>
|
|
|
|
<dt><strong><y></strong>
|
|
|
|
<dd> Each is a <number>. The x-coordinate and y-coordinate of the
|
|
position in the cursor's coordinate system (left/top relative) which
|
|
represents the precise position that is being pointed to. If the values are
|
|
unspecified, then the intrinsic hotspot defined inside the image resource
|
|
itself is used. If both the values are unspecific and the referenced cursor
|
|
has no defined hotspot, the effect is as if a value of "0 0" were specified.
|
|
</dl>
|
|
|
|
<h5 class="no-num no-toc" id="general">general purpose cursors</h5>
|
|
|
|
<dl>
|
|
<dt style="cursor:auto"><strong>auto</strong>
|
|
|
|
<dd>The UA determines the cursor to display based on the current context.
|
|
|
|
<dt style="cursor:default"><strong>default</strong>
|
|
|
|
<dd>The platform-dependent default cursor. Often rendered as an arrow.
|
|
|
|
<dt style="cursor:none"><strong>none</strong>
|
|
|
|
<dd>No cursor is rendered for the element.
|
|
</dl>
|
|
|
|
<h5 class="no-num no-toc" id="links">links and status cursors</h5>
|
|
|
|
<dl>
|
|
<dt style="cursor:context-menu"><strong>context-menu</strong>
|
|
|
|
<dd>A context menu is available for the object under the cursor. Often
|
|
rendered as an arrow with a small menu-like graphic next to it.
|
|
|
|
<dt style="cursor:help"><strong>help</strong>
|
|
|
|
<dd>Help is available for the object under the cursor. Often rendered as a
|
|
question mark or a balloon.
|
|
|
|
<dt style="cursor:pointer"><strong>pointer</strong>
|
|
|
|
<dd>The cursor is a pointer that indicates a link.
|
|
|
|
<dt style="cursor:progress"><strong>progress</strong>
|
|
|
|
<dd>A progress indicator. The program is performing some processing, but is
|
|
different from '<span class="value">wait</span>' in that the user may still
|
|
interact with the program. Often rendered as a spinning beach ball, or an
|
|
arrow with a watch or hourglass.
|
|
|
|
<dt style="cursor:wait"><strong>wait</strong>
|
|
|
|
<dd>Indicates that the program is busy and the user should wait. Often
|
|
rendered as a watch or hourglass.
|
|
</dl>
|
|
|
|
<h5 class="no-num no-toc" id="selection">selection cursors</h5>
|
|
|
|
<dl>
|
|
<dt style="cursor:cell"><strong>cell</strong>
|
|
|
|
<dd>Indicates that a cell or set of cells may be selected. Often rendered as
|
|
a thick plus-sign with a dot in the middle.
|
|
|
|
<dt style="cursor:crosshair"><strong>crosshair</strong>
|
|
|
|
<dd>A simple crosshair (e.g., short line segments resembling a "+" sign).
|
|
Often used to indicate a two dimensional bitmap selection mode.
|
|
|
|
<dt style="cursor:text"><strong>text</strong>
|
|
|
|
<dd>Indicates text that may be selected. Often rendered as a vertical I-beam.
|
|
User agents may automatically display a horizontal I-beam/cursor (e.g. same
|
|
as the '<span class="value">vertical-text</span>' keyword) for vertical text,
|
|
or for that matter, any angle of I-beam/cursor for text that is rendered at
|
|
any particular angle.
|
|
|
|
<dt style="cursor:vertical-text"><strong>vertical-text</strong>
|
|
|
|
<dd>Indicates vertical-text that may be selected. Often rendered as a
|
|
horizontal I-beam.
|
|
</dl>
|
|
|
|
<h5 class="no-num no-toc" id="drag-and">drag and drop cursors</h5>
|
|
|
|
<dl>
|
|
<dt style="cursor:alias"><strong>alias</strong>
|
|
|
|
<dd>Indicates an alias of/shortcut to something is to be created. Often
|
|
rendered as an arrow with a small curved arrow next to it.
|
|
|
|
<dt style="cursor:copy"><strong>copy</strong>
|
|
|
|
<dd>Indicates something is to be copied. Often rendered as an arrow with a
|
|
small plus sign next to it.
|
|
|
|
<dt style="cursor:move"><strong>move</strong>
|
|
|
|
<dd>Indicates something is to be moved.
|
|
|
|
<dt style="cursor:no-drop"><strong>no-drop</strong>
|
|
|
|
<dd> Indicates that the dragged item cannot be dropped at the current cursor
|
|
location. Often rendered as a hand or pointer with a small circle with a line
|
|
through it.
|
|
|
|
<dt style="cursor:not-allowed"><strong>not-allowed</strong>
|
|
|
|
<dd>Indicates that the requested action will not be carried out. Often
|
|
rendered as a circle with a line through it.
|
|
</dl>
|
|
|
|
<h5 class="no-num no-toc" id="resizing0">resizing and scrolling cursors</h5>
|
|
|
|
<dl>
|
|
<dt><strong> <span style="cursor:e-resize">e-resize</span>, <span
|
|
style="cursor:n-resize">n-resize</span>, <span
|
|
style="cursor:ne-resize">ne-resize</span>, <span
|
|
style="cursor:nw-resize">nw-resize</span>, <span
|
|
style="cursor:s-resize">s-resize</span>, <span
|
|
style="cursor:se-resize">se-resize</span>, <span
|
|
style="cursor:sw-resize">sw-resize</span>, <span
|
|
style="cursor:w-resize">w-resize</span> </strong>
|
|
|
|
<dd>Indicates that some edge is to be moved. For example, the 'se-resize'
|
|
cursor is used when the movement starts from the south-east corner of the
|
|
box.
|
|
|
|
<dt><strong> <span style="cursor:ew-resize">ew-resize</span>, <span
|
|
style="cursor:ns-resize">ns-resize</span>, <span
|
|
style="cursor:nesw-resize">nesw-resize</span>, <span
|
|
style="cursor:nwse-resize">nwse-resize</span> </strong>
|
|
|
|
<dd>Indicates a bidirectional resize cursor.
|
|
|
|
<dt style="cursor:col-resize"><strong>col-resize</strong>
|
|
|
|
<dd>Indicates that the item/column can be resized horizontally. Often
|
|
rendered as arrows pointing left and right with a vertical bar separating
|
|
them.
|
|
|
|
<dt style="cursor:row-resize"><strong>row-resize</strong>
|
|
|
|
<dd>Indicates that the item/row can be resized vertically. Often rendered as
|
|
arrows pointing up and down with a horizontal bar separating them.
|
|
|
|
<dt style="cursor:all-scroll"><strong>all-scroll</strong>
|
|
|
|
<dd>Indicates that the something can be scrolled in any direction. Often
|
|
rendered as arrows pointing up, down, left, and right with a dot in the
|
|
middle.
|
|
</dl>
|
|
|
|
<p>The UA may treat unsupported values as '<span class="value">auto</span>'.
|
|
E.g. on platforms that do not have a concept of a '<span
|
|
class="value">context-menu</span>' cursor, the UA may render '<span
|
|
class="value">default</span>' or whatever is appropriate.
|
|
|
|
<div class="example">
|
|
<h4 class="no-num no-toc" id="example">Example: cursor fallback</h4>
|
|
|
|
<p>Here is an example of using several cursor values.</p>
|
|
|
|
<pre><code class="css">
|
|
:link,:visited {
|
|
cursor: url(example.svg#linkcursor),
|
|
url(hyper.cur),
|
|
url(hyper.png) 2 3,
|
|
pointer
|
|
}
|
|
</code></pre>
|
|
|
|
<p>This example sets the cursor on all hyperlinks (whether visited or not) to
|
|
an external <a
|
|
href="http://www.w3.org/TR/SVG/interact.html#CursorElement">SVG cursor</a>
|
|
(<a href="#SVG10" rel="biblioentry">[SVG10]</a>, section 16.8.3). User agents
|
|
that don't support SVG cursors would simply skip to the next value and
|
|
attempt to use the "hyper.cur" cursor. If that cursor format was also not
|
|
supported, the UA could attempt to use the "hyper.png" cursor with the
|
|
explicit hot spot. Finally if the UA does not support any of those image
|
|
cursor formats, the UA would skip to the last value and simply render the
|
|
'<span class="value">pointer</span>' cursor.</p>
|
|
</div>
|
|
|
|
<h3 id="keyboard"><span class="secno">10.2. </span>Keyboard control</h3>
|
|
|
|
<h4 id="nav-index"><span class="secno">10.2.1. </span>Sequential navigation
|
|
order: the <span class="property"><a
|
|
href="#nav-index0">'nav-index'</a></span> property</h4>
|
|
|
|
<p>The <span class="property"><a href="#nav-index0">'nav-index'</a></span>
|
|
property is an input-method-neutral way of specifying the sequential
|
|
navigation order (also known as "tabbing order").
|
|
|
|
<table class="propdef" id="propdef-nav-index">
|
|
<tbody>
|
|
<tr>
|
|
<td><em>Name:</em>
|
|
|
|
<td><dfn id="nav-index0">nav-index</dfn>
|
|
|
|
<tr>
|
|
<td><em>Value: </em>
|
|
|
|
<td>auto | <number> | inherit
|
|
|
|
<tr>
|
|
<td><em>Initial:</em>
|
|
|
|
<td>auto
|
|
|
|
<tr>
|
|
<td><em>Applies to:</em>
|
|
|
|
<td>all enabled elements
|
|
|
|
<tr>
|
|
<td><em>Inherited:</em>
|
|
|
|
<td>no
|
|
|
|
<tr>
|
|
<td><em>Percentages:</em>
|
|
|
|
<td>n/a
|
|
|
|
<tr>
|
|
<td><em>Media:</em>
|
|
|
|
<td>interactive
|
|
|
|
<tr>
|
|
<td><em>Computed value:</em>
|
|
|
|
<td>specified value.
|
|
</table>
|
|
|
|
<dl>
|
|
<dt>auto
|
|
|
|
<dd>The element's sequential navigation order is assigned automatically by
|
|
the user agent.
|
|
|
|
<dt><number>
|
|
|
|
<dd>The number (which is non-zero and positive) indicates the sequential
|
|
navigation order for the element. '<span class="value">1</span>' means first.
|
|
Elements with the same nav-index value are navigated in document order when
|
|
that nav-index value is being navigated.
|
|
</dl>
|
|
|
|
<p>This property is a replacement for the HTML4/XHTML1 attribute '<a
|
|
href="http://www.w3.org/TR/html401/interact/forms.html#h-17.11.1">tabindex</a>'
|
|
(<a href="#HTML401" rel="biblioentry">[HTML401]</a>, section 17.11.1).
|
|
Borrowed and slightly rephrased from the HTML4 Recommendation:
|
|
|
|
<p> This property specifies the position of the current element in the
|
|
sequential navigation order for the current document.
|
|
|
|
<p> The sequential navigation order defines the order in which elements will
|
|
receive focus when navigated by the user via the keyboard. The sequential
|
|
navigation order may include elements nested within other elements.
|
|
|
|
<p> Elements that may receive focus should be navigated by user agents
|
|
according to the following rules:
|
|
|
|
<ol>
|
|
<li>Those elements that support the nav-index property and assign a positive
|
|
value to it are navigated first. Navigation proceeds from the element with
|
|
the lowest nav-index value to the element with the highest value. Values need
|
|
not be sequential nor must they begin with any particular value. Elements
|
|
that have identical nav-index values should be navigated in the order they
|
|
appear in the character stream.
|
|
|
|
<li>Those elements that do not support the nav-index property or support it
|
|
and assign it a value of '<span class="value">auto</span>' are navigated
|
|
next. These elements are navigated in the order they appear in the character
|
|
stream.
|
|
|
|
<li>Elements that are disabled do not participate in the sequential
|
|
navigation order.
|
|
</ol>
|
|
|
|
<p> The actual key sequence that causes sequential navigation or element
|
|
activation depends on the configuration of the user agent (e.g., the "tab"
|
|
key is often used for sequential navigation, and the "enter" key is used to
|
|
activate a selected element).
|
|
|
|
<p> User agents may also define key sequences to navigate the sequential
|
|
navigation order in reverse. When the end (or beginning) of the tabbing order
|
|
is reached, user agents may circle back to the beginning (or end). The key
|
|
combination "shift-tab" is often used for reverse sequential navigation.
|
|
|
|
<h4 id="nav-dir"><span class="secno">10.2.2. </span>Directional focus
|
|
navigation: the <span class="property"><a href="#nav-up">'nav-up'</a></span>,
|
|
<span class="property"><a href="#nav-right">'nav-right'</a></span>, <span
|
|
class="property"><a href="#nav-down">'nav-down'</a></span>, <span
|
|
class="property"><a href="#nav-left">'nav-left'</a></span> properties</h4>
|
|
|
|
<table class="propdef" id="names">
|
|
<tbody>
|
|
<tr>
|
|
<td><em>Names: </em>
|
|
|
|
<td><dfn id="nav-up">nav-up</dfn>, <dfn id="nav-right">nav-right</dfn>, <dfn
|
|
id="nav-down">nav-down</dfn>, <dfn id="nav-left">nav-left</dfn>
|
|
|
|
<tr>
|
|
<td><em>Value: </em>
|
|
|
|
<td>auto | <id> [ current | root | <target-name> ]? | inherit
|
|
|
|
<tr>
|
|
<td><em>Initial:</em>
|
|
|
|
<td>auto
|
|
|
|
<tr>
|
|
<td><em>Applies to:</em>
|
|
|
|
<td>all enabled elements
|
|
|
|
<tr>
|
|
<td><em>Inherited:</em>
|
|
|
|
<td>no
|
|
|
|
<tr>
|
|
<td><em>Percentages:</em>
|
|
|
|
<td>N/A
|
|
|
|
<tr>
|
|
<td><em>Media:</em>
|
|
|
|
<td>interactive
|
|
|
|
<tr>
|
|
<td><em>Computed value:</em>
|
|
|
|
<td><id> as specified with <target-name> string or keyword.
|
|
</table>
|
|
|
|
<dl>
|
|
<dt>auto
|
|
|
|
<dd>The user agent automatically determines which element to navigate the
|
|
focus to in response to directional navigational input.
|
|
|
|
<dt><id>
|
|
|
|
<dd>
|
|
<p>The <id> value consists of a '<code>#</code>' character followed by
|
|
an identifier, similar to a fragment identifier in a URL. It indicates the
|
|
element to which the focus is navigated to in response to directional
|
|
navigation input respective to the specific property.</p>
|
|
|
|
<p> If the <id> refers to the currently focused element, the
|
|
directional navigation input respective to the nav- property is ignored
|
|
— there is no need to refocus the same element.</p>
|
|
|
|
<dt><target-name>
|
|
|
|
<dd> The <target-name> parameter indicates the target frame for the
|
|
focus navigation. It is a string and it cannot start with the underscore "_"
|
|
character. If the specified target frame does not exist, the parameter will
|
|
be treated as the keyword '<span class="value">current</span>', which means
|
|
to simply use the frame that the element is in. The keyword '<span
|
|
class="value">root</span>' indicates that the user agent should target the
|
|
full window.
|
|
</dl>
|
|
|
|
<p>User agents for devices with directional navigation keys respond by
|
|
navigating the focus according to four respective nav-* directional
|
|
navigation properties (nav-up, nav-right, nav-down, nav-left). This
|
|
specification does not define which keys of a device are directional
|
|
navigational keys.
|
|
|
|
<div class="note">
|
|
<p> <em><strong>Note.</strong> Typical personal computers have keyboards with
|
|
four arrow keys. One possible implementation would be to use those four arrow
|
|
keys for directional navigation. For accessibility and user convenience, user
|
|
agents should allow configuration of which keys on a keyboard are used for
|
|
directional navigation. </em></p>
|
|
</div>
|
|
|
|
<div class="example">
|
|
<h4 class="no-num no-toc" id="example0">Example: positioned buttons</h4>
|
|
|
|
<p>Here is an example of buttons positioned in a diamond shape whose
|
|
navigation order and directional focus navigation is set in such a way to
|
|
navigate the focus clockwise (or counter-clockwise) around the diamond shape
|
|
when the user chooses to navigate sequentially or directionally.</p>
|
|
|
|
<pre><code class="css">
|
|
button { position:absolute }
|
|
|
|
button#b1 {
|
|
top:0; left:50%;
|
|
nav-index:1;
|
|
nav-right:#b2; nav-left:#b4;
|
|
nav-down:#b2; nav-up:#b4;
|
|
}
|
|
|
|
button#b2 {
|
|
top:50%; left:100%;
|
|
nav-index:2;
|
|
nav-right:#b3; nav-left:#b1;
|
|
nav-down:#b3; nav-up:#b1;
|
|
}
|
|
|
|
button#b3 {
|
|
top:100%; left:50%;
|
|
nav-index:3;
|
|
nav-right:#b4; nav-left:#b2;
|
|
nav-down:#b4; nav-up:#b2;
|
|
}
|
|
|
|
button#b4 {
|
|
top:50%; left:0;
|
|
nav-index:4;
|
|
nav-right:#b1; nav-left:#b3;
|
|
nav-down:#b1; nav-up:#b3;
|
|
}
|
|
</code></pre>
|
|
|
|
<p>Whatever markup sequence the buttons may have (which is not specified in
|
|
this example) is irrelevant in this case because they are positioned, and
|
|
yet, it is still important to ensure focus navigation behaviors which relate
|
|
reasonably to the specified layout.</p>
|
|
</div>
|
|
|
|
<hr title="Separator from footer">
|
|
|
|
<h2 class="no-num" id="acknowledgments">Appendix A. Acknowledgments</h2>
|
|
|
|
<p>This appendix is <em>informative</em>.
|
|
|
|
<p>Thanks to feedback and contributions from L. David Baron, Bert Bos,
|
|
Matthew Brealey, Ada Chan, Michael Day, Micah Dubinko, Elika E., Steve
|
|
Falkenburg, Al Gilman, Ian Hickson, Bjoern Hoehrmann, David Hyatt, Richard
|
|
Ishida, Sho Kuwamoto, Susan Lesch, Peter Linss, Brad Pettit, Alexander
|
|
Savenkov, Sebastian Schnitzenbaumer, Etan Wexler, David Woolley and Domel.
|
|
|
|
<h2 class="no-num" id="references">Appendix B. Bibiliography</h2>
|
|
|
|
<p>This appendix is <em>normative</em>.
|
|
|
|
<h3 class="no-num no-toc" id="normative">Normative References</h3>
|
|
<!--begin-normative-->
|
|
<!-- Sorted by label -->
|
|
|
|
<dl class="bibliography">
|
|
<dt style="display: none"><!-- keeps the doc valid if the DL is empty -->
|
|
<!---->
|
|
|
|
<dt id="CSS21">[CSS21]
|
|
|
|
<dd>Bert Bos; et al. <cite>Cascading Style Sheets, level 2 revision 1.</cite>
|
|
25 February 2004. W3C Candidate Recommendation. (Work in progress.) URL: <a
|
|
href="http://www.w3.org/TR/2004/CR-CSS21-20040225">http://www.w3.org/TR/2004/CR-CSS21-20040225</a>
|
|
<!---->
|
|
|
|
<dt id="CSS3COLOR">[CSS3COLOR]
|
|
|
|
<dd>Tantek Çelik; Chris Lilley. <cite>CSS3 Color Module.</cite> 14 May
|
|
2003. W3C Candidate Recommendation. (Work in progress.) URL: <a
|
|
href="http://www.w3.org/TR/2003/CR-css3-color-20030514">http://www.w3.org/TR/2003/CR-css3-color-20030514</a>
|
|
<!---->
|
|
|
|
<dt id="RFC1738">[RFC1738]
|
|
|
|
<dd>T. Berners-Lee; L. Masinter; M. McCahill. <cite>Uniform Resource Locators
|
|
(URL).</cite> December 1994. Internet RFC 1738. URL: <a
|
|
href="http://www.ietf.org/rfc/rfc1738.txt">http://www.ietf.org/rfc/rfc1738.txt</a>
|
|
<!---->
|
|
|
|
<dt id="RFC1808">[RFC1808]
|
|
|
|
<dd>R. Fielding. <cite>Relative Uniform Resource Locators.</cite> June 1995.
|
|
Internet RFC 1808. URL: <a
|
|
href="http://www.ietf.org/rfc/rfc1808.txt">http://www.ietf.org/rfc/rfc1808.txt</a>
|
|
<!---->
|
|
|
|
<dt id="RFC2119">[RFC2119]
|
|
|
|
<dd>S. Bradner. <cite>Key words for use in RFCs to Indicate Requirement
|
|
Levels.</cite> Internet RFC 2119. URL: <a
|
|
href="http://www.ietf.org/rfc/rfc2119.txt">http://www.ietf.org/rfc/rfc2119.txt</a>
|
|
<!---->
|
|
|
|
<dt id="SELECT">[SELECT]
|
|
|
|
<dd>Daniel Glazman; et al. <cite>Selectors.</cite> 13 November 2001. W3C
|
|
Candidate Recommendation. (Work in progress.) URL: <a
|
|
href="http://www.w3.org/TR/2001/CR-css3-selectors-20011113">http://www.w3.org/TR/2001/CR-css3-selectors-20011113</a>
|
|
<!---->
|
|
|
|
<dt id="URI">[URI]
|
|
|
|
<dd>T. Berners-Lee; R. Fielding; L. Masinter. <cite>Uniform Resource
|
|
Identifiers (URI): generic syntax.</cite> August 1998. Internet RFC 2396.
|
|
URL: <a
|
|
href="http://www.isi.edu/in-notes/rfc2396.txt">http://www.isi.edu/in-notes/rfc2396.txt</a>
|
|
<!---->
|
|
</dl>
|
|
<!--end-normative-->
|
|
|
|
<h3 class="no-num no-toc" id="informative-references">Informative References</h3>
|
|
<!--begin-informative-->
|
|
<!-- Sorted by label -->
|
|
|
|
<dl class="bibliography">
|
|
<dt style="display: none"><!-- keeps the doc valid if the DL is empty -->
|
|
<!---->
|
|
|
|
<dt id="CSS1">[CSS1]
|
|
|
|
<dd>Håkon Wium Lie; Bert Bos. <cite>Cascading Style Sheets (CSS1) Level
|
|
1 Specification.</cite> 17 December 1996. W3C Recommendation. Revised 11
|
|
January 1999. URL: <a
|
|
href="http://www.w3.org/TR/1999/REC-CSS1-19990111">http://www.w3.org/TR/1999/REC-CSS1-19990111</a>
|
|
<!---->
|
|
|
|
<dt id="CSS2">[CSS2]
|
|
|
|
<dd>Bert Bos; et al. <cite>Cascading Style Sheets, level 2 (CSS2)
|
|
Specification.</cite> 12 May 1998. W3C Recommendation. URL: <a
|
|
href="http://www.w3.org/TR/1998/REC-CSS2-19980512">http://www.w3.org/TR/1998/REC-CSS2-19980512</a>
|
|
<!---->
|
|
|
|
<dt id="CSS3GENCON">[CSS3GENCON]
|
|
|
|
<dd>Ian Hickson. <cite>CSS3 Generated and Replaced Content Module.</cite> 14
|
|
May 2003. W3C Working Draft. (Work in progress.) URL: <a
|
|
href="http://www.w3.org/TR/2003/WD-css3-content-20030514">http://www.w3.org/TR/2003/WD-css3-content-20030514</a>
|
|
<!---->
|
|
|
|
<dt id="CSSUI">[CSSUI]
|
|
|
|
<dd>Tantek Çelik. <cite>User Interface for CSS3.</cite> 2 August 2002.
|
|
W3C Working Draft. (Work in progress.) URL: <a
|
|
href="http://www.w3.org/TR/2002/WD-css3-userint-20020802">http://www.w3.org/TR/2002/WD-css3-userint-20020802</a>
|
|
<!---->
|
|
|
|
<dt id="HTML401">[HTML401]
|
|
|
|
<dd>David Raggett; Arnaud Le Hors; Ian Jacobs. <cite>HTML 4.01
|
|
Specification.</cite> 24 December 1999. W3C Recommendation. URL: <a
|
|
href="http://www.w3.org/TR/1999/REC-html401-19991224">http://www.w3.org/TR/1999/REC-html401-19991224</a>
|
|
<!---->
|
|
|
|
<dt id="SVG10">[SVG10]
|
|
|
|
<dd>Jon Ferraiolo (ed). <cite>Scalable Vector Graphics (SVG) 1.0
|
|
Specification.</cite> 4 September 2001. W3C Recommendation. URL: <a
|
|
href="http://www.w3.org/TR/2001/REC-SVG-20010904">http://www.w3.org/TR/2001/REC-SVG-20010904</a>
|
|
<!---->
|
|
|
|
<dt id="SVG11">[SVG11]
|
|
|
|
<dd>Jon Ferraiolo; 藤沢 淳 (FUJISAWA Jun); Dean Jackson
|
|
(eds). <cite>Scalable Vector Graphics (SVG) 1.1 Specification.</cite> 14
|
|
January 2003. W3C Recommendation. URL: <a
|
|
href="http://www.w3.org/TR/2003/REC-SVG11-20030114">http://www.w3.org/TR/2003/REC-SVG11-20030114</a>
|
|
<!---->
|
|
|
|
<dt id="UAAG10">[UAAG10]
|
|
|
|
<dd>Ian Jacobs; Jon Gunderson; Eric Hansen. <cite>User Agent Accessibility
|
|
Guidelines 1.0.</cite> 17 December 2002. W3C Recommendation. URL: <a
|
|
href="http://www.w3.org/TR/2002/REC-UAAG10-20021217">http://www.w3.org/TR/2002/REC-UAAG10-20021217</a>
|
|
<!---->
|
|
|
|
<dt id="XFORMS10">[XFORMS10]
|
|
|
|
<dd>Micah Dubinko; et al. <cite>XForms 1.0.</cite> 14 October 2003. W3C
|
|
Recommendation. URL: <a
|
|
href="http://www.w3.org/TR/2003/REC-xforms-20031014">http://www.w3.org/TR/2003/REC-xforms-20031014</a>
|
|
<!---->
|
|
|
|
<dt id="XHTML10">[XHTML10]
|
|
|
|
<dd>Steven Pemberton; et al. <cite>XHTML™ 1.0 The Extensible HyperText
|
|
Markup Language (Second Edition).</cite> 26 January 2000. W3C Recommendation.
|
|
Revised on 1 August 2002 URL: <a
|
|
href="http://www.w3.org/TR/2002/REC-xhtml1-20020801">http://www.w3.org/TR/2002/REC-xhtml1-20020801</a>
|
|
<!---->
|
|
|
|
<dt id="XHTML11">[XHTML11]
|
|
|
|
<dd>Murray Altheim; Shane McCarron. <cite>XHTML™ 1.1 - Module-based
|
|
XHTML.</cite> 31 May 2001. W3C Recommendation. URL: <a
|
|
href="http://www.w3.org/TR/2001/REC-xhtml11-20010531">http://www.w3.org/TR/2001/REC-xhtml11-20010531</a>
|
|
<!---->
|
|
|
|
<dt id="XML10">[XML10]
|
|
|
|
<dd>Tim Bray; et al. <cite>Extensible Markup Language (XML) 1.0 (Third
|
|
Edition).</cite> 4 February 2004. W3C Recommendation. URL: <a
|
|
href="http://www.w3.org/TR/2004/REC-xml-20040204">http://www.w3.org/TR/2004/REC-xml-20040204</a>
|
|
<!---->
|
|
</dl>
|
|
<!--end-informative-->
|
|
|
|
<h2 class="no-num" id="changes">Appendix C. Changes</h2>
|
|
|
|
<p>This appendix is <em>informative</em>.
|
|
|
|
<p>In general this draft contains numerous editorial/grammatical/spelling
|
|
corrections, and several new informative examples. This appendix describes
|
|
minor functional changes from the <a
|
|
href="http://www.w3.org/TR/2003/WD-css3-ui-20030703">Last Call Working Draft
|
|
of 3 July 2003</a> that were made to accommodate <a
|
|
href="/Style/css3-updates/css3-ui-comments">last call comments.</a>
|
|
|
|
<ul>
|
|
<li>:active pseudo-class. Clarified that <a href="#active">:active</a> only
|
|
applies to the left mouse button on multibutton mice.
|
|
|
|
<li>:default pseudo-class. Clarified that multiple :default elements are
|
|
possible, e.g. multiple default options for a select-many.
|
|
|
|
<li>:in-range and :out-of-range pseudo-classes. Added sentence: "An element
|
|
that lacks data range limits or is not a form control is neither :in-range
|
|
nor :out-of-range."
|
|
|
|
<li><span class="property"><a href="#appearance0">'appearance'</a></span> and
|
|
<span class="property"><a href="#font">'font'</a></span> properties. Added
|
|
user interface elements '<span class="value">menu-item</span>' and '<span
|
|
class="value">tab</span>' in the '<span class="value">button</span>' group,
|
|
'<span class="value">range</span>' to '<span class="value">menu</span>'
|
|
group, and, '<span class="value">signature</span>', '<span
|
|
class="value">password</span>' and '<span class="value">combo-box</span>' to
|
|
the '<span class="value">field</span>' group. Better specified <span
|
|
class="property"><a href="#appearance0">'appearance'</a></span> property
|
|
details.
|
|
|
|
<li>Icon functionality (and '<span class="value" title="">icon</span>' value)
|
|
moved from <span class="property">'display'</span> property to <span
|
|
class="property"><a href="#content">'content'</a></span> property.
|
|
|
|
<li><span class="property">'key-equivalent'</span> property removed.
|
|
|
|
<li><span class="property"><a href="#cursor0">'cursor'</a></span> property.
|
|
Added '<span class="value">none</span>' keyword.
|
|
|
|
<li><span class="property"><a href="#resize0">'resize'</a></span> property.
|
|
Changed media group to 'visual' to match <span
|
|
class="property">'overflow'</span>. Removed '<span class="value">auto</span>'
|
|
value. Changed initial value to '<span class="value">none</span>' to match
|
|
current implementation defaults.
|
|
|
|
<li><span class="property"><a
|
|
href="#outline-style0">'outline-style'</a></span> property. Added '<span
|
|
class="value">auto</span>' keyword.
|
|
|
|
<li>directional navigation properties. Changed <uri> in value
|
|
description to <id>. Added target keyword '<span
|
|
class="value">current</span>' in addition to '<span
|
|
class="value">root</span>'.
|
|
</ul>
|
|
|
|
<h2 class="no-num" id="appendix">Appendix D. Default style sheet additions
|
|
for HTML4/XHTML1</h2>
|
|
|
|
<p>This appendix is <em>informative</em>.
|
|
|
|
<p>Potential additions to the base style sheet to express HTML4/XHTML1 form
|
|
controls and a few HTML4/XHTML1 dynamic presentation attributes:
|
|
|
|
<pre class="html4ss">
|
|
|
|
:link,:visited {
|
|
appearance: hyperlink; /* set color, font, background, padding, border, etc.*/
|
|
}
|
|
|
|
:enabled:focus {
|
|
outline: 2px inset;
|
|
}
|
|
|
|
button,
|
|
input[type=button],
|
|
input[type=reset],
|
|
input[type=submit],
|
|
input[type=checkbox],
|
|
input[type=radio],
|
|
textarea,
|
|
input,
|
|
input[type=text],
|
|
input[type=hidden],
|
|
input[type=password],
|
|
input[type=image]
|
|
{
|
|
appearance: button;
|
|
display: inline-block;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
button,
|
|
input[type=button],
|
|
input[type=reset][value],
|
|
input[type=submit][value]
|
|
{
|
|
/* appearance of HTML4/XHTML1 push buttons */
|
|
appearance: push-button;
|
|
}
|
|
|
|
button
|
|
{
|
|
/* white space handling of BUTTON tags in particular */
|
|
white-space:normal;
|
|
}
|
|
|
|
input[type=reset]
|
|
{
|
|
/* default content of HTML4/XHTML1 input type=reset button */
|
|
content: "Reset";
|
|
}
|
|
|
|
input[type=submit]
|
|
{
|
|
/* default content of HTML4/XHTML1 input type=submit button */
|
|
content: "Submit";
|
|
}
|
|
|
|
input[type=button],
|
|
input[type=reset][value],
|
|
input[type=submit][value]
|
|
{
|
|
/* text content/labels of HTML4/XHTML1 "input" buttons */
|
|
content: attr(value);
|
|
}
|
|
|
|
input[type=checkbox]
|
|
{
|
|
appearance:checkbox;
|
|
}
|
|
|
|
input[type=radio]
|
|
{
|
|
appearance:radio-button;
|
|
}
|
|
|
|
textarea,
|
|
input,
|
|
input[type=text],
|
|
input[type=hidden],
|
|
input[type=password]
|
|
{
|
|
appearance: field;
|
|
}
|
|
|
|
textarea
|
|
{
|
|
/* white space handling of TEXTAREA tags in particular */
|
|
white-space:pre-wrap;
|
|
}
|
|
|
|
input[type=password]
|
|
{
|
|
appearance: password;
|
|
}
|
|
|
|
input[type=hidden]
|
|
{
|
|
/* appearance of the HTML4/XHTML1 hidden text field in particular */
|
|
display: none;
|
|
}
|
|
|
|
input[type=image]
|
|
{
|
|
display: inline-block;
|
|
content: attr(src,url);
|
|
border: none;
|
|
}
|
|
|
|
select[size]
|
|
{
|
|
/* HTML4/XHTML1 <select> w/ size more than 1 - appearance of list */
|
|
appearance: list-menu;
|
|
display: inline-block;
|
|
height: attr(size,em);
|
|
}
|
|
|
|
select,select[size=1]
|
|
{
|
|
/* HTML4/XHTML1 <select> without size, or size=1 - popup-menu */
|
|
appearance: popup-menu;
|
|
display: inline-block;
|
|
height: 1em;
|
|
overflow: hidden;
|
|
}
|
|
|
|
option
|
|
{
|
|
appearance:menu-item;
|
|
}
|
|
|
|
select[size]:active
|
|
{
|
|
/* active HTML4/XHTML <select> w/ size more than 1 - appearance of active list */
|
|
display: inline-block;
|
|
}
|
|
|
|
optgroup,option
|
|
{
|
|
display: block;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
optgroup[label],option[label]
|
|
{
|
|
content: attr(label);
|
|
}
|
|
|
|
option[selected]::before
|
|
{
|
|
display: inline;
|
|
content: check;
|
|
}
|
|
|
|
*[tabindex] { nav-index:attr(tabindex,number) }
|
|
|
|
|
|
/* Though FRAME resizing is not directly addressed by this specification,
|
|
the following rules may provide an approximation of reasonable behavior. */
|
|
|
|
/*
|
|
|
|
frame { resize:both }
|
|
frame[noresize] { resize:none }
|
|
|
|
*/
|
|
|
|
</pre>
|
|
|
|
<h2 class="no-num" id="appendix0">Appendix E. Example profiles</h2>
|
|
|
|
<p>This appendix is <em>informative</em>.
|
|
|
|
<p>These example profiles are written to roughly reflect the set of
|
|
functionality that other specifications use/define which has been explicitly
|
|
defined and/or updated in this specification. These profiles are independent
|
|
of any other dimensions of variability, e.g. properties that may allow some
|
|
values to be treated as other values.
|
|
|
|
<p> This specification recommends that implementations base their support on
|
|
at least one of the profiles defined below. Thus a CSS2.1 user agent for
|
|
example, should consider supporting the CSS2.1 profile for CSS3 Basic UI.
|
|
|
|
<h3 class="no-num no-toc" id="css1-profile">CSS1 profile for CSS3 Basic UI</h3>
|
|
|
|
<table border="1" class="tprofile" width="75%">
|
|
<tbody>
|
|
<tr>
|
|
<th class="title" colspan="2"><span class="modulename">CSS3 Basic User
|
|
Interface</span> profile
|
|
|
|
<tr>
|
|
<th>Specification
|
|
|
|
<td>CSS level 1
|
|
|
|
<tr>
|
|
<th>Accepts
|
|
|
|
<td> :active pseudo-class on hyperlinks
|
|
|
|
<tr>
|
|
<th>Excludes
|
|
|
|
<td> :hover, :active on non-hyperlinks, :focus, :enabled, :disabled,
|
|
:checked, :indeterminate pseudo-classes<br>
|
|
:default, :valid, :invalid, :in-range, :out-of-range, :required, :optional,
|
|
:read-only, :read-write pseudo-classes<br>
|
|
::selection, ::value, ::choices, ::repeat-item, ::repeat-index
|
|
pseudo-elements<br>
|
|
'appearance' property<br>
|
|
'font' property keyword additions<br>
|
|
'icon' keyword value for 'content' property<br>
|
|
'box-sizing' property<br>
|
|
'outline', 'outline-width', 'outline-style', 'outline-color',
|
|
'outline-offset' properties<br>
|
|
'resize' property<br>
|
|
'cursor' property<br>
|
|
'nav-index', 'nav-up', 'nav-right', 'nav-down', 'nav-left' properties
|
|
|
|
<tr>
|
|
<th>Extra constraints
|
|
|
|
<td>none.
|
|
</table>
|
|
|
|
<h3 class="no-num no-toc" id="css2.1">CSS2.1 profile for CSS3 Basic UI</h3>
|
|
|
|
<table border="1" class="tprofile" width="75%">
|
|
<tbody>
|
|
<tr>
|
|
<th class="title" colspan="2"><span class="modulename">CSS3 Basic User
|
|
Interface</span> profile
|
|
|
|
<tr>
|
|
<th>Specification
|
|
|
|
<td>CSS level 2 revision 1
|
|
|
|
<tr>
|
|
<th>Accepts
|
|
|
|
<td> :hover, :active, :focus pseudo-classes<br>
|
|
'font' property keyword values: 'caption', 'icon', 'menu', 'message-box',
|
|
'small-caption', 'status-bar'.<br>
|
|
'outline', 'outline-width', 'outline-style', 'outline-color' properties.<br>
|
|
'cursor' property<br>
|
|
|
|
<tr>
|
|
<th>Excludes
|
|
|
|
<td> :enabled, :disabled, :checked, :indeterminate pseudo-classes<br>
|
|
:default, :valid, :invalid, :in-range, :out-of-range, :required, :optional,
|
|
:read-only, :read-write pseudo-classes<br>
|
|
::selection, ::value, ::choices, ::repeat-item, ::repeat-index
|
|
pseudo-elements<br>
|
|
'appearance' property<br>
|
|
'font' property keyword additions<br>
|
|
'icon' keyword value for 'content' property<br>
|
|
'box-sizing' property<br>
|
|
'outline-offset' property<br>
|
|
'resize' property<br>
|
|
'cursor' property additions<br>
|
|
'nav-index', 'nav-up', 'nav-right', 'nav-down', 'nav-left' properties
|
|
|
|
<tr>
|
|
<th>Extra constraints
|
|
|
|
<td>'cursor' property support omits hotspot for downloaded cursors, and new
|
|
cursor keyword values. 'outline-style' property does not support 'auto'
|
|
value.
|
|
</table>
|
|
|
|
<h3 class="no-num no-toc" id="xforms">XForms profile for CSS3 Basic UI</h3>
|
|
|
|
<table border="1" class="tprofile" width="75%">
|
|
<tbody>
|
|
<tr>
|
|
<th class="title" colspan="2"><span class="modulename">CSS3 Basic User
|
|
Interface</span> profile
|
|
|
|
<tr>
|
|
<th>Specification
|
|
|
|
<td>XForms 1.0
|
|
|
|
<tr>
|
|
<th>Accepts
|
|
|
|
<td> :hover, :active, :focus, :enabled, :disabled, :checked, :indeterminate
|
|
pseudo-classes<br>
|
|
:default, :valid, :invalid, :in-range, :out-of-range, :required, :optional,
|
|
:read-only, :read-write pseudo-classes<br>
|
|
::value, ::choices, ::repeat-item, ::repeat-index pseudo-elements
|
|
|
|
<tr>
|
|
<th>Excludes
|
|
|
|
<td> ::selection pseudo-element<br>
|
|
'appearance' property<br>
|
|
'outline', 'outline-width', 'outline-style', 'outline-color' properties.<br>
|
|
'cursor' property<br>
|
|
'font' property keyword additions<br>
|
|
'icon' keyword value for 'content' property<br>
|
|
'box-sizing' property<br>
|
|
'outline-offset' property<br>
|
|
'resize' property<br>
|
|
'cursor' property additions<br>
|
|
'nav-index', 'nav-up', 'nav-right', 'nav-down', 'nav-left' properties
|
|
|
|
<tr>
|
|
<th>Extra constraints
|
|
|
|
<td>none.
|
|
</table>
|
|
|
|
<h3 class="no-num no-toc" id="full-profile">Full profile for CSS3 Basic UI</h3>
|
|
|
|
<table border="1" class="tprofile" width="75%">
|
|
<tbody>
|
|
<tr>
|
|
<th class="title" colspan="2"><span class="modulename">CSS3 Basic User
|
|
Interface</span> profile
|
|
|
|
<tr>
|
|
<th>Specification
|
|
|
|
<td>CSS3
|
|
|
|
<tr>
|
|
<th>Accepts
|
|
|
|
<td> :hover, :active, :focus, :enabled, :disabled, :checked, :indeterminate
|
|
pseudo-classes<br>
|
|
:default, :valid, :invalid, :in-range, :out-of-range, :required, :optional,
|
|
:read-only, :read-write pseudo-classes<br>
|
|
::selection, ::value, ::choices, ::repeat-item, ::repeat-index
|
|
pseudo-elements<br>
|
|
'appearance' property<br>
|
|
'outline', 'outline-width', 'outline-style', 'outline-color' properties.<br>
|
|
'cursor' property<br>
|
|
'font' property keyword additions<br>
|
|
'icon' keyword value for 'content' property<br>
|
|
'box-sizing' property<br>
|
|
'outline-offset' property<br>
|
|
'resize' property<br>
|
|
'cursor' property additions<br>
|
|
'nav-index', 'nav-up', 'nav-right', 'nav-down', 'nav-left' properties
|
|
|
|
<tr>
|
|
<th>Excludes
|
|
|
|
<td> none.
|
|
|
|
<tr>
|
|
<th>Extra constraints
|
|
|
|
<td>none.
|
|
</table>
|
|
|
|
<h2 class="no-num" id="appendix1">Appendix F: Test Suite</h2>
|
|
|
|
<p>This appendix is <em>informative</em>.
|
|
|
|
<p> This specification shall refer to a test suite written according to the
|
|
<a href="http://www.w3.org/Style/CSS/Test/testsuitedocumentation">CSS Test
|
|
Suite Documentation</a> and following the <a
|
|
href="http://www.w3.org/Style/CSS/Test/guidelines.html">CSS2.1 Test Case
|
|
Authoring Guidelines</a>. The test suite shall allow user agents to verify
|
|
their basic conformance to the specification. This test suite does not
|
|
pretend to be exhaustive and does not cover all possible combinations of user
|
|
interface related features. These tests will be made available from the <a
|
|
href="http://www.w3.org/Style/CSS/Test/">CSS Test Suites</a> home page.
|
|
|
|
<h2 class="no-num" id="index">Index</h2>
|
|
|
|
<p>This appendix is <em>informative</em>.
|
|
<!--begin-index-->
|
|
|
|
<ul class="indexlist">
|
|
<li>appearance, <a href="#appearance0"><strong>#</strong></a>
|
|
|
|
<li>box-sizing, <a href="#box-sizing0"><strong>#</strong></a>
|
|
|
|
<li>content, <a href="#content"><strong>#</strong></a>
|
|
|
|
<li>cursor, <a href="#cursor0"><strong>#</strong></a>
|
|
|
|
<li>font, <a href="#font"><strong>#</strong></a>
|
|
|
|
<li>icon, <a href="#icon"><strong>#</strong></a>
|
|
|
|
<li>invert, <a href="#invert"><strong>#</strong></a>
|
|
|
|
<li><appearance>, <a href="#ltappearancegt"><strong>#</strong></a>
|
|
|
|
<li>MAY, <a href="#may"><strong>#</strong></a>
|
|
|
|
<li>MUST, <a href="#must"><strong>#</strong></a>
|
|
|
|
<li>MUST NOT, <a href="#must-not"><strong>#</strong></a>
|
|
|
|
<li>nav-down, <a href="#nav-down"><strong>#</strong></a>
|
|
|
|
<li>nav-index, <a href="#nav-index0"><strong>#</strong></a>
|
|
|
|
<li>nav-left, <a href="#nav-left"><strong>#</strong></a>
|
|
|
|
<li>nav-right, <a href="#nav-right"><strong>#</strong></a>
|
|
|
|
<li>nav-up, <a href="#nav-up"><strong>#</strong></a>
|
|
|
|
<li>OPTIONAL, <a href="#optional"><strong>#</strong></a>
|
|
|
|
<li>outline, <a href="#outline0"><strong>#</strong></a>
|
|
|
|
<li>outline-color, <a href="#outline-color0"><strong>#</strong></a>
|
|
|
|
<li>outline-offset, <a href="#outline-offset0"><strong>#</strong></a>
|
|
|
|
<li>outline-style, <a href="#outline-style0"><strong>#</strong></a>
|
|
|
|
<li>outline-width, <a href="#outline-width0"><strong>#</strong></a>
|
|
|
|
<li>RECOMMENDED, <a href="#recommended"><strong>#</strong></a>
|
|
|
|
<li>REQUIRED, <a href="#required"><strong>#</strong></a>
|
|
|
|
<li>resize, <a href="#resize0"><strong>#</strong></a>
|
|
|
|
<li>SHALL, <a href="#shall"><strong>#</strong></a>
|
|
|
|
<li>SHALL NOT, <a href="#shall0"><strong>#</strong></a>
|
|
|
|
<li>SHOULD, <a href="#should"><strong>#</strong></a>
|
|
|
|
<li>SHOULD NOT, <a href="#should0"><strong>#</strong></a>
|
|
</ul>
|
|
<!--end-index-->
|
|
|
|
<h2 class="no-num" id="property">Property index</h2>
|
|
|
|
<p>This appendix is <em>informative</em>.
|
|
<!--begin properties-->
|
|
|
|
<table class="proptable">
|
|
<thead>
|
|
<tr>
|
|
<th>Property
|
|
|
|
<th>Values
|
|
|
|
<th>Initial
|
|
|
|
<th>Applies to
|
|
|
|
<th>Inh.
|
|
|
|
<th>Percentages
|
|
|
|
<th>Media
|
|
|
|
<tbody>
|
|
<tr valign="baseline">
|
|
<td><span class="property"><a href="#appearance0">appearance</a></span>
|
|
|
|
<td>normal | <appearance> | inherit
|
|
|
|
<td>normal
|
|
|
|
<td>all elements
|
|
|
|
<td>no
|
|
|
|
<td>N/A
|
|
|
|
<td>visual, interactive
|
|
|
|
<tr valign="baseline">
|
|
<td><span class="property"><a href="#box-sizing0">box-sizing</a></span>
|
|
|
|
<td>content-box | border-box | inherit
|
|
|
|
<td>content-box
|
|
|
|
<td>all elements that accept width or height
|
|
|
|
<td>no
|
|
|
|
<td>N/A
|
|
|
|
<td>visual
|
|
|
|
<tr valign="baseline">
|
|
<td><span class="property"><a href="#content">content</a></span>
|
|
|
|
<td>icon
|
|
|
|
<td>same as CSS 2.1
|
|
|
|
<td>same as CSS 2.1
|
|
|
|
<td>same as CSS 2.1
|
|
|
|
<td>same as CSS 2.1
|
|
|
|
<td>same as CSS 2.1
|
|
|
|
<tr valign="baseline">
|
|
<td><span class="property"><a href="#cursor0">cursor</a></span>
|
|
|
|
<td>[ [<uri> [<x> <y>]?,]* [ auto | default | none |
|
|
context-menu | help | pointer | progress | wait | cell | crosshair | text |
|
|
vertical-text | alias | copy | move | no-drop | not-allowed | e-resize |
|
|
n-resize | ne-resize | nw-resize | s-resize | se-resize | sw-resize |
|
|
w-resize | ew-resize | ns-resize | nesw-resize | nwse-resize | col-resize |
|
|
row-resize | all-scroll ] ] | inherit
|
|
|
|
<td>auto
|
|
|
|
<td>all elements
|
|
|
|
<td>yes
|
|
|
|
<td>N/A
|
|
|
|
<td>visual, interactive
|
|
|
|
<tr valign="baseline">
|
|
<td><span class="property"><a href="#font">font</a></span>
|
|
|
|
<td><appearance> | status-bar | message-box | caption | small-caption |
|
|
inherit
|
|
|
|
<td>see individual properties in CSS 2.1
|
|
|
|
<td>all elements
|
|
|
|
<td>yes
|
|
|
|
<td>N/A for system values
|
|
|
|
<td>visual
|
|
|
|
<tr valign="baseline">
|
|
<td><span class="property"><a href="#icon">icon</a></span>
|
|
|
|
<td>auto | <uri> [, <uri>]* | inherit
|
|
|
|
<td>auto
|
|
|
|
<td>all elements
|
|
|
|
<td>no
|
|
|
|
<td>N/A
|
|
|
|
<td>all
|
|
|
|
<tr valign="baseline">
|
|
<td><span class="property"><a href="#nav-index0">nav-index</a></span>
|
|
|
|
<td>auto | <number> | inherit
|
|
|
|
<td>auto
|
|
|
|
<td>all enabled elements
|
|
|
|
<td>no
|
|
|
|
<td>n/a
|
|
|
|
<td>interactive
|
|
|
|
<tr valign="baseline">
|
|
<td><span class="property"><a href="#nav-up">nav-up</a></span>, <span
|
|
class="property"><a href="#nav-right">nav-right</a></span>, <span
|
|
class="property"><a href="#nav-down">nav-down</a></span>, <span
|
|
class="property"><a href="#nav-left">nav-left</a></span>
|
|
|
|
<td>auto | <id> [ current | root | <target-name> ]? | inherit
|
|
|
|
<td>auto
|
|
|
|
<td>all enabled elements
|
|
|
|
<td>no
|
|
|
|
<td>N/A
|
|
|
|
<td>interactive
|
|
|
|
<tr valign="baseline">
|
|
<td><span class="property"><a href="#outline0">outline</a></span>
|
|
|
|
<td>[ <'outline-color'> || <'outline-style'> ||
|
|
<'outline-width'> ] | inherit
|
|
|
|
<td>see individual properties
|
|
|
|
<td>all elements
|
|
|
|
<td>no
|
|
|
|
<td>N/A
|
|
|
|
<td>visual
|
|
|
|
<tr valign="baseline">
|
|
<td><span class="property"><a href="#outline-color0">outline-color</a></span>
|
|
|
|
<td><color> | invert | inherit
|
|
|
|
<td>invert
|
|
|
|
<td>all elements
|
|
|
|
<td>no
|
|
|
|
<td>N/A
|
|
|
|
<td>visual
|
|
|
|
<tr valign="baseline">
|
|
<td><span class="property"><a
|
|
href="#outline-offset0">outline-offset</a></span>
|
|
|
|
<td><length> | inherit
|
|
|
|
<td>0
|
|
|
|
<td>all elements
|
|
|
|
<td>no
|
|
|
|
<td>N/A
|
|
|
|
<td>visual
|
|
|
|
<tr valign="baseline">
|
|
<td><span class="property"><a href="#outline-style0">outline-style</a></span>
|
|
|
|
<td>auto | <border-style> | inherit
|
|
|
|
<td>none
|
|
|
|
<td>all elements
|
|
|
|
<td>no
|
|
|
|
<td>N/A
|
|
|
|
<td>visual
|
|
|
|
<tr valign="baseline">
|
|
<td><span class="property"><a href="#outline-width0">outline-width</a></span>
|
|
|
|
<td><border-width> | inherit
|
|
|
|
<td>medium
|
|
|
|
<td>all elements
|
|
|
|
<td>no
|
|
|
|
<td>N/A
|
|
|
|
<td>visual
|
|
|
|
<tr valign="baseline">
|
|
<td><span class="property"><a href="#resize0">resize</a></span>
|
|
|
|
<td>none | both | horizontal | vertical | inherit
|
|
|
|
<td>none
|
|
|
|
<td>elements with 'overflow' other than visible
|
|
|
|
<td>no
|
|
|
|
<td>N/A
|
|
|
|
<td>visual
|
|
</table>
|
|
<!--end properties-->
|
|
<!-- Keep this comment at the end of the file
|
|
Local variables:
|
|
mode: sgml
|
|
sgml-declaration:"~/SGML/HTML4.decl"
|
|
sgml-default-doctype-name:"html"
|
|
sgml-minimize-attributes:t
|
|
sgml-nofill-elements:("pre" "style" "br")
|
|
sgml-live-element-indicator:t
|
|
End:
|
|
-->
|