CSS Basic User Interface Module Level 4

1. Introduction

This module describes CSS properties which enable authors to style user interface related properties and values.

Section 2.1 of CSS1 [CSS1] and Chapter 18 of CSS2 [CSS21] introduced several user interface related properties and values. User Interface for CSS3 (16 February 2000) introduced several new user interface related features.

[CSS-UI-3] was later introduced to incorporate, extend, and supersede these. This specification continues this work, and in turn replaces [CSS-UI-3].

1.1. Purpose

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

• Extend the user interface features in [CSS21] and [CSS-UI-3]
• 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.

2. Module Interactions

This document defines new features not present in earlier specifications. In addition, it replaces and supersedes [CSS-UI-3], which itself replaced and superseded the following:

• Section 18.1, section 18.4, and Information on the stacking of outlines defined in Appendix E of Cascading Style Sheets, level 2, revision 1 [CSS21]
• User Interface for CSS3 (16 February 2000) [CSS-UI-3]

Note: The box-sizing property was previously defined in this section of the specification, but has been moved to CSS Sizing 3 § 3.3 Box Edges for Sizing: the box-sizing property.

Note: The text-overflow property was previously defined in this section of the specification, but has been moved to CSS Overflow 3 § 5.1 Overflow Ellipsis: the text-overflow property.

2.1. Value Definitions

This specification follows the CSS property definition conventions from [CSS21] using the value definition syntax from [CSS-VALUES-3]. Value types not defined in this specification are defined in CSS Values & Units [CSS-VALUES-3]. Combination with other CSS modules may expand the definitions of these value types.

In addition to the property-specific values listed in their definitions, all properties defined in this specification also accept the CSS-wide keywords as their property value. For readability they have not been repeated explicitly.

3. 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 contribute to the ink overflow area of an element.
3. Outlines may be non-rectangular.
4. UAs often render outlines on elements in the :focus-visible state.

The outline properties control the style of these dynamic outlines.

The stacking of the rendering of these outlines is explicitly left up to implementations to provide a better user experience per platform. This supersedes the stacking of outlines as defined in Appendix E of CSS 2.1 [CSS21].

Keyboard users, in particular people with disabilities who may not be able to interact with the page in any other fashion, depend on the outline being visible on elements in the :focus-visible state, thus authors must not make the outline invisible on such elements without making sure an alternative highlighting mechanism is provided.

The rendering of applying transforms to outlines is left explicitly undefined.

3.1. Outlines Shorthand: the outline property

The outline property is a shorthand property and sets all three of outline-style, outline-width, and outline-color. In the ambiguous case where a lone auto value is specified, or if auto is specified together with an <'outline-width'> value, but without an explicit <'outline-style'> or <'outline-color'> value, both outline-style and outline-color are set to auto.

Note: The shorthand purposefully omits the outline-offset property, which determines the position rather than the appearance of the outline, so that it can cascade independently, as well as for backwards compatibility reasons.

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. To the extent that the outline follows the border edge, it should follow the border-radius curve, as well as the corner-shape.

The position of the outline may be affected by descendant boxes.

The dimensions of the drawn outline contribute to the ink overflow area of an element.

User agents should use an algorithm for determining the outline that encloses a region appropriate for conveying the concept of focus to the user.

Note: This specification does not define the exact position or shape of the outline, but it is typically drawn immediately outside the border box.

Note: The outline is the same on all sides. In contrast to borders, there are no outline-top, outline-left, etc. properties.

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.

button { outline: thick solid }

Graphical user interfaces may use outlines around elements to tell the user which element on the page has the focus. These outlines are shown 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 or selecting a button).

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

Note: 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.

3.2. Outline Thickness: the outline-width property

The outline-width property accepts the same values as border-width (CSS Backgrounds 3 § 3.3 Line Thickness: the border-width properties), with the same meaning.

3.3. Outline Patterns: the outline-style property

<outline-line-style> accepts the same values as <line-style> (CSS Backgrounds 3 § 3.2 Line Patterns: the border-style properties) with the same meaning, except that hidden is not a legal outline style. In addition, the outline-style property accepts the value auto.

The auto 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. User agents may enable authors to influence the rendering of auto style outlines via the outline-color property, but this specification does not define how the rendering is impacted (if at all). The outline-width property is ignored when outline-style is auto. User agents may treat auto as solid.

3.4. Outline Colors: the outline-color property

The outline-color property accepts all values of <border-color>, as well as the following keywords:

auto

When outline-style is auto, outline-color: auto computes to auto and represents the accent color.

Otherwise, outline-color: auto computes to currentColor.

See CSS Color 4 §  14. Resolving <color> Values for the computed value of <color> values, and CSS Images 4 § 4 1D Image Values: the <image-1D> type and stripes() notation for <image-1D> values.

3.5. Offsetting the Outline: the 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.

If the computed value of