CSS Basic User Interface

Intermediate

Basic UI CSS is the presentation owner for CSS features that directly control common user-interface affordances: cursors, focus outlines, text selection, carets, resizing, native appearance, and accent-color styling. It does not define HTML control semantics, event APIs, focus management, or accessibility semantics.

The boundary is intentional. HTML and ARIA determine what a control means; the Web Platform determines interaction APIs; CSS Basic UI determines how common UI affordances are styled or exposed to CSS.

The cursor communicates pointer affordance

The `cursor` property selects the cursor displayed while the pointer is over an element. CSS can use predefined cursor keywords or a custom cursor image with a fallback keyword.

A cursor is a visual affordance, not an event handler. Setting `cursor: pointer` does not make an element clickable and does not change its HTML semantics.

Focus outlines are a visual focus affordance

The `outline` properties paint an outline around an element without changing its box-model dimensions. Outline styling is therefore different from borders and should not be used as a substitute for the Box Model.

A visible focus indication is an important UI affordance. CSS can style it, but CSS does not decide which element receives focus or implement focus management.

The caret is a text-editing affordance

Caret animation and shape are additional caret controls

CSS Basic User Interface Level 4 also defines `caret-animation` and `caret-shape`. `caret-animation: manual` lets an author take control of caret animation, while `caret-shape` selects the caret form. These properties change the presentation of the insertion caret; they do not change text editing behavior or selection APIs.

The `caret` shorthand combines `caret-color`, `caret-animation`, and `caret-shape` for authors who need to set the insertion-caret controls together.

?

`caret-color` controls the color of the insertion caret in editable text. It changes the presentation of an editing affordance, not the selection or editing API.

Text selection can be controlled by CSS

`user-select` controls whether and how text can be selected by the user. This is an interaction affordance, not the Selection API; script-driven selection belongs to the Web Platform.

Resize controls whether an element can be resized

The `resize` property controls whether an element offers a user-facing resize mechanism when the element supports resizing. The property does not itself create a resizable widget or replace the HTML control semantics.

Native appearance can be requested or removed

The `appearance` property controls whether an element uses a native/user-agent appearance or a CSS-styled appearance where the relevant value and implementation permit it. Removing native appearance does not recreate control behavior; it only changes presentation.

Because native controls have semantics and behavior beyond their pixels, replacing appearance should be followed by deliberate styling of the visual states the control needs. CSS is not a replacement for keyboard behavior, activation behavior, or accessible semantics.

accent-color exposes a theme accent for supported controls

`accent-color` supplies a preferred accent color for user-interface controls that expose an accent in the user agent. The browser remains responsible for the control and its state presentation.

UI CSS must respect the control state model

Pseudo-classes such as `:hover`, `:focus`, `:focus-visible`, `:disabled`, and `:checked` let CSS respond to states exposed by the user agent. The pseudo-classes describe state; they do not implement the underlying interaction.

UI presentation is different from accessibility semantics

CSS can make a control look different, but it does not assign ARIA roles, accessible names, keyboard interaction models, or HTML semantics. Those responsibilities remain with HTML and accessibility standards.

UI CSS and the other CSS owners

Outline does not belong to Box Model because it does not occupy the same box edges. `accent-color` consumes a Color value but Color owns the color model. `user-select` interacts with text but does not own CSS Text line breaking. `resize` affects an element's interaction affordance while Overflow and Sizing remain responsible for their respective layout and overflow models.

Practical UI debugging

When a UI affordance is missing, identify whether the problem is presentation or behavior. Check the computed UI property, the relevant pseudo-class state, native appearance, and the control semantics separately. Do not try to fix a missing interaction API with CSS alone.

What this lesson deliberately does not own

HTML semantics and form behavior remain HTML. Focus management and selection APIs remain Web Platform. ARIA remains the accessibility domain. Color values remain Color. Box dimensions and spacing remain Sizing and Box Model. Overflow and scrolling remain Overflow.

Quick review

?

?

?

?

?

?

?

.state { cursor: pointer; outline: 2px solid transparent; } .state:hover { outline-color: currentColor; } .state? { outline: 3px solid currentColor; }

?

.state { cursor: pointer; outline: 2px solid transparent; } .state:hover { outline-color: current?; } .state:focus-visible { outline: 3px solid currentColor; }

Content-sized form controls

CSS Basic UI Level 4 defines `field-sizing` for controls with a default preferred size. `field-sizing: content` asks the control to size itself based on its content rather than keeping the usual fixed preferred size. This is a CSS sizing control for form UI; HTML still defines the control and its behavior.

.tags { ? }