Guide

CSS support

The engine follows the specifications as Chromium implements them. Computed values and layout are compared with Microsoft Edge to 1/64 of a pixel, so what you know from the web holds here.

Loading and cascade

A user-agent style sheet, <link rel="stylesheet">, <style>, @import (with media), inline style, relative URLs, !important, specificity and custom properties all work as in a browser. In an app, global rules go in App.css and a component's <style> is scoped to it.

Selectors

Kind	Supported
Simple	Type, class, id, universal, attribute (all operators, `i` and `s` flags)
Combinators	Descendant, `>`, `+`, `~`
State	`:hover`, `:active`, `:focus`, `:focus-visible`, `:focus-within`, `:disabled`, `:enabled`, `:checked`, `:indeterminate`, `:placeholder-shown`, `:read-only`, `:read-write`, `:required`, `:optional`, `:link`, `:target`, `:open`
Structure	`:root`, `:empty`, `:first-child`, `:last-child`, `:only-child`, `:first-of-type`, `:last-of-type`, `:only-of-type`, `:nth-child()` (with `of S`), `:nth-last-child()`, `:nth-of-type()`, `:nth-last-of-type()`
Logic	`:not()`, `:is()`, `:where()`, `:has()`, `:lang()`, `:dir()`
Pseudo-elements	`::before`, `::after`, `::marker`, `::placeholder`, `::selection`, and the scrollbar, select and slider parts below

:has() takes relative selectors (:has(img), :has(> .x), :has(+ .x), :has(~ .x .y)) anywhere in a selector, in QuerySelector, Matches and Closest, and in @supports selector(). A page restyles when what a :has() looks at changes.

At-rules

@import, @media (width, height, aspect-ratio, orientation, resolution, hover, pointer, prefers-color-scheme, prefers-reduced-motion), @supports, @font-face (with unicode-range and font-stretch) and @keyframes.

Values

Lengths: px, em, rem, ex, ch, cap, lh, rlh, vw, vh, vmin, vmax, the small, large and dynamic viewport units, and %.
Math: calc(), min(), max(), clamp() and the other math functions.
Colors: named, hex, rgb(), hsl(), hwb(), lab(), lch(), oklab(), oklch(), currentColor, system colors.
Functions: var(), env(safe-area-inset-*), attr() in content.

Properties

Area	Supported
Box	`display` (block, inline, inline-block, flow-root, flex, inline-flex, grid, inline-grid, table and its parts, inline-table, list-item, contents, none), `float`, `clear`, `box-sizing`, sizes with min and max (`min-content`, `max-content`, `fit-content`), `aspect-ratio`, margins, paddings, borders (all styles, radii), `outline`
Positioning	`position` static, relative, absolute, fixed, sticky; insets; `z-index`
Flexbox	All flex properties, `gap`, `order`, alignment
Grid	Templates (named lines, areas, `repeat()` with auto-fill and auto-fit, `minmax()`, `fr`), auto placement (`dense`), spans, implicit tracks, alignment, `gap`
Tables	`border-collapse`, `border-spacing`, `caption-side`, `empty-cells`, `table-layout`, and the HTML table attributes (`colspan`, `rowspan`, `cellpadding`, `align`…)
Overflow	`overflow` (visible, hidden, clip, scroll, auto), `scroll-behavior`, `scrollbar-width`, `scrollbar-gutter`, `scrollbar-color`, `text-overflow`, `line-clamp`
Text	Font properties (`font-feature-settings`, `font-variant-`, `font-synthesis`), `color`, `line-height`, `text-align`, `text-align-last`, `text-indent`, `text-transform`, `white-space`, `word-break`, `overflow-wrap`, `line-break`, `hyphens` (manual), `letter-spacing`, `word-spacing`, `tab-size`, `text-decoration-`, `text-underline-offset`, `text-shadow`, `text-spacing-trim`, `direction`, `unicode-bidi`, `vertical-align`
Backgrounds	Every background property, multiple layers, linear, radial and conic gradients (and repeating), `background-clip: text`, `box-shadow`
Effects	`filter` and `backdrop-filter` (blur, brightness, contrast, drop-shadow, grayscale, hue-rotate, invert, opacity, saturate, sepia), group `opacity`, `clip-path` (inset, xywh, rect, circle, ellipse, polygon, path), `mask` and its longhands, `mix-blend-mode`, `isolation`
Images	`object-fit`, `object-position`, `image-rendering`
Transforms	`transform` (2D and 3D), `translate`, `rotate`, `scale`, `transform-origin`, `perspective`, `perspective-origin`, `transform-style`, `backface-visibility`
Animation	`transition-`, `animation-` (keyframes, iteration, direction, fill, play state, `steps()`, `cubic-bezier()`), `will-change`. Transform, opacity and color transitions can run on the GPU
Interaction	`cursor` (with images), `pointer-events`, `user-select`, `touch-action`, `caret-color`, `accent-color`, `appearance`, `visibility`
Lists	`list-style-*`: disc, circle, square, decimal, decimal-leading-zero, roman, alpha, latin, greek, string markers
SVG	`fill`, `fill-opacity`, `fill-rule`, `stroke` and its parts, `stop-color`, `stop-opacity`

Engine properties

Property	Meaning
`-devcore-text-rendering: auto \| bitmap \| sdf`	Bitmap glyphs (sharp at their size) or distance fields (any size and transform). `auto` uses bitmaps unless the text is transformed
`-devcore-nav-up`, `-down`, `-left`, `-right: <selector>`	Override where gamepad and arrow-key focus goes from an element
`-unity-material: url(...)`	A Unity material drawn into the element's box every frame

Styling the controls

The controls the engine draws are styled with Chrome's syntax.

Scrollbars

By default scrollbars are thin overlays that take no space; scrollbar-width and scrollbar-color adjust them. A ::-webkit-scrollbar rule gives custom bars that take space:

.list::-webkit-scrollbar { width: 12px; }
.list::-webkit-scrollbar-track { background: #141a2a; border-radius: 6px; }
.list::-webkit-scrollbar-thumb { background: #3a4868; border-radius: 6px; }
.list::-webkit-scrollbar-thumb:hover { background: #5873b0; }

Parts: ::-webkit-scrollbar, -track, -track-piece, -thumb, -button, -corner, with the states :hover, :active, :vertical, :horizontal, :decrement, :increment.

Select

select, ::picker(select) { appearance: base-select; }
::picker(select) { border-radius: 10px; background: #141a2a; }
option:checked { background: #2d6cdf; }

With appearance: base-select the select is fully styleable: a <button> first child with <selectedcontent>, ::picker-icon, ::picker(select) for the list, option (which may hold images and SVG), ::checkmark, optgroup and :open.

Range, checkbox and radio

Range: ::-webkit-slider-container, ::-webkit-slider-runnable-track, ::-webkit-slider-thumb. With appearance: none on the range and its thumb, nothing native remains.
Checkbox and radio: appearance: none makes a plain box that ::before and ::after draw, with :checked, :indeterminate, :disabled and :focus-visible.

Not supported

Multi-column layout, vertical writing modes, @layer, @container, @property, @page, subgrid, color(), color-mix(), ::first-line and ::first-letter, hyphens: auto, scroll snapping, and url() references in filters and clip paths.

3D transforms are drawn without depth sorting or plane splitting. mask-composite values other than add are drawn as add. Number spin buttons and the textarea resizer are not drawn, so they cannot be styled.