Keyboard shortcuts

Press or to navigate between chapters

Press S or / to search in the book

Press ? to show this help

Press Esc to hide this help

CSS property / selector ledger

Legend: ✅ supported today · 🟡 not supported yet, but planned · ⛔ won’t be supported. Tier T0–T3.

Unknown properties and rules are ignored, never fatal.

Selectors

SelectorStatusTierNotes
type (li)T0
class (.todo)T0
id (#app)T0
descendant (.todo .label)T0
compound (.todo.completed)T1
grouping (.a, .b)T1
child (>) / sibling (+, ~)T2
attribute ([type="text"], [data-x])T2
:nth-child / :first-child / :last-child / :nth-of-typeT2
:rootT2
:not()T2
:hoverT1on pointer hover
:checkedT1checkbox state
:focus🟡T1not styled yet — focus is tracked for keyboard/event routing (click + Tab set it), but :focus selectors don’t match, so there’s no focus ring / focus styling today
:active / :disabled🟡T1selectors parse but never match yet — pressed/disabled state isn’t tracked
:is() / :where()🟡T2
::before / ::after🟡T2generated content not produced yet

Values

ValueStatusTierNotes
custom properties (--x, var(--x))T2define on :root, read with var()
calc()🟡T2only single-unit arithmetic works (calc(10px + 5px), calc(100% - 10%)); mixed units like calc(100% - 20px) aren’t supported yet
units: px, %, auto, vw, vh, vmin, vmaxT0
units: rem, em🟡T2font-relative units not supported yet

Properties (layout)

PropertyStatusTierNotes
display: flex / noneT0flexbox
flex-direction / flex-wrapT0
flex / flex-grow / flex-shrink / flex-basisT1
justify-content / align-items / align-contentT0
align-self / justify-self / justify-itemsT1
gap / row-gap / column-gapT1
width / height (+ min/max)T0
aspect-ratioT2
margin / padding (+ sides)T0
box-sizingT1
position: relative / absolute + top/right/bottom/leftT1
z-indexT1
overflow (+ -x / -y)T1
display: gridT2with grid-template-columns/rows, grid-column, grid-row, grid-auto-flow/rows/columns
floatnot supported

Properties (visual / text)

PropertyStatusTierNotes
colorT0named + hex + rgb/oklch
background-colorT0
border / border-*-width / border-colorT1border shorthand is <width> [<color>] only — no border-style keyword (solid/dashed): write border: 1px #ccc, not border: 1px solid #ccc. Per-side shorthands (border-bottom) aren’t parsed — use border-bottom-width/-color
border-radiusT1
outline (+ -width / -offset / -color)T2
box-shadowT2
text-shadowT2
font-size / font-familyT1
text-align / line-heightT1
transitionT2
animationT2drives @keyframes
transformT22D only: translate[X/Y], scale[X/Y], rotate/rotateZ. No 3D (rotateX/Y, rotate3d, translateZ, perspective) or matrix/skew. Functions must appear in order translate scale rotate
background-image (gradient)T2linear / radial gradients
font-weight / font-style🟡T2bold / italic not supported — text uses a single font asset
text-decoration🟡T2underline / strikethrough
text-transform / letter-spacing🟡T2
white-space / text-overflow🟡T2nowrap, ellipsis truncation
cursor🟡T2pointer cursor doesn’t change yet
visibility🟡T2use display: none for now
opacity🟡T2
filter / backdrop-filter🟡T3blur / color effects
list-style🟡T2no list markers
user-select / pointer-events🟡T3
background-image: url()🟡T2needs image assets
background-position / -size / -repeat🟡T2pairs with background-image: url()
object-fit🟡T2pairs with <img>

At-rules

At-ruleStatusTierNotes
@mediaT2
@keyframesT2
@importT2
@layerT2
PROJECTSUPERUI · BEVY UI
DRAWN BYSTROWK
SCALENOT TO SCALE
REVR1 · 0.1 EARLY BUILD
LICENCEMIT / APACHE-2.0