WebCraft

CSS, with the caveat

The CSS is the easy half.

Interface elements rendered live on the page, never screenshotted. The source you can take, the fallback, and the caveat that costs you an afternoon three weeks from now.

Now playing

Graceful Degradation

The Fallbacks

1:123:40
Gone right of the seam backdrop-filter @property background-clip: text ::-webkit-slider-thumb appearance: none

Latest elements

84 published
sibling-index() motion
  • first to arrive
  • then this one
  • then this one
  • and last of all

A stagger that survives a new item

Caveatsibling-index() returns a plain number, so it has to be given a unit by hand: calc(sibling-index() * 140ms), never the bare function. It counts element siblings from one, including elements set to display: none, so a hidden row still spends its place in the sequence and leaves a gap you did not ask for.

FallbackAn unsupported function makes the whole declaration invalid, so every item falls back to the delay it would otherwise have, usually zero, and the list arrives in one go rather than in sequence. Declare a sensible animation-delay first and let the calc() override it where it parses.

HTML + CSS 
<ul><li></li><li></li></ul>

li {
  animation: slide-in .5s both;
  /* one rule, any number of items */
  animation-delay:
    calc(sibling-index() * 140ms);
}
subgrid layout

Standard

One seat, monthly.

9 EUR

Team of up to twelve

Shared billing.

49 EUR

Company

Invoiced yearly, with a named contact.

Ask us

Card rows that line up across cards

CaveatA card only inherits rows it actually spans, so grid-template-rows: subgrid does nothing until the card also says grid-row: span 3. The gap comes from the parent on the subgridded axis too, which means a gap set on the card is quietly ignored in that direction.

FallbackWithout subgrid each card keeps its own rows, so the three prices settle at whatever height their own text leaves them and the shared baseline disappears. Nothing overlaps and nothing is unreadable, so this is safe to ship as a refinement on top of an ordinary grid.

HTML + CSS 
<div><h4></h4><p></p><b></b></div>

.cards {
  display: grid;
  grid-template-rows: auto 1fr auto;
}
.cards .tier {
  display: grid;
  grid-row: span 3;          /* or it owns one */
  grid-template-rows: subgrid;
}
scroll-state(stuck) scroll
Ledger

0001 opening balance

0002 invoice raised

0003 payment received

0004 fee deducted

0005 invoice raised

0006 payment received

0007 closing balance

A sticky header that knows it is stuck

Caveatcontainer-type: scroll-state turns the sticky element into a query container, and nothing can match its own container query, so the state has to be read by something inside it. The header also needs a real inset such as top: 0 to stick against; with no inset it never reports as stuck and the rule never fires.

FallbackWhere scroll-state queries are unsupported the block inside simply never matches, so the header keeps the look it has before it sticks. Draw the resting state so it reads on its own and treat the stuck styling as the extra, not as the thing that makes the header legible.

HTML + CSS 
<div class="head"><span>Ledger</span></div>

.head {
  position: sticky; top: 0;
  container-type: scroll-state;
}
/* the child reads the container's state */
@container scroll-state(stuck: top) {
  .head span { color: var(--content); }
}
@media (hover: hover) hover

Hover that stays off touchscreens

CaveatThe query tests the primary pointer only. A laptop with a touchscreen usually matches, since the trackpad counts as primary, and a finger tapping that same screen still latches :hover until the next tap. any-hover matches when any connected pointer can hover, which is usually too broad for styling. Test the primary pointer and accept that hybrid machines get the mouse version.

FallbackEvery current engine supports the query, so the fallback is whatever you leave outside it. Anything a person has to find, such as a delete button or a submenu, stays visible by default, and the hover rule only adds a lift on top. Give :focus-visible the same cue so keyboard users see it too.

CSS 
/* only when the main pointer can hover */
@media (hover: hover) and (pointer: fine) {
  .tile:hover { translate: 0 -3px; }
}
/* keyboards get it everywhere */
.tile:focus-visible { translate: 0 -3px; }
::-moz-range-progress form

The filled half of a range track

CaveatOnly Firefox has a pseudo-element for the part of the track behind the thumb. In Chromium and Safari the fill is a trick: a wide box-shadow thrown left from the thumb and cut off by overflow: hidden on the input. That overflow clips everything outside the input's box, so the thumb can never stand taller than the track. A big round thumb on a hairline track needs one line of script instead, writing the value into a custom property that a gradient reads.

FallbackWithout these rules the input keeps its native look and still works as a slider. If one brand colour on the filled side is all you wanted, accent-color does that in Chromium and Firefox with a single declaration. Use the shadow when you have restyled the whole track and the fill has to match it.

CSS 
/* Firefox: a real pseudo-element */
input::-moz-range-progress {
  background: var(--fill);
}
/* Chromium, Safari: a clipped shadow */
input { overflow: hidden; }
input::-webkit-slider-thumb {
  /* 7px is half the thumb */
  box-shadow: calc(-100vw - 7px) 0 0 100vw
    var(--fill);
}
counters() text
  1. Getting started
  2. Layout
    1. Grid
    2. Flexbox
  3. Colour

Numbering the browser keeps for you

Caveatcounter-reset creates a fresh counter scoped to the element, even when one with that name already exists above it. That is why the nested list above counts 2.1, 2.2 instead of 3, 4, and why a reset halfway down a list starts a nested copy where you expected the count to restart. Hiding changes the count as well: an item with display: none is skipped, one with visibility: hidden still counts, so two ways of hiding a step give two different numberings. The accessibility catch is in the markup. Numbers drawn by ::before are paint, and list-style: none makes VoiceOver stop announcing the list as a list, so keep the <ol> and add role="list" back if you strip its style.

FallbackCounters have worked in every engine since CSS 2.1. A reader without your stylesheet still gets numbers from a plain <ol>, which numbers itself with no CSS at all. Counters earn their keep when the numbering has to cross elements an <ol> cannot wrap, such as chapter headings or figure captions, or has to read 2.1 instead of 1.

CSS 
ol {
  list-style: none;
  /* a fresh counter per scope:
     nesting is what makes the
     2.1 form possible at all */
  counter-reset: sec;
}
li::before {
  counter-increment: sec;
  content: counters(sec, ".") " ";
}
text-underline-offset type
default — ink skipped
typography, judged partly
skip-ink: none — strikes the descenders
typography, judged partly
thickness, offset and colour tuned
typography, judged partly

An underline you actually drew

CaveatTwo traps hide in plain sight. First, text-decoration does not inherit — it propagates: drawn on the parent, painted straight through every child, and no child can undo it, because text-decoration: none on the span removes decorations the span itself owns, not the line passing through from above. Second, the shorthand resets its own longhands: writing text-decoration: underline after the tuning quietly puts thickness back to auto — offset survives only because it lives outside the shorthand — so tune after the shorthand or skip it. Size the tuning in em so it scales with the type, and know that skip-ink defaults to skipping — right for Latin descenders, wrong for scripts like Chinese where the gaps read as damage, which is what none is for.

FallbackAn engine too old for the longhands drops each one alone and keeps the underline itself, so the reader gets the plain line the web has always drawn — no order games needed. The one property to keep an eye on is text-decoration-color against low-contrast palettes: the line carries meaning for colour-blind readers precisely because it is not colour, so never let the tint be the only thing separating a link from prose.

CSS 
a {
  /* shorthand first: it resets
     the thickness set before it */
  text-decoration: underline;
  text-decoration-thickness: .09em;
  text-underline-offset: .24em;
  text-decoration-color:
    color-mix(in srgb,
      currentColor 45%, transparent);
}
clamp() type

Fluid, with rails: 13px floor, 30px ceiling.

drag the corner ↘

Type on rails, not on stops

CaveatThe middle term is where fluid type quietly fails an audit: a preferred value written purely in viewport units does not respond when someone raises their browser’s text size, because vw tracks the window, not the reader’s setting — and text that cannot reach 200% is a WCAG failure, not a taste issue. Mix a rem term into the middle — clamp(1.4rem, 1rem + 2.5vw, 2.6rem) — and zoom moves the whole expression again. Two smaller teeth: if the floor ends up larger than the ceiling, the floor wins, which is how a refactored token turns every headline huge; and inside the calculation a bare 0 needs a unit, because clamp(0, …) is not a length and the declaration dies whole.

FallbackUniversal since 2020, so the fallback story is short: declare a plain font-size on the line above for anything older, and it simply reads at one size. The demo above runs the middle term in cqi so it can be dragged; on a page you will usually want the viewport flavour — same rails, same zoom rule, one unit swapped.

CSS 
h1 {
  font-size: 28px;
  /* the rem term keeps browser
     zoom working: pure vw type
     fails the 200% test */
  font-size: clamp(
    1.4rem, 1rem + 2.5vw, 2.6rem);
}
fixed under transform layout

The badge below says position: fixed. It should be pinned to your screen — but this frame carries a transform, so the frame is its world now. Scroll and it stays put. In here.

position: fixed

The fixed element that stopped meaning it

Caveatposition: fixed is pinned to the viewport only while no ancestor gets in the way, and the list of things that get in the way keeps growing: transform, filter, backdrop-filter, will-change: transform, contain: paint, container-type. Any of them turns the ancestor into the containing block, and the fixed element quietly behaves as absolute inside it. This is why the sticky toolbar dies the day someone adds a slide-in animation to the panel around it, and why a third-party wrapper with a stray translateZ(0) breaks a modal it has never heard of. The fix is structural, not stylistic: move the fixed element outside the transformed subtree, or drop the transform once the animation ends.

FallbackNothing to polyfill — this is the spec, and every engine agrees with it. The escape hatch is the top layer: a <dialog> opened with showModal() or a popover renders above the page in a layer no ancestor transform can reach, which makes it the one reliable place left for something that must stay put.

CSS 
.panel { transform: translateX(0); }

.panel .toolbar {
  /* pinned to .panel now,
     not to the viewport */
  position: fixed;
  bottom: 0;
}

/* the top layer — dialog,
   popover — ignores ancestor
   transforms altogether */
filter: drop-shadow() surface
filter on the star —
clipped off with it
filter on the parent —
the shape casts

A shadow that knows the shape

Caveatdrop-shadow() exists because box-shadow shades the box: a star, a speech-bubble tail or a transparent PNG casts a rectangle, or — under clip-path — nothing at all, since the shadow is part of the element’s own paint and the clip cuts it off with everything else. The trap is assuming the filter escapes the same knife. It does not: on one element the clip is applied to the filtered result, so the left star’s shadow dies exactly like a box-shadow would. The pattern that works is one element up — clip the child, filter the parent, and the parent shades whatever shape survived. Smaller print: no spread argument, no inset, the same blur number paints a visibly softer and wider halo than box-shadow’s — retune the value, do not copy it — and a filter makes the element a containing block, so a position: fixed descendant stops meaning the viewport.

FallbackAn engine without filters drops the declaration and the shape simply casts nothing — decorative loss, nothing broken, which is the definition of shippable. The direction worth re-checking is the old one: a leftover box-shadow under a fresh clip-path fails silently in every engine, and looks exactly like a shadow someone forgot to write.

CSS 
/* clip the child … */
.star { clip-path: polygon(…); }

/* … filter the parent: on the
   same element the clip cuts
   the shadow off too */
.star-wrap {
  filter:
    drop-shadow(0 7px 6px #0009);
}
overflow-wrap: anywhere text
default — the hash escapes

build 9f8a7c6e5d4b3a2f1e0d9c8b7a6f5e4dcafe12 failed

overflow-wrap: anywhere

build 9f8a7c6e5d4b3a2f1e0d9c8b7a6f5e4dcafe12 failed

The long word that will not bend

CaveatThree properties fight over this and only one of them is usually right. overflow-wrap: anywhere and its older sibling break-word paint identically in a fixed box — both break the long token only when it has nowhere else to go — but they differ where nobody looks: anywhere lets the breaks count towards min-content size, so inside a flex or grid track the column can actually get narrow, where break-word holds the track at the full unbroken word and the “fix” changes nothing. word-break: break-all is the blunt instrument — it breaks mid-word everywhere, prose included; it exists for CJK text, not for comments with links in them. None of the three hyphenate: a break is a cut, and the hyphens live in a different property with a lang requirement.

Fallbackanywhere is the youngest of the family, and an engine that predates it drops the declaration — so declare break-word first and anywhere second, and the museum still bends the token in a fixed layout. The truly ancient spelling is word-wrap, an alias engines have promised to keep forever; it buys nothing new, but it is why twenty-year-old stylesheets still work.

CSS 
.comment {
  /* old engines keep the first,
     new ones take the second */
  overflow-wrap: break-word;
  overflow-wrap: anywhere;
}

/* not this: made for CJK, it
   breaks prose mid-word too */
.comment { word-break: break-all; }
text-overflow: ellipsis text
nowrap alone — the name walks out
q3-report-final-FINAL-v2.pdf
overflow: hidden + text-overflow
q3-report-final-FINAL-v2.pdf

An ellipsis is three declarations, not one

Caveattext-overflow: ellipsis is a passenger: on its own it does nothing, because it only describes how to paint text that is already being clipped. The clipping takes overflow: hidden and the single line takes white-space: nowrap — lose either and the name above just walks out of its box. In a flex or grid row there is a fourth wall: the item’s automatic minimum size refuses to shrink below the text, so the box grows instead of truncating — and conveniently, the same overflow: hidden that enables the ellipsis also zeroes that minimum. One declaration, both jobs. It is strictly one line; for two or three, that is -webkit-line-clamp, a different element on this site.

FallbackSupported since engines had names, so there is nothing to wait for. The variant that is not portable is the string form — text-overflow: "… more" — which only Firefox ever shipped; everyone else drops the declaration and keeps clipping. And remember the ellipsis is paint, not content: the full name is still there for copy, find-in-page and screen readers, which is exactly why truncating is kinder than slicing the string server-side.

CSS 
.filename {
  white-space: nowrap;
  text-overflow: ellipsis;
  /* the working half: clips, and
     in a flex row also zeroes the
     min-width that blocks shrink */
  overflow: hidden;
}
prefers-reduced-motion motion

your system asks for full motion, so the dot orbits

your system asks for reduced motion: the spin is gone, a slow fade stays

Less motion is not no motion

CaveatThe query reports a vestibular accessibility setting, not a taste in animation — what triggers the symptoms is movement: spins, parallax, zooms, things travelling across the screen. An opacity crossfade is almost always safe to keep, which is why the word in the query is reduced. The blanket animation: none !important has a trap of its own: an animation that never runs never reaches its end state and never fires animationend, so the element that was going to fade in stays invisible and the listener waits forever. The safer blanket shrinks every duration to a frame — the end state and the event still land, only the journey is gone.

FallbackAn engine too old to know the query plays full motion for everyone, including the people the setting exists for. Writing it the other way round — motion gated behind (prefers-reduced-motion: no-preference), stillness as the default — flips that: anything unknown gets the still version. Which default is right depends on who is worse off getting the wrong one, and for anything that swings or spins the answer is the still one.

CSS 
@media (prefers-reduced-motion: reduce) {
  /* a frame, not none: end states
     and animationend still land */
  *, *::before, *::after {
    animation-duration:
      .01ms !important;
    animation-iteration-count:
      1 !important;
    transition-duration:
      .01ms !important;
  }
}
grid-template-areas layout
header nav main footer

A layout drawn as a picture of itself

CaveatThe ASCII picture is the strictest syntax on this site: every row string must name the same number of columns, and every name must add up to a rectangle. One typo, one row a cell short, one L-shaped area — and the entire declaration is invalid, silently, so the grid falls back to auto placement and the layout collapses with no error anywhere. There is no patching it per breakpoint either: a media query has to restate the whole picture, because the map replaces, it never merges — and grid-template-columns has to move with it, or the old second track survives the breakpoint, sits there empty, and the whole layout quietly lives in half its width. A lone dot names a cell nothing owns.

FallbackNo grid means block flow in source order — which points at the deeper caveat even where grid runs everywhere: areas let the picture disagree with the DOM, and the Tab key and a screen reader follow the DOM, not the picture. Keep the source in reading order and let the areas do the rearranging, never the other way round.

CSS 
.page {
  display: grid;
  grid-template-columns: 200px 1fr;
  grid-template-areas:
    "head head"
    "side main"
    "foot foot";
}
header { grid-area: head; }

@media (width < 640px) {
  /* restate all of it: the map
     replaces, it never merges */
  .page {
    grid-template-columns: 1fr;
    grid-template-areas:
      "head" "main" "side" "foot";
  }
}
box-shadow ×4 surface
one shadow,
heavy and flat
four, doubling
as they go

Four faint shadows beat one dark one

CaveatA single shadow big enough to say “floating” is also dark enough to say “smudge”, because real light does not stop at one penumbra. A ladder of three or four layers, each roughly doubling the offset and blur of the one before at a constant low alpha, reads as a single soft shadow with a dense core and a wide falloff. The alphas stack where the layers overlap — four times .07 is about .25 against the element, thinning to .07 at the rim — so judge the total, not the layer. And keep box-shadow out of transitions: it repaints every frame of the animation. Put the hover shadow on an ::after and transition that pseudo’s opacity instead.

FallbackMultiple shadows have worked for as long as box-shadow has existed, so there is no engine story. The mode that actually deletes them is forced colours: Windows High Contrast strips every shadow on the page, and a card whose only edge was its shadow dissolves into the background. Keep a border — a transparent one costs nothing visually, and forced colours will paint it for you.

CSS 
.card {
  /* offset and blur double each
     step, alpha stays put */
  box-shadow:
    0 1px  1px rgb(9 14 24 / .07),
    0 2px  3px rgb(9 14 24 / .07),
    0 5px  8px rgb(9 14 24 / .07),
    0 12px 20px rgb(9 14 24 / .07);
  /* the edge high contrast keeps */
  border: 1px solid transparent;
}
oklch(from …) surface

one token in — tint, base, shade, muted, complement out

Five colours out of one token

CaveatThe channel names are not variables you set — they are the source colour taken apart. l, c and h arrive already holding the token’s own values, and calc() on them is the whole trick. Do the arithmetic in oklch even when the token is an sRGB hex: a lightness nudge there is perceptually even, where the same nudge through rgb() lands differently on a blue than on a yellow. Hue wraps on its own, so h + 180 is the complement with no modulo — but lightness and chroma clamp silently: calc(l + .3) on an already-light token quietly pins at white, and a palette built on additions looks fine right up until someone feeds it a token near the edge. Multiply where the token is not yours to predict.

FallbackSame law as every colour function this decade: an engine that cannot parse it drops the declaration whole, not just the value. Each swatch above declares the plain token first and the derived colour second, so a museum engine shows five copies of the base blue — wrong, but coloured and legible. Order the two declarations the other way round and the fallback wins everywhere, and the palette never existed.

CSS 
:root { --brand: #6fa8dc; }

.tag {
  /* plain first, derived second */
  background: #6fa8dc;
  background: oklch(
    from var(--brand) calc(l - .17) c h);
}

/* multiply chroma, never add:
   safe for tokens near the edge */
background: oklch(
  from var(--brand) l calc(c / 4) h);
.visually-hidden a11y
clipped to 1pxa reader announces “Settings”
display: nonea reader announces nothing

Hidden from eyes, kept for readers

CaveatThe obvious hiding tools take the element out of the accessibility tree with them: display: none and visibility: hidden silence a screen reader as thoroughly as they blank the screen, and a width: 0 box gets skipped by some readers too. What survives is a box hidden by geometry rather than removal — one pixel square, clipped, overflow cut. The declaration nobody reads is doing real work: without white-space: nowrap the 1px box wraps every word onto its own line, and some readers then announce the label one word at a time. And keep focusable elements out of it unless the disappearing act is deliberate — a link in there is a Tab stop on something the eye cannot find.

Fallbackclip-path: inset(50%) replaced the deprecated clip: rect(0 0 0 0), and every current engine knows it; declare both if the logs still show a museum. The other direction needs no CSS at all: aria-label on the control does the same job in one attribute. The class earns its place when the text should behave like text — findable by the browser’s in-page search, translated by machine translation, which still skips aria-* attributes in most engines.

CSS 
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  /* or readers spell the label
     out one word per line */
  white-space: nowrap;
}
skip link + :focus a11y
Skip to content

Click inside this frame, then press Tab — the link is parked above the fold, waiting for a keyboard.

The link only keyboards ever meet

CaveatThe two natural ways to hide something — display: none and visibility: hidden — are exactly the ways that make an element unfocusable, and an unfocusable skip link can never receive the Tab press that is supposed to reveal it. Park it off-screen with a transform instead and bring it back on :focus. It has to be the first focusable thing in the document, before the logo link, or the keyboard walks the whole header first and the link skips nothing. And the target wants tabindex="-1": the id alone scrolls the page, but in several browsers sequential focus stays where it was, so the next Tab lands right back in the navigation that was just skipped.

FallbackNothing here is newer than an anchor, a transform and a focus style, so there is no engine to fall back for. The failure modes are all self-inflicted: hiding it with the wrong property, hiding it forever by forgetting the :focus rule, or animating its entrance so hard that a screen-magnifier user never finds where it landed — which is why the transition above is short, and gone entirely under reduced motion.

HTML + CSS 
<!-- first focusable thing -->
<a class="skip" href="#main">
  Skip to content</a>
…
<!-- id scrolls, tabindex moves
     the actual focus -->
<main id="main" tabindex="-1">

.skip {
  position: absolute;
  translate: 0 -200%;
}
.skip:focus { translate: 0 0; }
color-mix() surface

in srgb

in oklch

The same two colours, mixed two ways

CaveatThe colour space is required, and it decides the answer: srgb runs the midpoint through grey, which is why a derived hover tint so often looks washed out compared to the swatch the designer picked. Then the percentages, which are the part nobody reads: they are normalised rather than rejected, so 30% and 30% is a 50/50 mix — but because they add up to less than 100%, the result also comes back at 60% alpha. A colour that is both the wrong ratio and quietly translucent, from a line that looks arithmetically fine. currentColor is allowed inside, which is what lets one rule tint every state of a component that has not picked its colour yet.

FallbackAn engine that does not know the function drops the whole declaration, not just the value, so the property falls back to whatever was declared before it in the same block. That fixes the order: the plain colour first, the mix second. Written the other way round the fallback wins everywhere and the mix never applies at all.

CSS 
.btn:hover {
  /* plain first: an engine that drops
     the mix keeps this one */
  background: #7fb4e2;
  background: color-mix(
    in oklch, #6fa8dc 75%, #f6b26b);
}

/* 30% and 30% is a 50/50 mix at
   60% alpha, not the colour typed */
auto-fit vs auto-fill layout
auto-fill — empty tracks kept
auto-fit — empty tracks collapsed

Why the last row stretches, and how to stop it

CaveatThe two keywords are identical until the items run out, which is why the difference never shows up in the design and always shows up in production: auto-fit collapses the empty tracks, so three cards in a six-track row grow to a third of the width each, and auto-fill keeps them, so three cards stay card-sized and the rest of the row is blank. Neither is the right answer on its own. Separately, 1fr is minmax(auto, 1fr) and that auto floors at min-content, so one long URL or a <pre> pushes its track past its share and the whole grid overflows sideways — minmax(0, 1fr) is the fix and costs nothing.

FallbackAn engine with no grid falls back to block flow: every item full width, stacked, which is the small-screen layout anyway. That is why this pattern never needed a float ladder underneath it. What it does need is a sane minimum — set the minmax() floor below your narrowest real card, or the tracks stop shrinking and the container scrolls instead of reflowing.

CSS 
.grid {
  /* fit collapses empty tracks and
     stretches what is left. fill
     keeps them and holds the size */
  grid-template-columns:
    repeat(auto-fill, minmax(60px, 1fr));
}

.grid li {
  /* 1fr floors at min-content: one
     long word overflows the row */
  grid-column: span 1;
  min-width: 0;
}
align-content (block) layout
Two children, centred

A heading and a paragraph, held in the middle of a box that is still display: block.

Centring with no flex and no grid

CaveatIt distributes free space, so a box with none — an auto height, which is most boxes — accepts the declaration and does nothing with it. The height or min-height is the load-bearing half, and leaving it out is the whole of "align-content does not work in block layout". The other half is that only this property crossed over: align-items and justify-content are still inert in block layout, and reaching for them is the usual first guess. Children stay in the block flow while this happens, so their margins still collapse into each other and shift the centre by an amount you did not write.

FallbackAn older engine ignores it and the content sits at the top of the box: plain rather than broken, which is what makes this safe to ship without a flex wrapper underneath it. If the centring is load-bearing rather than cosmetic, keep the wrapper — a @supports (align-content: center) block is not worth it for a difference this small.

CSS 
.hero {
  /* still display: block */
  min-height: 132px;

  /* with no free space to hand out
     this line is live and inert */
  align-content: center;
}
mask-composite: intersect scroll
layout motion forms scroll type surface

An edge that fades instead of cutting

CaveatTwo edges need two gradients, and the default mask-composite: add unions them — the union of "everything but the left" and "everything but the right" is everything, so both fades disappear and it reads as the property having done nothing. intersect is the whole fix. Then watch the shorthand: mask resets every longhand it does not name, mask-composite included, so a shorthand written after it silently throws the second gradient away. And a mask clips the element's entire painting, so the focus ring on the last chip fades out with the chip while the chip stays tabbable — invisible and fully interactive at the same time.

FallbackWithout support the row keeps hard edges, which is what every scroller looked like until recently and is still perfectly usable. That is the right way round: the fade is a hint that there is more, never the only one. Pair it with a scrollbar you have not hidden, or the affordance is decoration that some engines simply do not draw.

CSS 
.row {
  overflow-x: auto;

  /* one gradient per edge */
  mask-image:
    linear-gradient(90deg, #0000, #000 26px),
    linear-gradient(-90deg, #0000, #000 26px);

  /* add unions them, and the union
     of the two is no mask at all */
  mask-composite: intersect;
}
writing-mode: vertical-rl layout
Archive

A rotated label still occupies its horizontal box and overlaps whatever is beside it. This one is laid out vertically, so the column it sits in is genuinely narrower.

A vertical label that does not break the box

Caveatwriting-mode moves the block axis and every physical property keeps pointing where it always did, so the layout stops agreeing with the names: height now caps how far the label runs down its own line and width sizes the block, which is why the first attempt either overflows the box or wraps after two words. The logical pair — inline-size, block-size, padding-inline, margin-block — are the ones that follow the rotation. Watch text-orientation: upright too: it stands latin letters up one at a time and turns off kerning and ligatures while it does.

FallbackEvery engine has had this for years, so the degradation that matters is inside your own page. The mode inherits, so a widget nested in the rotated column rotates with it until something sets writing-mode: horizontal-tb back — which is also how you rotate a spine without rotating what it labels. An engine that did ignore the declaration lays the label down flat and doubles the width of the column it was there to save.

CSS 
.spine {
  writing-mode: vertical-rl;

  /* the block axis is horizontal now,
     so inline-size caps how far the
     label runs down, not how wide */
  inline-size: 120px;
  padding-inline: 10px;
  padding-block: 6px;
}

.spine .widget {
  /* it inherits — turn it back */
  writing-mode: horizontal-tb;
}
text-box: trim-both type
Half-leading the box is taller than the type Half-leading trimmed to cap and baseline

A heading that sits on its own cap height

CaveatIt trims the block box, not every line: a heading that wraps keeps the full leading between its lines and only loses it above the first and below the last. The amount comes from the first available font's metrics, so a web font that arrives after the fallback drew the first frame trims by a different number and the heading shifts on load — the same jump size-adjust exists to fix. And the edge values are metric names rather than lengths: cap alphabetic cuts to the capital height and the baseline, which is what a display line wants, while text cuts to the font's own ascent and descent and barely moves anything.

FallbackAn engine without it ignores the declaration and leaves the ordinary half-leading above and below — the gap that used to be corrected with a negative margin. So this has to replace that margin rather than sit on top of it: keep both and the engines that support the trim take the space out twice.

CSS 
h1 {
  line-height: 1.6;

  /* cut the box to the cap line and
     the baseline. block box only —
     wrapped lines keep their leading */
  text-box: trim-both cap alphabetic;

  /* and delete the old hack */
  margin-block: 0;
}
mix-blend-mode: difference surface

Both halves

Type that inverts itself over anything

CaveatBlending only reaches as far as the nearest ancestor that forms an isolated group, and an opacity below 1, a transform, a filter, will-change or position: fixed quietly creates one — so the text inverts against a backdrop that is not the one on screen, and nothing in the styles says why. isolation: isolate is that same mechanism used on purpose: it pins the blend to a box you chose. The second trap is arithmetic, not support: difference against a mid grey returns another mid grey, so the type vanishes exactly where the backdrop is neither light nor dark.

FallbackSupport is universal, so the case to plan for is forced-colors mode, which drops the blend and repaints the text in the system pair — readable, unstyled, and the right outcome to leave alone. The one to avoid is a fallback color of white with no blend: it survives the dark half and disappears on the light one.

CSS 
.band {
  /* or the blend reads the page
     behind this box, not the box */
  isolation: isolate;
}

.band h2 {
  color: #fff;
  /* white minus backdrop =
     backdrop inverted */
  mix-blend-mode: difference;
}
paint-order: stroke fill type
Craft stroke alone Craft stroke, then fill

An outline that does not eat the letters

Caveat-webkit-text-stroke centres the stroke on the glyph outline, so half of a five-pixel stroke grows inward and thins the letterform until the counters in a, e and o close up. paint-order: stroke fill repaints the fill over the stroke and the shape comes back, which is the whole trick and the only fix that does not involve a second copy of the text. Two things to budget for: the stroke takes no space in layout, so it overflows the line box, crowds the line above and is cut by any overflow: hidden ancestor; and the property is still prefixed after fifteen years, with no unprefixed alias on the way.

FallbackAn engine that ignores paint-order still applies the stroke, so the word renders in the default centred form — heavier and tighter, but legible. One that drops both paints plain filled type. That is why the fill has to carry the contrast and the stroke has to be the decoration: reverse them and the fallback is a word nobody can read.

CSS 
.display {
  /* centred on the outline: half of
     it grows in and eats the shape */
  -webkit-text-stroke: 5px #6fa8dc;
  color: #e6eaf2;

  /* repaint the fill on top and the
     letterform comes back */
  paint-order: stroke fill;
}
initial-letter text

Drop caps used to mean a float, a hand-guessed font size and a line-height that had to be re-tuned every time the copy changed. Two numbers replace all of it: how many lines tall, and how many lines down.

A drop cap the browser measures for you

Caveatinitial-letter sizes and sinks the letter vertically and does nothing horizontally, so the text still runs flush against it until you add your own margin-right. Two numbers are also not one: initial-letter: 3 means three lines tall and sunk three, which drops the cap below the first line where you almost certainly wanted 3 2. It applies to ::first-letter in a block container and is ignored anywhere else, including on a flex item.

FallbackAn engine without it ignores the declaration and renders an ordinary first letter at whatever size and colour you also set, so the paragraph stays readable and merely loses its cap. That degrades better than the float version, which leaves a large letter jammed against the text when the line-height guess is wrong.

CSS 
p::first-letter {
  /* tall three lines, sunk two.
     one number sinks it by its
     own height, which is lower
     than you meant */
  initial-letter: 3 2;

  /* vertical only — the gutter
     is still your problem */
  margin-right: 8px;
}
:nth-child(of S) table
  • active one
  • archived
  • active two
  • archived
  • active three

Stripes that stay right when rows are filtered

Caveatli:nth-child(odd of :not(.gone)) and li:not(.gone):nth-child(odd) are different selectors, and the second one is the reading most people arrive at. The first numbers within the kept rows, which is what striping wants. The second numbers among all siblings and then throws away the ones that do not match, so hiding two rows leaves two stripes in a row and it looks like a rendering bug rather than a selector you wrote.

FallbackAn engine without of S treats the whole selector as invalid and drops that rule, so the stripes disappear instead of landing on the wrong rows. A missing stripe is a much cheaper failure than a misleading one, which makes this safe to ship without a query.

CSS 
/* numbers the rows that are kept */
li:nth-child(odd of :not(.gone)) {
  background: Canvas;
}

/* numbers all of them, then filters:
   two stripes end up side by side */
li:not(.gone):nth-child(odd) { }
light-dark() surface
follows the themeok
color-scheme: normalstuck

One declaration that covers both themes

Caveatlight-dark() does not look at the media query, it looks at the computed color-scheme of the element. Leave that unset and it silently returns the first value forever — the second swatch above is the same CSS with color-scheme: normal, and it never changes. A theme that half works is harder to find than one that does not work at all, and this is the usual reason for it.

FallbackAn engine without the function drops the whole declaration, so the property keeps whatever value came before it in the cascade. Declare the plain colour first and light-dark() after: old engines keep the first, new ones take the second, and no feature query is needed.

CSS 
.panel {
  /* without this, always the light one */
  color-scheme: light dark;

  /* old engines stop here */
  background: #f6f4ec;
  background: light-dark(#f6f4ec, #171d28);
}
::scroll-marker scroll
  • swipe sideways
  • the dots follow
  • no script at all

Carousel dots the browser draws itself

CaveatA marker only exists once content is set on it. An empty string counts; leaving the property out produces no pseudo-element at all, so the group renders as nothing and the feature reads as unsupported when it is working perfectly. The group also has to be declared on the scroll container itself with scroll-marker-group, not on the items.

FallbackAn engine without it drops scroll-marker-group and the pseudo-elements, leaving a plain scroll-snap carousel: swipe and trackpad still work, there are simply no dots. That is a real carousel with no script in it, so this ships unguarded rather than behind a feature query.

CSS 
.carousel {
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-marker-group: after;
}
.carousel > li::scroll-marker {
  /* no content, no marker at all */
  content: "";
  width: 8px;
  height: 8px;
}
li::scroll-marker:target-current {
  background: CanvasText;
}
anchor-name + position-area layout
Pinned to the button, not to a parent.

A tooltip that follows its anchor with no JavaScript

CaveatWithout position-try-fallbacks the tooltip will happily render off the edge of the viewport, and you will not notice, because you are testing in a wide window with the anchor in the middle of it. The fallback list is not a polish step, it is the half of the feature that handles the anchor being near an edge — which is where tooltips actually live.

FallbackAn engine without anchor positioning ignores position-anchor and position-area, and the absolutely positioned tooltip falls back to its containing block. Give that container position: relative and the un-anchored tooltip still lands somewhere sane instead of in the corner of the page.

CSS 
.pin { anchor-name: --pin; }

.tip {
  position: absolute;
  position-anchor: --pin;
  position-area: block-start;
  /* the half everyone forgets */
  position-try-fallbacks: flip-block;
}
@scope layout

inside the scope

past the limit, untouched

Styles that stop at a boundary you name

Caveat@scope is not encapsulation. It limits where these rules apply and does nothing to stop rules from anywhere else reaching in — a stray p { color: red } in another sheet still wins on specificity and still paints the inner block. Reaching for it expecting shadow-DOM behaviour gets you the opposite of what you expected, quietly. The limit is also exclusive: to (.inner) leaves .inner itself outside the scope, so you cannot style the boundary element from within.

FallbackAn engine without it drops the entire block, so scoped rules simply never apply. Safe as an enhancement, unsafe as the only place a needed style lives: put the styles that must exist outside the block and use the scope for the ones that refine them.

CSS 
/* from .outer, down to but not
   including .inner */
@scope (.outer) to (.inner) {
  p { color: CanvasText; }
}

/* still reaches in — @scope is not
   a wall, only a range */
p { color: red; }
interpolate-size motion

The transition runs from 0 to auto. No measured pixels, no max-height guess, no resize maths — the thing the web could not do for twenty years.

Animating height to auto, finally

Caveatheight: auto becomes animatable only after opting in with interpolate-size: allow-keywords — and the opt-in inherits. Put it on :root, as most examples do, and every intrinsic-size transition on the whole site changes behaviour in one line. Scope it to the component until that is a decision rather than an accident.

FallbackEngines without it ignore the declaration and the panel snaps open with no transition — exactly what the web always did, so it ships unguarded. The old max-height: 600px trick animates to a guess and pauses on nothing when the guess is wrong; this needs no guess.

CSS 
.faq {
  /* it inherits — scope it, not :root */
  interpolate-size: allow-keywords;
}
.faq .panel {
  height: 0;
  overflow: clip;
  transition: height .35s ease;
}
.faq.open .panel { height: auto; }
linear() motion
ease-out
linear() spring

A spring in the easing function

CaveatBoth knobs leave together and both take 550ms; only the lower one arrives like an object with mass. linear() is not a curve — it is a polyline the engine walks between the stops you hand it, so a spring is a real spring equation sampled into two dozen of them. That is the first thing it costs: nobody writes this by hand, and a stop count low enough to read is low enough to see, as facets in what should be smooth. The second is that it is a timing function over a fixed duration and not physics, so it has no state. Toggle twice quickly and it does not carry its velocity into the new run the way a spring would; it restarts along the curve from wherever it stood, and the overshoot lands somewhere the eye reads as a fault. And the overshoot only exists on properties that can pass their end value: translate and transform can, opacity clamps at 1, so a bounce written on a fade is quietly just a fade.

FallbackWidely available since 2024; where it is not understood the value is dropped and the easing falls back to plain ease — the motion still happens, without the character. The real trap is the shorthand: written as transition: translate .55s linear(…), a rejected value takes the whole declaration with it, so the transition disappears rather than degrading. Where that matters, keep the shorthand for property and duration and set transition-timing-function on a line of its own. And it belongs inside prefers-reduced-motion: an overshoot is precisely the thing people switch motion off to be rid of.

HTML + CSS 
<div class="lane"><i class="knob"></i></div>

/* generated from mass, stiffness and
   damping — not typed by hand */
.knob {
  transition: translate .55s linear(
    0, 0.009, 0.035 2.1%, 0.141, 0.281 6.7%,
    0.723 12.9%, 0.938 16.7%, 1.017, 1.077,
    1.121, 1.149 24.3%, 1.159, 1.163, 1.161,
    1.154 29.9%, 1.129 32.8%, 1.051 39.6%,
    1.017 43.1%, 0.991, 0.977 51%, 0.974 53.8%,
    0.975 57.1%, 0.997 69.8%, 1.003 76.9%, 1);
}

/* values over 1 are the overshoot */
.demo:has(input:checked) .knob { translate: 185px; }
shape-outside type

A circle set into a column of text used to mean an image with the whitespace baked into it. These lines find the curve because the float carries a shape of its own, and nothing here has been cropped, traced or measured.

Type that wraps to a curve, not a box

CaveatThe lines follow the circle because the float carries a shape — and only because of that. shape-outside applies to floats and to nothing else, so the same declaration on a grid item, a flex item or a positioned box does exactly nothing, silently. What it does not do is change the element it sits on: that box is still a rectangle, its background still paints square, and the circle you see is border-radius doing separate work on the same numbers. Keep the two descriptions in step by hand or the text wraps a curve that is not there. The trap is margin: the shape resolves against the margin box by default, so adding margin: 10px grows the reference box and circle(50%) grows with it — the wrap drifts wider than the painted circle and the gap opens unevenly. Name the box and it stops moving: circle(50%) border-box pins the shape to the circle you drew, which is what lets the −5px margin here hang the disc past the text edge — a round form on the same vertical as flat type always reads a little inset — without dragging the wrap out with it. For a gap that follows the curve, use shape-margin, which is measured from the shape itself.

FallbackAn engine without shapes floats the box and wraps the text around its rectangle: the layout the web has had since it had floats, one degree less elegant, with nothing lost but the curve. Safe to add, then — but wasted on short text, because under four or five lines nobody reads a wrap they only see once. And it clips nothing, so it is not a substitute for clip-path when the shape belongs to the picture rather than to the text beside it.

HTML + CSS 
<div class="orb"></div>
<p>A circle set into a column of text…</p>

.orb {
  float: left;
  width: 94px;
  height: 94px;
  /* this one is only paint */
  border-radius: 50%;
  /* what the text obeys, pinned to the
     drawn circle so margin cannot move it */
  shape-outside: circle(50%) border-box;
  /* the gap, measured from the curve */
  shape-margin: 9px;
  /* optical overhang: paint only */
  margin-left: -5px;
}
animation-timeline: view() motion

Scroll this panel.

  • Each row fades in
  • as it enters the view,
  • driven by its own position
  • inside the scroller.
  • No IntersectionObserver,
  • no listener, no classes
  • toggled from a callback.
  • Scroll back up:
  • it plays in reverse.

Reveal on scroll, with no observer

CaveatPut the hidden state in the keyframe’s from, never on the element itself. Engines without view() ignore the timeline, the animation runs its zero-second duration and finishes — content simply appears. Hide elements with opacity: 0 in their own styles instead and those engines show a blank page forever. That inversion is the entire safety of this pattern.

Fallbackanimation-range: entry keeps the whole reveal inside the moment of arrival — without it the element keeps animating the entire way across the scroller. And unlike an observer, this reverses for free when the reader scrolls back.

CSS 
li {
  animation: rise linear both;
  animation-timeline: view();
  /* only while it is arriving */
  animation-range: entry 0% entry 85%;
}

/* hidden lives HERE, not on li */
@keyframes rise {
  from { opacity: 0; translate: 0 16px; }
}
overflow: clip layout

STICKY

one — a line wider than the pane

two — a line wider than the pane

three — a line wider than the pane

four — a line wider than the pane

five — a line wider than the pane

six — a line wider than the pane

seven — a line wider than the pane

eight — a line wider than the pane

nine — a line wider than the pane

overflow-x: hidden

STICKY

one — a line wider than the pane

two — a line wider than the pane

three — a line wider than the pane

four — a line wider than the pane

five — a line wider than the pane

six — a line wider than the pane

seven — a line wider than the pane

eight — a line wider than the pane

nine — a line wider than the pane

overflow-x: clip

Clipping that leaves sticky alone

CaveatScroll both panes: the same heading sticks on the right and scrolls away on the left. overflow-x: hidden is not allowed to stay on its axis — the used value of the other one changes from visible to auto, so the wrapper becomes a scroll container. Every position: sticky below it now resolves against that box, which has no height of its own and therefore never scrolls, so it never sticks. This is what a wrapper added months earlier to stop one horizontal bleed does to a header nobody has touched. clip carries no such coupling: overflow-x: clip leaves overflow-y: visible alone.

FallbackAn engine without clip drops the declaration and overflow stays visible — the long line bleeds past the edge, which is visible but harmless, and sticky keeps working. The failure lands on the cosmetic side. Note the other half of the trade: a clip box is not scrollable at all, not even from script, so if something was quietly calling scrollTo on that element, hidden was doing more than hiding. And overflow-clip-margin lets a focus ring or shadow bleed a set distance before the cut, which hidden cannot do at any price.

HTML + CSS 
<div class="pane">
  <div class="wrap">
    <h4>STICKY</h4>
    <p>a line wider than the pane</p>
  </div>
</div>

/* the one that scrolls */
.pane { height: 148px; overflow-y: auto; }

/* hidden here would drag overflow-y to
   auto, and sticky below dies in the
   scroll container that makes */
.wrap { overflow-x: clip; }

h4 { position: sticky; top: 0; }
p { white-space: nowrap; }
:focus-within a11y

A dropdown a keyboard can hold open

CaveatHover-only menus lock keyboards out; :focus-within keeps the panel open while anything inside it holds focus, so Tab walks straight through. Two traps: the menu snaps shut the instant focus leaves, and a pixel of empty space between trigger and panel breaks the hover path — bridge the gap with padding on the panel, never margin. Hide it with visibility, not display, so the tab from trigger to first item has something to land in.

FallbackKeep :hover alongside: iOS Safari does not hand buttons focus on tap, so a focus-only menu never opens on touch. For anything holding forms or many items, graduate to a real disclosure with aria-expanded.

HTML + CSS 
<div class="menu">
  <button>Workspace</button>
  <ul>
    <li><a href="#">Settings</a></li>
  </ul>
</div>

.menu { position: relative; }

.menu ul {
  position: absolute;
  top: 100%;
  left: 0;
  /* the bridge over the gap: padding,
     never margin, or hover has a hole */
  padding-top: 8px;
  /* not display: the tab out of the
     trigger needs somewhere to land */
  visibility: hidden;
}

/* open while anything inside has focus */
.menu:hover ul,
.menu:focus-within ul { visibility: visible; }
object-fit: cover media
DEFAULT
COVER

Avatars that never squash

CaveatThe default is fill, which is why the left face is squashed: a wide photo forced into a square stretches. cover crops instead — but it crops from the centre, so a face near the edge of the photo needs object-position to stay in frame. And the box must have both dimensions: with only a width the height follows the image and there is nothing to crop against.

FallbackWhere it is unsupported you get the stretched version on the left — ugly, but present and labelled. Never fake cover with background-image on a div: that throws away the alt text.

CSS 
.avatar {
  width: 64px;
  /* both, or there is nothing to crop */
  height: 64px;
  object-fit: cover;
  /* when the face is not centred */
  object-position: 50% 20%;
}
background-size hover
Documentation Changelog Pricing

An underline that slides in

Caveattext-decoration cannot animate its width, so the underline here is a background: a one-colour gradient sized 0% 2px, grown to 100%. The catch is that the percentage resolves against the whole inline box — on a link that wraps, each line fragment shows a slice of one long underline. Keep it for single-line labels and give wrapped prose links a plain text-decoration.

FallbackGive :focus-visible the same treatment — keyboard users hover nothing. With animations off the size still lands, instantly, so nothing is lost but the slide.

CSS 
a {
  /* the underline is a background */
  background:
    linear-gradient(currentColor, currentColor)
    no-repeat left 100% / 0% 2px;
  transition: background-size .25s;
}

a:hover,
a:focus-visible { background-size: 100% 2px; }
animation-delay: -43200s motion

An analog clock wound by one line of JavaScript

CaveatCSS cannot ask what time it is. The clock is three infinite rotations, and a negative animation-delay winds it: minus four hours starts an animation four hours in, instantly. The only JavaScript writes seconds-since-midnight into a custom property — and that is the whole script. The dial itself is laid out by cos() and sin(), not twelve hand-tuned offsets.

FallbackWith scripts off, the delay falls back to zero and you get a working clock set to midnight. Under prefers-reduced-motion the hands pause — a paused animation still honours its negative delay, so it freezes at the right time instead of springing back to twelve.

CSS + JS 
.hand {
  transform-origin: 50% 100%;
  animation: turn 43200s linear infinite;
  /* minus = start four hours in. */
  /* this IS how the clock is set */
  animation-delay: calc(var(--now) * -1s);
}
@keyframes turn { to { rotate: 360deg; } }

/* the dial, by trigonometry */
i { translate:
  calc(cos(var(--i) * 30deg) * 70px)
  calc(sin(var(--i) * 30deg) * 70px); }

// the entire script
clock.style.setProperty('--now', seconds);
animation + cqw motion

The logo that never hits the corner

CaveatTwo animations cannot share a property. Put the horizontal and the vertical drift on one element and the second translate wins outright instead of the two combining — which is why this needs one element per axis. And 100% in a translate is the element’s own size, so the travel is 100cqw - 100%: the box, less the logo.

FallbackIt does hit the corner. The wait is the lowest common multiple of the two durations, so 7.3s and 4.7s put it 5 minutes 43 seconds away. Under prefers-reduced-motion it parks in the middle instead of looping forever.

CSS 
.box { container-type: size; }

/* one element per axis, or they overwrite */
.drift {
  animation: x 7.3s linear infinite alternate;
}
.logo {
  animation: y 4.7s linear infinite alternate;
}

/* 100% is the logo, cqw is the box */
@keyframes x {
  to { translate: calc(100cqw - 100%) 0; }
}
@keyframes y {
  to { translate: 0 calc(100cqh - 100%); }
}
resize + max-width layout
CAPTION DRIFTS

drag me wide

CAPTION HOLDS

drag me wide

resize keeps writing after max-width stops it

CaveatDragging writes an inline width and does not stop at max-width. The box paints clamped, but a fit-content parent measures the stored value instead, so anything centred in that parent drifts off the box it belongs to.

FallbackGive the element and its caption a column with a width of its own. Then the centre is a property of the layout rather than of whatever the reader last dragged.

CSS 
/* drifts: fit-content asks the element, */
/* and resize answers with the stored width */
.wrap { width: fit-content; }

/* holds: the column decides, not the drag */
.wrap { width: min(100%, 210px); }
background + padding surface

Studio

Unlimited projects, shared components, and a staging domain per branch.

$24 / month

A gradient border that keeps its corners

Caveatborder-image ignores border-radius outright — square corners, every time, and no amount of radius fixes it. So the border is not a border here: it is padding over a gradient background.

FallbackGive the inner radius the outer value minus the padding. Match them and the corners sit visibly wrong, one curve inside another.

CSS 
.frame {
  /* the padding IS the border width */
  padding: 1px;
  border-radius: 14px;
  background: linear-gradient(
    135deg, #6fa8dc, #93c47d, #f6b26b);
}

.frame > * {
  border-radius: 13px; /* 14 - 1 */
  background: #131822;
}
radial-gradient at var() hover

Move the cursor here

The light follows the pointer. Two custom properties change; nothing re-renders.

A spotlight that follows the cursor

CaveatGate it behind @media (hover: hover) and (pointer: fine). On a touchscreen :hover latches after a tap, so the light switches on and stays on with nothing hovering it.

FallbackPut the glow on a pseudo-element and animate opacity. Animating the background itself repaints the whole card on every pointer move.

CSS + JS 
.card::before {
  background: radial-gradient(220px circle
    at var(--x) var(--y),
    #6fa8dc44, transparent 70%);
  opacity: 0;
  transition: opacity .25s;
}
.card:hover::before { opacity: 1; }

// x and y as percentages of the box
el.style.setProperty('--x', x + '%');
animation-timeline: scroll() motion

Scroll this panel. The bar at the top is driven by scroll position, not by a timer and not by a scroll listener.

Nothing measures anything. There is no JavaScript on this demo at all — the animation's timeline is the scroller itself.

Which also means it cannot drift, cannot fire late, and costs nothing on the main thread while you scroll.

Keep going.

Almost there.

That is the end of the panel, and the bar is full.

A progress bar tied to scroll, with no JavaScript

CaveatAn animation whose timeline is unsupported does not simply switch off — it still applies its fill state. Ship this unguarded and browsers without scroll timelines show a permanently full progress bar.

FallbackHide the bar by default and reveal it inside @supports (animation-timeline: scroll()). No bar reads as a design decision; a stuck full one reads as a broken page.

CSS 
.bar {
  transform-origin: 0 50%;
  animation: fill linear both;
  animation-timeline: scroll(nearest);
}
@keyframes fill {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

.track { display: none; }
@supports (animation-timeline: scroll()) {
  .track { display: block; }
}
position: sticky table
RegionSessions
Auckland4 812
Bergen3 190
Cádiz2 774
Dakar2 015
Esbjerg1 640
Faro1 288
Galway1 004

A table header that stays put

CaveatAny ancestor carrying overflow: hidden switches sticky off silently — no warning, no error, the header just scrolls away. That ancestor is usually a card wrapper somebody added months later.

FallbackWhere sticky is unsupported the header scrolls with the table, which is the plain table you started with. Nothing to polyfill.

CSS 
/* sticky goes on th, not thead */
.scroller { overflow: auto; }

.scroller th {
  position: sticky;
  top: 0;
  /* or rows show through */
  background: #1a212d;
}
-webkit-line-clamp text

The clamp counts line boxes, not characters, so it survives any font size you throw at it and never cuts a word in half. What it will not survive is a change of display type: the moment something sets this element to flex or grid, every line comes back at once and the layout below it moves.

Cut a paragraph to three lines

CaveatAll four declarations are load-bearing. Bottom padding is the trap: the clipped line stays visible inside the padding box, so pad the parent, never the clamped element.

FallbackUnsupported engines show the full paragraph, so it has to be allowed to be long rather than overlap what follows.

CSS 
.excerpt {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  /* without this, nothing clips */
  overflow: hidden;
}
field-sizing: content form

A textarea that grows as you type

CaveatGive it a max-height, or a pasted wall of text pushes the submit button off screen — worse than the scrollbar you were removing. lh units keep the bounds in lines, not guessed pixels.

FallbackChromium has had this since 123. Where it is ignored you get a plain textarea at whatever rows says, so set rows to the height you would have shipped anyway.

HTML + CSS 
<textarea rows="2"></textarea>

textarea {
  field-sizing: content;
  min-height: 3lh;
  /* or it eats the page */
  max-height: 9lh;
  resize: none;
}
<details name> disclosure
Shipping

Opening any panel closes the others, because they share a name.

Returns

No click handler, no state, no library. The browser owns it.

Warranty

Keyboard and screen readers work without any ARIA from you.

An accordion with no JavaScript

CaveatHiding the marker takes two declarations, not one. Miss either and one browser keeps a triangle you never designed for.

FallbackWithout name support every panel opens independently — all the content rather than none, which is the right way round to fail.

HTML + CSS 
/* same name = only one open at a time */
<details name="faq">
  <summary>Shipping</summary>…
</details>

summary { list-style: none; }
summary::-webkit-details-marker {
  display: none;
}
:focus-visible a11y
click one, then Tab to it

A focus ring for keyboards only

Caveat:focus { outline: none } is the most common accessibility bug on the web, and it looks like a tidy-up. It takes the ring from keyboard users, the only people who needed it.

FallbackEngines that do not know the selector skip the rule and keep the default ring on every focus. Noisier, still usable.

CSS 
/* never: button:focus { outline: none } */
button:focus:not(:focus-visible) {
  outline: none;
}

button:focus-visible {
  outline: 2px solid #6fa8dc;
  outline-offset: 2px;
}
position: sticky (inline) table
CitySessionsBouncePages
Auckland4 81261%2.4
Bergen3 19058%2.1
Cádiz2 77464%2.9
Dakar2 01549%1.8
Esbjerg1 64052%2.0
Faro1 28847%1.6
Galway1 00444%1.4

A wide table that keeps its first column

CaveatThe corner cell is sticky in two directions at once, so it has to outrank both the header row and the pinned column. Give it the highest z-index of the three or the scrolling cells paint straight over it.

FallbackEvery sticky cell needs its own opaque background. Sticky does not create a new layer, so without one the rows underneath show through as you scroll.

CSS 
/* the frozen column */
.pin { position: sticky; left: 0; z-index: 1; }
thead th { position: sticky; top: 0; z-index: 2; }

/* both at once, so it beats both */
thead .pin { z-index: 3; }
background-attachment: local scroll
displaypositiongrid-template-columnsaspect-ratiocontainer-typeanchor-name

Shadows that show there is more to scroll

CaveatThe two cover gradients have to match the container background exactly. Put this on a transparent or patterned surface and the covers read as grey smears sitting on top of your design.

FallbackNo JavaScript, no scroll listener. The local layers move with the content and the scroll layers stay put — the overlap is what makes a shadow appear only when it should.

CSS 
background:
  /* covers, must match the surface */
  linear-gradient(90deg, #131822 30%, transparent)
    left / 42px 100% no-repeat local,
  /* the shadows underneath them */
  radial-gradient(farthest-side at 0,
    rgba(0,0,0,.55), transparent)
    left / 18px 100% no-repeat scroll,
  #131822;
:has() + translate control

A segmented control with a sliding indicator

CaveatNever size the indicator in pixels. Hardcode a width and a shift and the pill lines up until someone renames an option — then it sits half over the next label, with no error to tell you. Equal columns and a shift of 100% of itself need no measuring.

FallbackKeep real radios underneath: rebuilt from divs it loses arrow-key navigation and the announced group. Without :has() the pill just stays on the first option and the radios still work.

CSS 
.seg {
  display: inline-grid;
  grid-auto-flow: column;
  /* equal, whatever the label says */
  grid-auto-columns: 1fr;
}
.seg::after {
  width: calc((100% - 8px) / 3);
  transition: translate .28s;
}
/* one column, measured by the browser */
.seg:has(input:nth-of-type(2):checked)::after {
  translate: 100% 0;
}
@keyframes + gradient loading

A skeleton that does not lie about the layout

CaveatA skeleton whose blocks are not the size of the real content is worse than a spinner: the page visibly rearranges the moment data lands. Match the line heights and widths you will actually render.

FallbackWrap the sweep in prefers-reduced-motion. A looping shimmer is exactly the kind of endless movement that setting exists to stop.

CSS 
.line {
  background: linear-gradient(90deg,
    #1a212d 25%, #26303f 50%, #1a212d 75%)
    0 0 / 300% 100%;
  animation: sweep 1.4s linear infinite;
}
@keyframes sweep {
  to { background-position: -300% 0; }
}
aria-expanded menu

A menu button that turns into a close button

CaveatIt is a button with aria-expanded, not a checkbox. A checkbox announces itself as a checkbox, and a menu toggle that reads as "checkbox, not checked" is worse than no label at all.

FallbackAnimate rotate and translate, never top. The transform pair runs on the compositor; moving top relayouts the button on every frame.

HTML + CSS 
<button aria-expanded="false">
  <span></span><span></span><span></span>
</button>

[aria-expanded="true"] span:nth-child(1) {
  translate: 0 8px; rotate: 45deg;
}
appearance: none form

A switch that is still a checkbox

CaveatStyle the input itself rather than hiding it behind a div. appearance: none strips the paint and keeps everything else — focus, the space key, the label association, the announced role.

FallbackWhere the styling is unsupported you get the platform checkbox. It is not the design, but it is a working control, which a styled div would not be.

CSS 
input[type="checkbox"] {
  /* paint gone, semantics kept */
  appearance: none;
  width: 44px; height: 25px;
  border-radius: 999px;
}
input:checked::after { translate: 19px 0; }
translateX(-50%) motion
FigmaAstroVitePlaywright

A marquee that never jumps

CaveatThe track holds the list twice and travels exactly -50%. Any other distance, or a single copy, and the loop visibly snaps back at the seam.

FallbackMark the second copy aria-hidden — it is decoration, and a screen reader should not read the same list twice. Stop the animation under prefers-reduced-motion.

CSS 
.track {
  display: flex;
  width: max-content;  /* the list, twice */
  animation: slide 14s linear infinite;
}
@keyframes slide {
  to { transform: translateX(-50%); }
}
backdrop-filter surface
backdrop-filter

Frosted glass over anything

CaveatThe element needs its own translucent background. Fully opaque and there is nothing to see through; fully transparent and most engines skip the filter entirely. Somewhere near 40% is where it reads as glass.

FallbackIt blurs whatever is painted behind it, so it is only worth the cost over something worth blurring. Over a flat colour it is an expensive way to draw that same colour.

CSS 
.glass {
  backdrop-filter: blur(11px);
  /* without this there is nothing to see */
  background: rgba(11, 14, 20, .42);
  border: 1px solid rgba(255,255,255,.16);
}
background-clip: text type
Ship it

Type painted with a gradient

Caveatcolor: transparent is doing the work, so if the background fails to paint for any reason the text is invisible rather than merely unstyled. Never put a whole paragraph in it, only display type you can afford to lose.

FallbackKeep the -webkit- prefixed property alongside the standard one. This is one of the few places where the prefix is still load-bearing rather than historical.

CSS 
.headline {
  background: linear-gradient(100deg,
    #6fa8dc, #f6b26b);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent; /* the whole trick */
}
::-webkit-slider-thumb form

A range slider you can actually style

CaveatThe WebKit and Gecko thumb selectors cannot share a rule. One unknown pseudo-element invalidates the entire selector list, so a combined rule silently styles nothing anywhere. Write them out separately, every time.

FallbackThe thumb needs appearance: none of its own, not just the input. And margin-top is what centres it on the track, since the thumb aligns to the track top by default.

CSS 
/* never combine these two */
input::-webkit-slider-thumb {
  appearance: none;
  margin-top: -7px; /* centres on the track */
}
input::-moz-range-thumb { border: 0; }
perspective + rotate hover
perspective
lives on the parent

A card that tips towards the cursor

CaveatThe perspective belongs on the parent, not on the card. Put it on the transformed element and every card gets its own vanishing point, so a row of them tilts in visibly different directions.

FallbackText blurs slightly while a 3D transform is applied — the glyphs are being rasterised at a scale they were not hinted for. Keep the angle small and never tilt body copy.

CSS 
.scene { perspective: 700px; } /* on the parent */

.scene:hover .card {
  rotate: x 9deg;
  box-shadow: 0 18px 30px rgba(0,0,0,.45);
}
@property motion
@property

A gradient angle that actually animates

CaveatCustom properties are strings until you register them. Animate an unregistered --angle and it jumps from start to end with nothing in between — no error, no warning, just a hard cut at 50%.

FallbackRegistering it declares a type, so the browser can interpolate. It also gives the property an initial value, which is what stops the first frame from rendering unstyled.

CSS 
@property --spin {
  syntax: "<angle>";  /* now it can interpolate */
  inherits: false;
  initial-value: 0deg;
}
.ring {
  background: conic-gradient(from var(--spin), …);
}
@keyframes spin { to { --spin: 360deg; } }
@container layout
Deploy hook

Runs on every push to main.

drag the corner →

A card that reads its own container, not the window

CaveatAn element cannot query itself. The container-type goes on a wrapper and the query targets its children, so every queried component needs one box more than you expected.

FallbackDeclaring a container also applies layout containment, which makes that box the containing block for position: fixed descendants. A fixed overlay inside one anchors to the card, not the viewport.

CSS 
.wrap { container-type: inline-size; }

@container (min-width: 210px) {
  .row { grid-template-columns: 62px 1fr; }
}
cqi layout

Fluid

drag the corner →

Type that scales with its container

CaveatA cqi unit resolves against the nearest ancestor that declared a container, not the nearest ancestor you had in mind. Nest two containers and the inner one silently wins.

FallbackAlways wrap it in clamp(). Unbounded container units produce four-pixel type in a sidebar and headline type in a hero, from the same rule.

CSS 
.wrap { container-type: inline-size; }

h2 {
  /* floor and ceiling are not optional */
  font-size: clamp(14px, 9cqi, 30px);
}
aspect-ratio layout
1:1
3:4
16:9

Boxes that keep their proportions

CaveatAn explicit height beats aspect-ratio every time. The one that catches people is implicit: a flex or grid parent stretches its children by default, and that stretch is a height.

FallbackSet align-items: start on the parent, or height: auto on the child. Then the ratio has room to do its job.

CSS 
.tile { aspect-ratio: 16 / 9; width: 96px; }

/* or the parent stretch overrides it */
.row { align-items: start; }
text-wrap: balance type
DEFAULT
Every snippet works, the caveat is the part nobody writes down
BALANCE
Every snippet works, the caveat is the part nobody writes down

A heading that breaks where a typesetter would

CaveatBrowsers stop balancing past roughly six lines and quietly do nothing beyond that. It is a headline tool: put it on body copy and you pay for the layout pass and get no result.

FallbackUnsupported engines wrap normally, so the heading must already read acceptably without it. Treat it as polish, never as the thing holding the layout together.

CSS 
h1, h2, h3 {
  text-wrap: balance; /* headings only */
}
text-wrap: pretty type

A paragraph set with pretty will not leave a single short word stranded on its own line at the end, which is the thing that makes a column look unfinished.

Paragraphs with no orphan last line

CaveatThis is the one for body copy, and balance is not. Swapping them is the common mistake: pretty only fixes the last lines, balance evens out every line but gives up on long text.

FallbackIt costs more layout work than normal wrapping, which is why it is opt-in. Scope it to prose rather than dropping it on a universal selector.

CSS 
p, li {
  /* no single word left alone */
  text-wrap: pretty;
}
hyphens: auto type

Justified narrow columns need hyphenation, otherwise the word spacing becomes uncomfortably irregular.

Hyphenation in a narrow column

CaveatIt does nothing without a lang attribute on the element or an ancestor. The browser needs to know which dictionary to hyphenate with, and silently declines rather than guessing.

FallbackNo dictionary for the language means no hyphens and ragged justification instead. Never rely on it to make a fixed-width layout fit.

HTML + CSS 
<html lang="en"> /* without this, nothing */

.column {
  hyphens: auto;
  text-align: justify;
}
:user-invalid form
type something that is not an email, then leave the field

An error state that waits its turn

Caveat:invalid matches from the moment the page loads, so an empty required field is red before anyone has typed a character. :user-invalid waits until the field has been interacted with.

FallbackWhere it is unsupported nothing turns red at all, which is the safe direction. Keep the browser message as the real error and use colour only to point at it.

CSS 
/* not :invalid, that fires on load */
input:user-invalid { border-color: #e06c6c; }
input:user-valid   { border-color: #93c47d; }
accent-color form

Native controls in your palette

CaveatOne property, one colour, no second opinion — the tick, the thumb and the fill are all derived from it. Need the check mark a different colour from the box and you are back to rebuilding the control.

FallbackIt inherits, so setting it once on a form covers everything inside. Where unsupported you get the platform blue, which is a working control either way.

CSS 
form {
  /* inherits to every control inside */
  accent-color: #93c47d;
}
:placeholder-shown form

A label that floats out of the way

CaveatThe trick needs a real placeholder attribute — even a single space — because the selector matches the placeholder being shown, not the value being empty. Drop the attribute and the label never moves.

FallbackThe label has to come after the input in the markup for the sibling selector to reach it. Order it visually with CSS, never by moving it back in the DOM.

HTML + CSS 
<input placeholder=" "><label>Project</label>

/* label follows input, so + can reach it */
input:not(:placeholder-shown) + label,
input:focus + label { translate: 0 -8px; }
scroll-snap-type scroll
one
two
three

A carousel the browser drives

Caveatscroll-snap-type goes on the scroller and scroll-snap-align on every child. Set only the first and nothing snaps, with no indication that half the recipe is missing.

FallbackAdd scroll-padding matching any sticky header, or the snapped item lands underneath it. Momentum, keyboard and touch all come free, with no library involved.

CSS 
.track {
  overflow-x: auto;
  scroll-snap-type: x mandatory;
}
.track > * {
  /* the half everyone forgets */
  scroll-snap-align: start;
}
overscroll-behavior scroll

Scroll to the bottom of this panel, then keep going.

The page behind it does not take over.

That handoff is called scroll chaining, and contain switches it off.

It is one line, and it replaces every body-lock hack.

You have reached the end. The page stayed where it was.

Scrolling that stops at the edge

CaveatThis is the real fix for the page scrolling behind an open modal. Locking body with overflow: hidden throws away the reading position and jumps the layout by the scrollbar width.

FallbackReach the end of this panel and keep scrolling: the page underneath stays put. Unsupported engines chain as before, which is the old behaviour rather than a broken one.

CSS 
.panel {
  overflow: auto;
  /* the scroll stops here */
  overscroll-behavior: contain;
}
scroll-padding-top scroll
BuildDeployRollback
Build

Compiles the site and writes it to the output directory.

Deploy

Uploads the result and swaps the alias once it is live.

Rollback

Points the alias back at the previous deployment.

Anchor links that clear a sticky header

CaveatJump to an anchor under a sticky header and the heading lands behind it. The offset belongs to the scroll container as scroll-padding-top, or to the target as scroll-margin-top, never to both.

FallbackIt applies to every scroll into view, including focus moves and browser find. Nothing to hook up, and no smooth-scroll script to fight with.

CSS 
/* on the scroller, once */
html { scroll-padding-top: 34px; }

/* or per target, if the header varies */
:target { scroll-margin-top: 34px; }
:has() state

A wrapper that knows its input is wrong

CaveatSpecificity is taken from the heaviest selector inside the brackets, not from :has() itself. Put an id in there and the whole rule inherits an id-level weight you did not intend to spend.

FallbackPair it with :user-invalid, never :invalid, or the wrapper is red before anyone has typed. Without :has() the field simply stays neutral.

CSS 
/* the parent selector we waited years for */
.field:has(input:user-invalid) {
  border-color: #e06c6c;
  background: rgba(224, 108, 108, .07);
}
:has() + :not() hover
build.ymldeploy.ymlrollback.ymlaudit.yml

Hovering one row quiets the others

CaveatThis re-evaluates on every pointer move across the list. On a few dozen rows it is free; on a table of several hundred it is a visible frame cost, and the fix is to move the rule to the row rather than the list.

FallbackGuard it with @media (hover: hover). On touch the hover state latches after a tap and leaves every other row dimmed with nothing hovered.

CSS 
@media (hover: hover) {
  /* only while something is hovered */
  .list:has(a:hover) a:not(:hover) {
    opacity: .35;
  }
}
:has(:nth-child()) layout
  • item 1
  • item 2
  • item 3

A layout that changes when the list gets long

CaveatA quantity query counts children, so it re-runs whenever the list changes. Keep the threshold to one breakpoint: chaining several counts makes the layout jump twice while items are still loading in.

FallbackYou cannot nest :has() inside :has(), and it will not match pseudo-elements. Both are silent failures — the rule is simply dropped.

CSS 
/* four or more, go two across */
.list:has(li:nth-child(4)) {
  grid-template-columns: 1fr 1fr;
}
showModal() dialog
Focus is trapped

Tab around: focus stays inside. Escape closes it. The backdrop behind is a real pseudo-element you can style.

A modal that traps focus for you

Caveatshow() and showModal() are different elements in practice. Only the modal one gets ::backdrop, makes the rest of the page inert, traps focus and closes on Escape. Call the wrong one and you have a floating box with none of it.

FallbackClose it with <form method="dialog"> and the button needs no script at all. Escape fires cancel, not close, so intercept that one if you need to confirm.

HTML + JS 
<dialog>
  <form method="dialog">
    <button>Close</button>
  </form>
</dialog>

// not .show() — that skips all of it
dialog.showModal();
popovertarget dialog
Top layer, light dismiss, Escape to close. Two attributes, zero lines of script.

A popover with no JavaScript at all

CaveatIt lives in the top layer, so z-index on it or on anything around it is meaningless. Stacking is decided by the order things were promoted, and that trips up anyone debugging it the usual way.

FallbackLight dismiss, Escape and the trigger wiring all come from the two attributes. Where the API is missing the panel renders inline as ordinary content rather than disappearing.

HTML 
<button popovertarget="tips">Show tips</button>

<!-- no script, no listener, no library -->
<div id="tips" popover>…</div>
inert a11y
Danger zone

A section the page cannot reach

Caveatinert removes the subtree from focus order and from the accessibility tree, which pointer-events: none and disabled do not. Do not add it around an open modal: showModal() already inerts the rest of the page, and doing both can strand focus.

FallbackIt carries no styling of its own, so dim it yourself with [inert]. Where unsupported the controls stay reachable — degraded, but never invisible to a screen reader while visible on screen.

HTML + CSS 
<fieldset inert>…</fieldset>

/* inert paints nothing, say so yourself */
[inert] { opacity: .35; }
@starting-style motion
faded in from display: none

Animating something in from display: none

CaveatThere is nothing to transition from when an element appears: it had no previous style. @starting-style supplies that first frame. Without it the element simply snaps into place and the transition never runs.

FallbackThe rule has to match the same element in its shown state, and it must come after that rule in the sheet. Put it first and it loses on cascade order, silently.

CSS 
.panel { opacity: 0; transition: opacity .3s; }
.open .panel { opacity: 1; }

/* the frame it starts from */
@starting-style {
  .open .panel { opacity: 0; }
}
allow-discrete motion
fades out before it goes

The exit animation, which is the hard half

Caveatdisplay is a discrete property: it flips at the halfway point, so the element vanishes mid-fade. allow-discrete makes the browser hold display: none back until the rest of the transition has finished.

FallbackIt only delays the property, never interpolates it. Nothing to fall back to either: without support the element disappears immediately, which is exactly today's behaviour.

CSS 
.panel {
  transition: opacity .35s,
              display .35s allow-discrete;
}
/* now display: none waits for the fade */
startViewTransition() motion
  • Build
  • Test
  • Deploy

Reordering a list without it jumping

CaveatEvery element you want animated needs a view-transition-name, and each one has to be unique at the moment of the transition. Two matching names and the transition is skipped outright, with an error only in the console.

FallbackWhere the API is missing the callback still runs and the DOM still updates — you lose the animation and nothing else. That makes it safe to ship without a feature check around the update itself.

JS + CSS 
// the DOM change goes inside the callback
document.startViewTransition?.(() => reorder())
  ?? reorder();

/* unique, or the transition is skipped */
#build { view-transition-name: build; }
#deploy { view-transition-name: deploy; }