CSS Basic User Interface Module Level 3 (CSS3 UI)

ED: http://dev.w3.org/csswg/css-ui/
TR: http://www.w3.org/TR/css3-ui/
Previous Version: http://www.w3.org/TR/2012/WD-css3-ui-20120117/
Shortname: css-ui
Level: 3
Group: csswg
!Issue Tracking: http://wiki.csswg.org/spec/css3-ui
Status: ED
Editor: Tantek Çelik, Mozilla http://www.mozilla.org, tantek@cs.stanford.edu, http://tantek.com

Abstract: This specification describes user interface related selectors,
          properties and values that are proposed for CSS level 3
          to style HTML and XML (including XHTML).
          It includes and extends user interface related features from the selectors,
          properties and values of CSS level 2 revision 1 and Selectors specifications.
          It uses various selectors,
          properties and values to style basic user interface elements in a document.
Deadline: 2012-02-14
Link Defaults: css-color-3 (property) color
Link Defaults: selectors-4 (selector) :indeterminate
Link Defaults: css21 (property) border-width
Link Defaults: css21 (property) border-style
Ignored Terms: outline-top
Ignored Terms: outline-left
At Risk: ::value ::choices pseudo-elements
At Risk: 'box-sizing' property value: padding-box
At Risk: 'caret-color' property
At Risk: 'ime-mode' property
At Risk: 'text-overflow' property value: <string>
At Risk: 'text-overflow' property 2-value syntax and definition

Introduction

Purpose

• Extend the user interface features in CSS2.1.
• Provide additional CSS mechanisms to augment or replace other dynamic presentation related features in HTML.
• Introduce directional navigation properties to assist in the construction of user interfaces which make use of a directional navigation model.

Module Interactions

• Section 18.1 and section 18.4 of Cascading Style Sheets, level 2, revision 1 [[CSS21]]
• User Interface for CSS3 (16 February 2000) [[CSSUI]]

User Interface Selectors

User interface element fragments: pseudo-elements

• ::value
• ::choices

::value

::choices

Box Model addition

'box-sizing' property

content-box

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.

padding-box

The specified width and height (and respective min/max properties) on this element determine the padding box of the element. That is, any padding 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 padding widths of the respective sides from the specified 'width' and 'height' properties. As the content width and height cannot be negative ([[!CSS21]], section 10.2), this computation is floored at 0.

border-box

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 'width' and 'height' properties. As the content width and height cannot be negative ([[!CSS21]], section 10.2), this computation is floored at 0. Note: This is the behavior of width and height as commonly implemented by legacy HTML user agents for replaced elements and input elements.

div.container {
	width:38em;
	border:1em solid black;
}

div.split {
	box-sizing:border-box;
	width:50%;
	border:1em silver ridge;
	float:left;
}

<div class="container">
<div class="split">This div occupies the left half.</div>
<div class="split">This div occupies the right half.</div>
</div>

Outline properties

1. Outlines do not take up space.
2. Outlines may be non-rectangular.
3. UAs often render outlines on elements in the :focus state.

'outline' property

'outline-width' property

'outline-style' property

'outline-color' property

button { outline: thick solid }

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

'outline-offset' property

:focus,:active  { outline-offset: 2px }

Resizing & Overflow

'resize' property

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.

both

The UA presents a bidirectional 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.

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]'.

iframe,object[type^="text/"],
object[type$="+xml"],object[type="application/xml"]
{
  overflow:auto;
  resize:both;
}

Overflow Ellipsis: the 'text-overflow' property

clip

Clip inline content that overflows. Characters may be only partially rendered.

ellipsis

Render an ellipsis character (U+2026) to represent clipped inline content. Implementations may substitute a more language/script-appropriate ellipsis character, or three dots "..." if the ellipsis character is unavailable.

<>

Render the given string to represent clipped inline content. The given string is treated as an independent paragraph for bidi purposes.

ellipsing details

• Ellipsing only affects rendering and must not affect layout nor dispatching of pointer events.
• The ellipsis is styled and baseline-aligned according to the block.
• Ellipsing occurs after relative positioning and other graphical transformations.
• If there is insufficient space for the ellipsis, then clip the rendering of the ellipsis itself (on the same side that neutral characters on the line would have otherwise been clipped with the ''clip'' value).

user interaction with ellipsis

• When the user is interacting with content (e.g. editing, selecting, scrolling), the user agent may treat text-overflow ''ellipsis'' or string values as ''clip''.
• Selecting the ellipsis should select the ellipsed text. If all of the ellipsed text is selected, UAs should show selection of the ellipsis. Behavior of partially-selected ellipsed text is up to the UA.

div {
  font-family:Helvetica,sans-serif; line-height:1.1;
  width:3.1em; padding:.2em; border:solid .1em black; margin:1em 0;
}

<div>
CSS IS AWESOME, YES
</div>

<div style="text-overflow:clip; overflow:hidden">
CSS IS AWESOME, YES
</div>

<div style="text-overflow:ellipsis; overflow:hidden">
CSS IS AWESOME, YES
</div>

<div style="text-overflow:ellipsis; overflow:hidden">
NESTED
 <p>PARAGRAPH</p>
WON'T ELLIPSE.
</div>

ellipsis interaction with scrolling interfaces

div.crawlbar {
	text-overflow: ellipsis;
	height: 2em;
	overflow: scroll;
	white-space: nowrap;
	width: 15em;
	border:1em solid black;
}

<div class="crawlbar">
CSS is awesome, especially when you can scroll 
to see extra text instead of just
having it overlap other text by default.
</div>

Pointing Devices and Keyboards

Pointer interaction

'cursor' property

<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 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. Conforming User Agents may, instead of <uri>, support <image> which is a superset. The default object size for cursor images is a UA-defined size that should be based on the size of a typical cursor on the UA's operating system. The optional <x> and <y> coordinates identify the exact position within the image which is the pointer position (i.e., the hotspot).

<x>

<y>

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. If the coordinates of the hotspot, as specified either inside the image resource or by <x> and <y> values, fall outside of the cursor image, they must be clamped (independently) to fit.

auto

The UA determines the cursor to display based on the current context.

default

The platform-dependent default cursor. Often rendered as an arrow.

none

No cursor is rendered for the element.

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.

help

Help is available for the object under the cursor. Often rendered as a question mark or a balloon.

pointer

The cursor is a pointer that indicates a link.

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.

wait

Indicates that the program is busy and the user should wait. Often rendered as a watch or hourglass.

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.

crosshair

A simple crosshair (e.g., short line segments resembling a "+" sign). Often used to indicate a two dimensional bitmap selection mode.

text

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 ''vertical-text'' keyword) for vertical text, or for that matter, any angle of I-beam/cursor for text that is rendered at any particular angle.

vertical-text

Indicates vertical-text that may be selected. Often rendered as a horizontal I-beam.

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.

copy

Indicates something is to be copied. Often rendered as an arrow with a small plus sign next to it.

move

Indicates something is to be moved.

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.

grab

Indicates that something can be grabbed (dragged to be moved). Often rendered as the backside of an open hand.

grabbing

Indicates that something is being grabbed (dragged to be moved). Often rendered as the backside of a hand with fingers closed mostly out of view.

e-resize, n-resize, ne-resize, nw-resize, s-resize, se-resize, sw-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.

ew-resize, ns-resize, nesw-resize, nwse-resize

Indicates a bidirectional resize cursor.

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.

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.

zoom-in, zoom-out

Indicates that something can be zoomed (magnified) in or out, and often rendered as a magnifying glass with a "+" or "-" in the center of the glass, for ''zoom-in'' and ''zoom-out'' respectively.

:link,:visited {
    cursor: url(example.svg#linkcursor),
            url(hyper.cur),
            url(hyper.png) 2 3,
            pointer
}

Cursor of the canvas

Insertion caret

Coloring the insertion caret: caret-color

auto

the color of the element.

<color>

the insertion caret is colored with the specified color.

Keyboard control

Directional focus navigation: the 'nav-up', 'nav-right', 'nav-down', 'nav-left' properties

auto

The user agent automatically determines which element to navigate the focus to in response to directional navigational input.

<id>

The <id> value is an ID selector [[SELECT]]. In response to directional navigation input corresponding to the property, the focus is navigated to the first element in tree order matching the selector. If this 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. If no element matches the selector, the user agent automatically determines which element to navigate the focus to.

<target-name>

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 ''current'', which means to simply use the frame that the element is in. The keyword ''root'' indicates that the user agent should target the full window.

button { position:absolute }

button#b1 {
	top:0; left:50%;
	nav-right:#b2; nav-left:#b4;
	nav-down:#b2; nav-up:#b4;
}

button#b2 {
	top:50%; left:100%;
	nav-right:#b3; nav-left:#b1;
	nav-down:#b3; nav-up:#b1;
}

button#b3 {
	top:100%; left:50%;
	nav-right:#b4; nav-left:#b2;
	nav-down:#b4; nav-up:#b2;
}

button#b4 {
	top:50%; left:0;
	nav-right:#b1; nav-left:#b3;
	nav-down:#b1; nav-up:#b3;
}

button#foo { nav-left: #bar "sidebar"; }

Input method editor: the 'ime-mode' property

auto

No change is made to the current input method editor state. This is the default.

normal

The IME state should be normal; this value can be used in a user style sheet to override the page setting.

active

The input method editor is initially active; text entry is performed using it unless the user specifically dismisses it.

inactive

The input method editor is initially inactive, but the user may activate it if they wish.

disabled

The input method editor is disabled and may not be activated by the user.

<input type="text" name="name" value="initial value" style="ime-mode: disabled">

input[type=password] {
    ime-mode: auto !important;
}

Appendix A. Acknowledgments

Appendix B. Changes

• Minor refinements to features based on implementation experience.
• Dropping features that were not implemented, or were insufficiently implemented to exit CR.
• Adding a small number of new but already interoperably implemented features.

List of substantial changes

• System Appearance has been dropped, including appearance values & property, and system fonts / extension of the 'font' property shorthand.
• The ::selection pseudo-element has been dropped since it was dropped from Selectors after testing found interoperability problems and further details to explore/define.
• 'box-sizing' property. Added ''padding-box'' value.
• 'cursor' property. Added detail about applying to the border, padding, and content areas of the element.
• 'ime-mode' property - new!
• 'text-overflow' property - new!
• 2013-nov-28: 'nav-up', 'nav-right', 'nav-down', and 'nav-left' properties removed from the "at risk" list

Appendix C. Default style sheet additions for HTML

: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]
{
 display: inline-block;
 white-space: nowrap;
}

button
{
/* white space handling of BUTTON tags in particular */
 white-space:normal;
}

input[type=reset]:lang(en)
{
/* default content of HTML input type=reset button, per language */
 content: "Reset";
}

input[type=submit]:lang(en)
{
/* default content of HTML input type=submit button, per language */
 content: "Submit";
}

/* UAs should use language-specific Reset/Submit rules for others. */

input[type=button],
input[type=reset][value],
input[type=submit][value]
{
/* text content/labels of HTML "input" buttons */
 content: attr(value);
}

textarea
{
/* white space handling of TEXTAREA tags in particular */
 white-space:pre-wrap;
}

input[type=hidden]
{
/* appearance of the HTML 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 */
 display: inline-block;
 height: attr(size,em);
}

select,select[size=1]
{
/* HTML4/XHTML1 <select> without size, or size=1 - popup-menu */
 display: inline-block;
 height: 1em;
 overflow: hidden;
}

select[size]:active
{
/* active HTML <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;
}

/* 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 }

*/

Appendix D: Test Suite