W3C

CSS3 module: Basic User Interface

W3C Working Draft, 2 August 2002

This version:
http://www.w3.org/TR/2002/WD-css3-ui-20020802
Latest version:
http://www.w3.org/TR/css3-ui
Previous version:
none
Editor:
Tantek Çelik (Microsoft Corporation) <tantekc@microsoft.com>

Abstract

This working draft contains:

Status of this document

This document is a draft of one of the "modules" for the upcoming CSS3 specification. It not only describes the user interface related properties and values that already exist in CSS1 and CSS2 , but also proposes 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".

The current draft is the result of the merging of relevant parts of the following Recommendations and Working Drafts, and the addition of some new features.

This document is a working draft of the CSS working group which is part of the Style activity (see summary).

Feedback is very much encouraged and welcomed. The mailing list www-style@w3.org (see instructions) is open and preferred for discussion of this and other drafts in the Style area.

This working draft may be updated, replaced or rendered obsolete by other W3C documents at any time. It is inappropriate to use W3C Working Drafts as reference material or to cite them as other than "work in progress". Its publication does not imply endorsement by the W3C membership or the CSS Working Group (members only).

Patent disclosures relevant to CSS may be found on the Working Group's public patent disclosure page.

To find the latest version of this working draft, please follow the "Latest version" link above, or visit the list of W3C Technical Reports.

Changes

This section describes major changes from the "User Interface for CSS3" [CSSUI] draft of 16 February 2000.

Table of contents


1. Introduction

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.

This module describes selectors and CSS properties which enable authors to style user interface related states, element fragments, properties and values.

Section 2.1 of CSS1 and Chapter 18 of CSS2 introduced several user interface related pseudo-classes, properties and values. Section 6.6.4 of Selectors also describes several additional user interface related pseudo-classes (and one pseudo-element).

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 elements and attributes.

1.1. Purpose

The purpose of this proposal is to achieve the following objectives:

1.2. Scope

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.

Similarly, the SELECT element for example, provides a list or menu of choices to the user. The meaning of the SELECT 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 SELECT could be visually implemented as a list-box, a popup-menu, or a group of radio-buttons. Each visual instantiation has a different look and feel, but maintains its original meaning, a choice among several alternatives. This proposal addresses only the former (look and feel), not the latter (meaning).

Since this proposal serves to simulate the appearance of various user interface and forms elements in HTML4, 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:

In addition, this document does not attempt to solve all user interface related issues / features that can be found in modern user interfaces. For example:

1.3. Issues

This is a work in progress, and as such, has not yet addressed all issues that have been raised with respect to styling user interface elements using CSS. The following issues remain to be resolved:

  1. This document should address more of the behavior of FRAMESET and FRAME, specifically the ability to "share" resizability when elements share a border, perhaps by leveraging the border-collapse property.
  2. The document should add what is necessary or at least note how to present the default styling of the FIELDSET and LEGEND elements.
  3. There is a dependency on the extension of "attr()" expression to accept a unit coercion parameter and use of "attr()" outside of the content property.
  4. key-equivalent conflicts. What happens when an element has the same key-equivalent as some portion of the UA's intrinsic user interface?
  5. Should this document include a ::key-equivalent (was ::hot-key in previous draft) pseudo-element selector which selects the character or characters in an element which are the same as any key-equivalents on the element? E.g. you could style the hot-key for any enabled user interface element with the following: :enabled::key-equivalent {text-decoration:underline}. Presumably ::key-equivalent would accept the same properties that ::selection does (color, background-color, outline, cursor), with the addition of text-decoration, which is easier to implement for ::key-equivalent since a single character can't break into two pieces across a line break, unline a ::selection.
  6. Should this document define pseudo-element selectors for the visual representation of a scrolling mechanism (e.g. scrollbars)? E.g. ::horizontal-scroller, ::vertical-scroller ?
  7. Is there a need for more pseudo-classes or pseudo-elements to indicate additional user interface states/conditions/fragments?
  8. Should we add a mechanism for specifying what activates the element when it has the focus? E.g. typically the space or enter key.

2. Dependencies on other modules

This CSS3 module depends on the following other CSS3 modules:

It has non-normative (informative) references to the following other CSS3 modules:

The following CSS3 modules depend on this CSS3 module:

The following work is related to the CSS3 module: Basic User Interface working draft.

3. User Interface Selectors

3.1. User interface states: pseudo-classes

Selectors [SELECT] defines several user interface selectors which represent user interface states:

These pseudo-classes as defined by [SELECT] are included in this specification by reference.

In addition to the abovementioned pseudo-classes, this specification introduces several new pseudo-classes to define additional user interface states.

Specifically, these new states are provided as a way to style elements which are in the respective states as defined by XForms [XFORMS10].

3.1.1. :valid and :invalid

A form element is :(in)valid when it is (in)valid with respect to the bound instance data constraints. 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.

3.1.2. :required and :optional

A form element is :required(:optional) if a value for it is required(optional) before the form it belongs to is submitted.

3.1.3. :read-only and :read-write

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.

3.2. User interface element fragments: pseudo-elements

Selectors [SELECT] also defines one user interface element fragment selector:

This pseudo-element is included in this specification as defined by [SELECT] by reference.

In addition to the abovementioned pseudo-element, this specification introduces two new pseudo-elements to provide access to additional user interface element fragments.

3.2.1. ::value

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.

3.2.2. ::choices

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.

4. System Appearance

4.1. The 'appearance' property

Name: appearance
Value: normal | icon | window | document | workspace | desktop | tooltip | dialog | button | default-button | hyperlink | menu | pull-down-menu | pop-up-menu | list-menu | field | inherit
Initial: normal
Applies to: all elements
Inherited: no
Percentages: N/A
Media: interactive

CSS2 introduced the concept of system colors, which is a set of values 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 elements have a default.

This document introduces the 'appearance' property. The 'appearance' property simultaneously affects color, font, background, padding, border, and margin (note: and perhaps others).

When the appearance property is specified, the value indicates not only color, but all other aspects (font, background, padding, border, and margin, etc.) that are determined by the look of standard user interface elements on the system. Individual properties such as 'background-color' or 'border-style' are still given values taken from the system, which can be independently varied.

The list of CSS2 System Colors, the list of HTML4 form elements, and the concept of a dialog window and an icon give us the following grouped by category list of user interface elements:

All UAs are expected to support rendering the appearance of the five generic user interface elements: icon, window, button, menu and field. If a UA or platform does not support a specific user interface element (e.g. dialog), it may apply the values for the respective generic user interface element (e.g. window).

4.2. System fonts

CSS2 introduced system font values as values for the shorthand 'font' property which have the effect of setting all the elemental 'font-*' properties. This specification adds the list of 'appearance' control values to the set of system fonts to allow styling text the same as such system controls.

Name: font
System values: icon | window | status-bar | document | workspace | desktop | tooltip | message-box | dialog | small-caption | caption | button | default-button | hyperlink | menu | pull-down-menu | pop-up-menu | list-menu | field | inherit
Initial: normal
Applies to: all elements
Inherited: no
Percentages: N/A
Media: interactive
icon
The font used to label icons.
window
The font used in the content of a window.
status-bar
The font used in window status bars.
document
The font used for the content of a document window.
workspace
The font used in a workspace window.
desktop
The font used on the desktop.
tooltip
The font used in a tooltip window.
dialog
message-box (for compatibility with CSS2)
The font used in dialog boxes.
small-caption
The font used for labeling small controls.
caption
The font used for captioned controls (e.g., buttons, drop-downs, etc.).
button
The font used for buttons.
default-button
The font used for default buttons.
hyperlink
The font used for hyperlinks.
menu
The font used in menus (e.g., dropdown menus and menu lists).
pull-down-menu
The specific font used in pull-down menus.
pop-up-menu
The specific font used in popup menus.
list-menu
The specific font used in menu lists.
field
The specific font used in forms text fields (input or output).

5. Symbolic value additions to 'content' and 'list-style-type'

5.1. 'content' property value additions

This specification extends the 'content' property to accept additional symbolic values, and to apply to all elements, thereby enabling the replacement of an element's contents with a resource referenced by <uri> for display purposes.

Name: content
New Values: normal | <uri> | disc | circle | square | box | check | diamond
Initial: normal
Applies to: all elements
Inherited: no
Percentages: N/A
Media: all
normal
The contents of the element are determined by the document source. Since the :before and :after generated content pseudo-elements have no document source to begin with, their initial content property value is effectively an empty string, as defined in CSS2.
<uri>
Replace the contents of the element with the contents of the URI specified.
disc
circle
square
box
See description of these values for list-style-type.
check
A check mark.
diamond
A filled diamond.

Some of the additional values for 'content' symbolically specify list annotations that were previously only available through list-style-type and hardcoded for OPTION elements that were SELECTED. The exact rendering of check and diamond depends on the user agent, but it is suggested that the same glyph which is used on the platform to render a "checked" menu item be used for 'check', and similarly for those platforms which support rendering of a "diamond" next to a menu item. Conformant user agents may render 'diamond' the same as 'check'.

5.2. 'list-style-type' property value additions

The same symbolic values added to the 'content' property are also added to the list-style-type property.

Name: list-style-type
New Symbolic Values: check | diamond
Initial: disc
Applies to: elements with 'display: list-item'
Inherited: yes
Percentages: N/A
Media: visual

See the 'content' property above for definitions of the new values.

6. Box Model Additions

This specification documents several additions to the box model which are necessary to model the typical layout and formatting of user interface elements. It is expected that these box model additions may be incorporated into a future draft of the CSS3 module: Box Model. If and when such a draft is published, this specification shall be updated to include these features by reference rather than by defining them here.

6.1. Additional values for 'display' property

Note. It is expected that CSS2.1 will add the 'inline-block' value to the 'display' property. At that point, this draft can simply refer to CSS2.1 and omit the definition of 'inline-block'.

Name: display
New Values: inline-block | icon
Initial: inline
Applies to: all elements
Inherited: no
Percentages: N/A
Media: all

The 'inline-block' value for 'display' specifies that an element is to be formatted as a block, but that this block can sit on a line with other elements, similar to the way replaced/empty elements such as IMG and OBJECT and the containers TEXTAREA and BUTTON do.

inline-block
The element is formatted as a block, and adjacent inline elements are formatted on the same line space permitting.
icon
The element is replaced in its entirety by the resource referenced by its 'icon' property, and treated as a replaced element, visually formatted as an inline-block.

6.2. 'icon' property

Name: icon
Value: auto | (<uri>)+
Initial: auto
Applies to: all elements
Inherited: no
Percentages: N/A
Media: all
auto
Use a default generic icon provided by the user agent.
(<uri>)+
References to one or more icons. 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.

The 'icon' 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 'display' property is set to the value 'icon' (see above). Documents whose elements have icons assigned to them can be more easily viewed by users who find too much text distracting.

A user could simply add a rule such as:

p { display:icon }

which would then render an icon in place of each paragraph.

6.3. 'box-sizing' property

Name: box-sizing
Value: content-box | border-box | inherit
Initial: content-box
Applies to: all elements that accept width or height
Inherited: no
Percentages: N/A
Media: same as width and height

Description

content-box
This is the behavior of width and height as specified by CSS2. The specified width and height 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.
border-box
The specified width and height 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 is computed by subtracting the border and padding widths of the respective sides from the specified width and height. This is the behavior of width and height as commonly implemented by legacy HTML user agents for replaced elements and input elements.

7. Outline properties

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:

  1. Outlines do not take up space.
  2. Outlines may be non-rectangular.

The outline properties control the style of these dynamic outlines.

7.1. 'outline' property

Name: outline
Value: [ <'outline-color'> || <'outline-style'> || <'outline-width'> ] | inherit
Initial: see individual properties
Applies to: all elements
Inherited: no
Percentages: N/A
Media: visual

7.2. 'outline-width' property

Name: outline-width
Value: <border-width> | inherit
Initial: medium
Applies to: all elements
Inherited: no
Percentages: N/A
Media: visual

7.3. 'outline-style' property

Name: outline-style
Value: <border-style> | inherit
Initial: none
Applies to: all elements
Inherited: no
Percentages: N/A
Media: visual

7.4. 'outline-color' property

Name: outline-color
Value: <color> | invert | inherit
Initial: invert
Applies to: all elements
Inherited: no
Percentages: N/A
Media: visual

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.

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.

The 'outline-width' property accepts the same values as 'border-width'.

The 'outline-style' property accepts the same values as 'border-style', except that 'hidden' is not a legal outline style.

The 'outline-color' accepts all colors, as well as the keyword 'invert'. '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.

The 'outline' property is a shorthand property, and sets all three of 'outline-style', 'outline-width', and 'outline-color'.

Note. that the outline is the same on all sides. In contrast to borders, there is no 'outline-top' or 'outline-left' property.

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.

Note. Since the focus 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.

7.5. 'outline-offset' property

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.

Name: outline-offset
Value: <length> | inherit
Initial: 0
Applies to: all elements
Inherited: no
Percentages: N/A
Media: visual

If the computed value of 'outline-offset' is anything other than 0, then the outline is outset from the border edge by that amount.

Example(s):

Here's an example of drawing a thick outline around a BUTTON element:

button { outline-width : thick }

Scripts may be used to dynamically change the width of the outline, without provoking reflow.

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.).

Example(s):

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:

:focus  { outline: thick solid black }
:active { outline: thick solid red }

8. Scrolling and Resizing

CSS2 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.

8.1. Overflow properties

CSS2 introduced the 'overflow' property. This specification recasts the 'overflow' property as a shorthand property which sets the 'overflow-x' and 'overflow-y' elemental properties.

8.1.1. 'overflow' property

Name: overflow
Value: visible | hidden | scroll | auto | inherit
Initial: visible
Applies to: block-level and replaced elements
Inherited: no
Percentages: N/A
Media: visual

This property specifies whether the content of a block-level element is clipped when it overflows the element's box (which is acting as a containing block for the content). Values have the following meanings:

visible
This value indicates that content is not clipped, i.e., it may be rendered outside the block box.
hidden
This value indicates that the content is clipped to the content box and that no scrolling mechanism should be provided to view the content outside the clipping region; users will not have direct access to clipped content (though access through some alternative mechanism, such as the DOM may still be possible).
scroll
This value indicates that the content is clipped to the content box and that if the user agent uses a scrolling mechanism that is visible on the screen (such as a scrollbar or a panner), that mechanism should be displayed for a box whether or not any of its content is clipped. This avoids any problem with scrollbars appearing and disappearing in a dynamic environment. When this value is specified and the target medium is 'print' or 'projection', overflowing content should be printed.
auto
The behavior of the 'auto' value is user agent-dependent, but should cause a scrolling mechanism to be provided for overflowing boxes.

Even if 'overflow' is set to 'visible', content may be clipped to a UA's document window by the native operating environment.

Example(s):

Consider the following example of a block quotation (BLOCKQUOTE) that is too big for its containing block (established by a DIV). Here is the source document:

<DIV>
<BLOCKQUOTE>
<P>I didn't like the play, but then I saw
it under adverse conditions - the curtain was up.
<DIV class="attributed-to">- Groucho Marx</DIV>
</BLOCKQUOTE>
</DIV>

Here is the style sheet controlling the sizes and style of the generated boxes:

div { width : 100px; height: 100px;
      border: thin solid red;
      }

blockquote { width : 125px; height : 100px;
      margin-top: 50px; margin-left: 50px; 
      border: thin dashed black
      }

div.attributed-to { text-align : right; }

The initial value of 'overflow' is 'visible', so the BLOCKQUOTE would be formatted without clipping, something like this:

Rendered overflow   [D]

Setting 'overflow' to 'hidden' for the DIV element, on the other hand, causes the BLOCKQUOTE to be clipped by the containing block:

Clipped overflow   [D]

A value of 'scroll' would tell UAs that support a visible scrolling mechanism to display one so that users could access the clipped content.

8.1.2. 'overflow-x' property

Name: overflow-x
Value: visible | hidden | scroll | auto | inherit
Initial: visible
Applies to: block-level and replaced elements
Inherited: no
Percentages: N/A
Media: visual

All values are treated the same as for 'overflow', but on this property, they only affect whether or not the element is horizontally clipped or has a horizontal scrolling mechanism.

8.1.3. 'overflow-y' property

Name: overflow-y
Value: visible | hidden | scroll | auto | inherit
Initial: visible
Applies to: block-level and replaced elements
Inherited: no
Percentages: N/A
Media: visual

All values are treated the same as for 'overflow', but on this property, they only affect whether or not the element is vertically clipped or has a vertical scrolling mechanism.

8.2. 'resizer' property

The 'resizer' property allows the author to specify whether or not an element is resizable by the user, and if so, along which axis/axes.

Name: resizer
Value: auto | both | horizontal | vertical | none | inherit
Initial: auto
Applies to: all elements
Inherited: no
Percentages: N/A
Media: interactive

Currently it is possible to control the appearance of the scrolling mechanism (if any) on an element using the overflow property (e.g. 'overflow: scroll' vs. 'overflow: hidden' etc.). The purpose of the resizer 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.

Note: the resizing mechanism is NOT the same as the scrolling mechanism. The scrolling mechanism allows the user to determine which portion of a the contents of an element is shown. The resizing mechanism allows the user to determine the size of the element. The user agent may restrict the resizing range to something suitable, such as between the formatted size of the element, and large enough to encompass all the elements contents.

The 'resizer' property applies to elements whose computed overflow value is something other than 'visible'. If overflow is different in a particular axis (i.e. overflow-x vs. overflow-y), then this property applies to the dimension(s) which do not have the value 'visible'.

When the user manipulates the resizer, the actual width and height of the element are altered accordingly. 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 'right' and 'bottom' 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.

auto
Whatever is the default for the UA and platform.
both
The UA presents a bi-directional resizing mechanism to allow the user to adjust both the height and the width of the element.
horizontal
The UA presents a unidirectional horizontal resizing mechanism to allow the user to adjust only the width of the element.
vertical
The UA presents a unidirectional vertical resizing mechanism to allow the user to adjust only the height of the element.
none
The UA does not present a resizing mechanism on the element, and the user is given no direct manipulation mechanism to resize the element.

Example:

html {
       width: 100px; 
       height: 100px;
       overflow: hidden;
       resizer: none 
     } /* display content in a non-resizable 100px by 100px window */

9. Mouse and Keyboard

9.1. 'cursor' property

Name: cursor
Value: [ [<uri> ,]* [ auto | crosshair | default | pointer | move | e-resize | ne-resize | nw-resize | n-resize | se-resize | sw-resize | s-resize | w-resize| text | wait | help | progress | copy | alias | context-menu | cell | all-scroll | col-resize | row-resize | no-drop | not-allowed | vertical-text ] ] | inherit
Initial: auto
Applies to: all elements
Inherited: yes
Percentages: N/A
Media: visual and interactive

Description

<uri>
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 should attempt to handle the second, etc. If the user agent cannot handle any user-defined cursor, it must use the generic cursor at the end of the list.
auto
The UA determines the cursor to display based on the current context.
crosshair
A simple crosshair (e.g., short line segments resembling a "+" sign).
default
The platform-dependent default cursor. Often rendered as an arrow.
pointer
The cursor is a pointer that indicates a link.
move
Indicates something is to be moved.
e-resize, ne-resize, nw-resize, n-resize, se-resize, sw-resize, s-resize, w-resize
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.
text
Indicates text that may be selected. Often rendered as a vertical I-bar.
wait
Indicates that the program is busy and the user should wait. Often rendered as a watch or hourglass.
help
Help is available for the object under the cursor. Often rendered as a question mark or a balloon.
progress
A progress indicator. The program is performing some processing, but is different from 'wait' 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.
copy
Indicates something is to be copied. Often rendered as an arrow with a small plus sign next to it.
alias
Indicates an alias of/shortcut to something is to be created. Often rendered as an arrow with a small curved arrow next to it.
context-menu
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.
cell
Indicates that a cell or set of cells may be selected. Often rendered as a thick plus-sign with a dot in the middle.
all-scroll
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.
col-resize
Indicates that the item/column can be resized horizontally. Often rendered as arrows pointing left and right with a vertical bar separating them.
row-resize
Indicates that the item/row can be resized vertically. Often rendered as arrows pointing up and down with a horizontal bar separating them.
no-drop
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.
not-allowed
Indicates that the requested action will not be carried out. Often rendered as a circle with a line through it.
vertical-text
Indicates vertical-text that may be selected. Often rendered as a horizontal I-bar

The UA may treat inapplicable values as 'auto'. E.g. on platforms that do not have a concept of a 'context-menu' cursor, the UA may render 'default' or whatever is appropriate.

9.2. Keyboard control

9.2.1. Keyboard equivalents: the 'key-equivalent' property

Name: key-equivalent
Value: none | (<key-press-combination> )+ | <system-key-equivalent> | list-item-marker | inherit
Initial: none
Applies to: all enabled elements
Inherited: no
Percentages: n/a
Media: interactive

The purpose of this property is to be able to specify what key or combination of keys being simultaneously pressed activates/triggers a particular element. This is typically used to alter the command or control key shortcut used for menu items and form buttons.

Key-equivalents are active in a document only if an element inside the document has the focus (e.g. this can include the <body> element). This also applies to documents inside frames. The frame must first acquire the focus before key-equivalents for any of the elements of its document can be active.

There may be platform and user agent limitations to key-equivalents which conflict with those inherent in the user agent and operating system.

If two or more elements in the same document are given the same key-equivalent, the first (in document order) of such elements is activated by the key-equivalent.

none
No key-equivalent is defined for the element
(<key-press-combination> )+

One or more <key-press-combination>s separated by spaces. The user agent is supposed to use all <key-press-combination>s which it finds in the list which it and the platform is capable of supporting. In some ways this is similar to the list of font families in the font-family property.

A <key-press-combination> is one or more characters with one or more modifier keys separated by dashes ('-'). Each character must be specified in uppercase or as an escaped character (character entity) - the actual user input for the key-equivalency is case insensitive. In addition to characters (representing keys), special or modifier keys can also be specified. These are specified in all lowercase so as to be distinguished from the characters representing keys. The actual list of supported special or modifier keys and characters is platform dependent. For the modifier keys of which there are typically two, the right and the left, the author can either specify both, e.g. cmd, or only the right: rcmd, or only the left: lcmd.

If the specified value for key-equivalent contains a key which is unavailable on the system (for whatever reason), then that specified value is ignored as it would be if the value was an unrecognized value.

Note. Should we include "standard" keys from other consumer computing devices?

<key-press-combination> = <key> ('-' <key>)*
<key> = space | <character[CN]> | <special-key> | accesskey-attr(<attribute>)
<special-key> = <modifier-key> | <function-key> | <navigation-key> | <edit-key> | <misc-key>
<modifier-key> = accesskey | <cmd-key> | <opt-key> | <ctrl-key> | <shift-key> | <alt-key> | <win-key> | <meta-key> | fn | fcn | caps
<cmd-key> = cmd | rcmd | lcmd
<opt-key> = opt | ropt | lopt
<ctrl-key> = ctrl | rctrl | lctrl
<shift-key> = shift | rshift | lshift
<alt-key> = alt | ralt | lalt
<win-key> = win | rwin | lwin
<meta-key> = meta | rmeta | lmeta
<function-key> = f1 | f2 | f3 | f4 | f5 | f6 | f7 | f8 | f9 | f10 | f11 | f12 | f13 | f14 | f15
<navigation-key> = tab | esc | enter | return | menu | help | namemenu | rcl | snd | <arrow-key> | <page-key>
<arrow-key> = up | down | left | right
<page-key> = home | end | pgup | pgdn
<edit-key> = bs | del | ins | undo | cut | copy | paste | clr | sto
<misc-key> = prtsc | sysrq | scrlock | pause | brk | numlock | pwr

'accesskey' is a symbolic value which represents the default "shortcut" or "keyboard accelerator" modifier key for the platform. This value can be used essentially the same way that the ACCESSKEY attribute in HTML4 is used, to specify a single character to be pressed in conjunction with the default shortcut modifier key on the platform.

Examples:

input.cancel { key-equivalent: esc cmd-\2E N } /* cmd-\2E = cmd-. */
  /* non-nmstart characters must be escaped to comply with the CSS grammar */
input.ok     { key-equivalent: return enter Y }
input.open   { key-equivalent: ctrl-O cmd-O accesskey-O}
input.close  { key-equivalent: alt-f4 cmd-W}
input.copy   { key-equivalent: ctrl-C cmd-C copy accesskey-C}
<system-key-equivalent>

The author can also specify the system key-equivalent for a particular command on that platform. System key-equivalents are all named with the system-* prefix, and refer to the command in their name.

Examples:

input.cancel { key-equivalent: system-cancel }
input.ok     { key-equivalent: system-ok }
input.open   { key-equivalent: system-open }
input.close  { key-equivalent: system-close }
input.copy   { key-equivalent: system-copy }
list-item-marker

Use the computed list item marker as the key equivalent.

This enables authors to construct a list of elements with key-equivalents that are determined automatically according to their list numbering (and style).

For example, in a document containing this style sheet:

/* style sheet */
div.navmenu { list-style:decimal }
div.navmenu a { 
 display:list-item; 
 key-equivalent: list-item-marker;
 text-decoration:none
}

The following markup:

<div class='navmenu'>
 <a href='#chocolate'>Chocolate</a>
 <a href='#vanilla'>Vanilla</a>
 <a href='#strawberry'>Strawberry</a>
</div>

Renders as follows:

  1. Chocolate
  2. Vanilla
  3. Strawberry

Where the items are automatically given the key-equivalents \31, \32, \33 respectively without the author having to manually specify them. Similarly, if the author specified 'list-style:upper-latin' on the div.navmenu, then the hyperlinks would have the key-equivalents A, B, C - again, the same as their list item markers.

Note. Other values may be permitted in future levels of CSS.

Previously known as 'tab-index', this property has been renamed, and redefined in terms of an input-method-neutral definition, that is, in terms of a sequential navigation order rather than tabbing order.

Name: nav-index
Value: auto | <number> | inherit
Initial: auto
Applies to: all enabled elements
Inherited: no
Percentages: n/a
Media: interactive
auto
The element's sequential navigation order is assigned automatically by the user agent.
<number>
The number (which is non-zero and positive) indicates the sequential navigation order for the element. '1' means first. Elements with the same nav-index value are navigated in document order when that nav-index value is being navigated.

This property is a replacement for the HTML4 attribute TABINDEX. Borrowed and slightly rephrased from the HTML4 recommendation:

This property specifies the position of the current element in the sequential navigation order for the current document.

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.

Elements that may receive focus should be navigated by user agents according to the following rules:

  1. 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.
  2. Those elements that do not support the nav-index property or support it and assign it a value of 'auto' are navigated next. These elements are navigated in the order they appear in the character stream.
  3. Elements that are disabled do not participate in the sequential navigation order.

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).

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). "shift-tab" is often used for reverse sequential navigation.

Names: nav-up, nav-right, nav-down, nav-left
Value: auto | <uri> | inherit
Initial: auto
Applies to: all enabled elements
Inherited: no
Percentages: N/A
Media: interactive
auto
The user agent automatically determines which element to navigate the focus to in response to directional navigational input.
<uri>
The <uri> should indicate (through the use of a fragment identifier) the element to which the focus is to be navigated to in response to directional navigation input respective to the specific property.

User agents for devices with keyboards with arrow keys may respond to the four directional arrow keys (up arrow, right arrow, down arrow, left arrow) by navigating the focus according to four respective nav-* directional navigation properties (nav-up, nav-right, nav-down, nav-left).

Appendix A. Additions to the Base Style Sheet for HTML4

Potential additions to the base style sheet to express HTML4 form elements and a few HTML4 dynamic presentation attributes:


a[href] { 
 appearance: hyperlink; /* set color, font, background, padding, border, etc.*/
 cursor: pointer;
}

a[href]:focus {
 outline: 2px inset inverse;
}

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;
 cursor: default;
}

input[type=button],
input[type=reset][value],
input[type=submit][value]
{
/* content and formatting of text in HTML4 input buttons */
 content: attr(value);
}

input[type=reset]
{
/* default content of HTML4 input type=reset button */
 content: "Reset";
}

input[type=submit]
{
 appearance: default-button;
 content: "Submit";
}

textarea,
input,
input[type=text],
input[type=hidden],
input[type=password]
{
 appearance:field;
 white-space: nowrap;
/* user interface */
 cursor: text;
}

input[type=hidden] 
{
/* appearance of the HTML4 hidden text field in particular */
 display: none;
}

textarea,
button
{
/* appearance of BUTTON and TEXTAREA tags in particular */
 white-space:normal;
}

input[type=image]
{
 display: inline-block;
 content: url(attr(src));
 border: none;
}

select[size]
{
/* SELECT with size>1 - appearance of list */
 appearance: list;
 display: inline-block;
 height: attr(size,em);
}

select,select[size=1]
{
/* SELECT with no size attribute, or size=1 - popup-menu */
 appearance: popup-menu;
 display: inline-block;
 height: 1em;
 overflow: hidden;
}

select[size]:active
{
/* active SELECT with size>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 
{ 
 content: check; display: inline;
}

*[accesskey]:enabled 
{ 
 key-equivalent:accesskey-attr(accesskey);
}

*[noresize] { resizer:none }

*[tabindex] { nav-index:attr(tabindex) }

/* other inline-block elements in HTML4 */
img, object, applet, embed, iframe, frame, frameset 
{ 
 display:inline-block; 
}


Acknowledgments

[acknowledgments]

Normative References

[CSS2]
Bert Bos; Hċkon Wium Lie; Chris Lilley; Ian Jacobs. Cascading Style Sheets, level 2. 1998. W3C Recommendation. URL: http://www.w3.org/TR/REC-CSS2
[SELECT]
Daniel Glazman; Tantek Çelik; Ian Hickson; et al. Selectors. 13 Nov 2001. W3C Candidate Recommendation. URL: http://www.w3.org/TR/2001/CR-css3-selectors-20011113
[XFORMS10]
M. Dubinko; J. Dietl; L. Klotz; R. Merrick; T.V. Raman. XForms 1.0. 18 January 2002. W3C Last Call Working Draft. (Work in progress.) URL: http://www.w3.org/TR/2002/WD-xforms-20020118/

Informative References

[CSSUI]
Tantek Çelik; Peter Linss; Sho Kuwamoto. User Interface for CSS3. 16 February 2000. W3C Working Draft. (Work in progress.) URL: http://www.w3.org/TR/2000/WD-css3-userint-20000216

Index

Property index

Property Values Initial Applies to Inh. Percentages Media
appearance normal | icon | window | document | workspace | desktop | tooltip | dialog | button | default-button | hyperlink | menu | pull-down-menu | pop-up-menu | list-menu | field | inherit normal all elements no N/A interactive
box-sizing content-box | border-box | inherit content-box all elements that accept width or height no N/A same as width and height
content normal | <uri> | disc | circle | square | box | check | diamond normal all elements no N/A all
cursor [ [<uri> ,]* [ auto | crosshair | default | pointer | move | e-resize | ne-resize | nw-resize | n-resize | se-resize | sw-resize | s-resize | w-resize| text | wait | help | progress | copy | alias | context-menu | cell | all-scroll | col-resize | row-resize | no-drop | not-allowed | vertical-text ] ] | inherit auto all elements yes N/A visual and interactive
display inline-block | icon inline all elements no N/A all
font icon | window | status-bar | document | workspace | desktop | tooltip | message-box | dialog | small-caption | caption | button | default-button | hyperlink | menu | pull-down-menu | pop-up-menu | list-menu | field | inherit normal all elements no N/A interactive
icon auto | (<uri>)+ auto all elements no N/A all
key-equivalent none | (<key-press-combination> )+ | <system-key-equivalent> | list-item-marker | inherit none all enabled elements no n/a interactive
list-style-type check | diamond disc elements with 'display: list-item' yes N/A visual
nav-index auto | <number> | inherit auto all enabled elements no n/a interactive
nav-up, nav-right, nav-down, nav-left auto | <uri> | inherit auto all enabled elements no N/A interactive
outline [ <'outline-color'> || <'outline-style'> || <'outline-width'> ] | inherit see individual properties all elements no N/A visual
outline-color <color> | invert | inherit invert all elements no N/A visual
outline-offset <length> | inherit 0 all elements no N/A visual
outline-style <border-style> | inherit none all elements no N/A visual
outline-width <border-width> | inherit medium all elements no N/A visual
overflow visible | hidden | scroll | auto | inherit visible block-level and replaced elements no N/A visual
overflow-x visible | hidden | scroll | auto | inherit visible block-level and replaced elements no N/A visual
overflow-y visible | hidden | scroll | auto | inherit visible block-level and replaced elements no N/A visual
resizer auto | both | horizontal | vertical | none | inherit auto all elements no N/A interactive