How interfaces changed, and why

2007 → 2025

Split buttons

One main action plus a small menu of variations, in a single control.

Earliest documented

Windows Vista's split button control (2007). Earlier Office dropdowns are not sourced yet.

Since then

Material 3 Expressive (May 2025) made it a first-class component: five sizes, four colour styles, and a menu half that changes shape when opened.

Confidence

High · Microsoft and Material docs

• MSDN Magazine, Aug 2007
• Material split button

<div class="split">
  <button class="main">Export PDF</button>
  <button class="more" aria-haspopup="menu" aria-expanded="false"
          aria-label="More export formats">▾</button>
</div>
<ul role="menu" hidden>
  <li role="menuitem" tabindex="-1">PDF</li> …
</ul>

/* Open: the menu half turns round and the chevron flips */
.split.open .more { border-radius: 50%; }
.split.open .more svg { transform: rotate(180deg); }
// Enter / Space / ↓ opens and focuses the first item,
// ↑ ↓ move, Enter picks, Esc closes and returns focus.

The main half acts at once; the small half picks a different format.

Mid-2010s → 2023

The AI sparkle button

A sparkle became shorthand for "this button runs AI", which set expectations before a word was read.

Earliest documented

Google says it used a sparkle for AI features from the mid-2010s, then redesigned and standardised it in 2023.

Since then

Spread in quick succession to Bard, Google Photos, Miro, Notion, Spotify, ChatGPT and Zoom. Notion's first use is undated.

Confidence

High for Google · medium for the order of followers

• Google Design
• Quartz
• UX Collective

2019 → 2021

Soft, "physical" buttons

Neumorphism made buttons look pressed out of the surface. It went viral, then faded because its low contrast fails accessibility. It is the bridge to today's tactile buttons.

Earliest documented

Alexander Plyuto's banking concept on Dribbble, late 2019. Who named it is disputed (Michal Malewicz's article popularised "neumorphism"; others credit Jason Kelley).

Since then

Peaked as a 2020–21 trend, then faded over contrast failures.

Confidence

Medium · secondary sources agree

• Wikipedia
• Built In
• DaisyUI trends

/* Soft: the label nearly matches the surface (fails) */
.soft {
  background: var(--surface); color: #9a9aa2;
  box-shadow: -6px -6px 14px var(--light), 6px 6px 14px var(--dark);
}
.soft:active {
  box-shadow: inset -4px -4px 10px var(--light), inset 4px 4px 10px var(--dark);
}
/* Fixed: same shape, a real label and edge (passes 4.5:1) */
.fixed { color: var(--text); border: 1px solid var(--edge); }

Soft buttons use the surface colour for the button and a pale label, so many people cannot read them or tell where the button is. Press both: the shape works; the label is the problem.

2020 → 2022

Focus rings only for the keyboard

For years teams removed focus outlines because they flashed on every mouse click, which left keyboard users lost. :focus-visible lets the browser decide: a ring for the keyboard, none for a click.

Earliest documented

The CSS :focus-visible pseudo-class: Chrome and Edge 86, Firefox 85, then Safari 15.4 on 14 March 2022.

Since then

Supported everywhere from 2022, and marked "widely available" in September 2024. Safari still handles buttons differently from other browsers.

Confidence

High · browser data and the WebKit team

• web-features: focus-visible
• Igalia: shipping in WebKit

<button class="save">Save draft</button>

/* A ring for the keyboard, none for a mouse click */
.save:focus { outline: none; }
.save:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
}

Press Play to watch a click, then a Tab key press.

2021

Tinted and tonal buttons

A middle level of emphasis between a solid button and a text link, so a screen can have one loud action and several quiet ones.

Earliest documented

Apple's iOS 15 button system (WWDC21, June 2021) added gray, tinted and filled styles. Google's Material 3 filled tonal button arrived the same year. Which came first is unconfirmed: a parallel arrival.

Since then

The default secondary action across iOS and Material products.

Confidence

High for Apple · Material's date to verify

• WWDC21: Meet the UIKit button system
• Material 3 buttons

<button class="btn tinted">Add to bag</button>

.btn        { transition: background-color .4s, color .4s; }
.btn.plain  { background: none;  color: var(--accent); }
.btn.gray   { background: color-mix(in srgb, var(--text) 10%, transparent); }
.btn.tinted { background: color-mix(in srgb, var(--accent) 22%, transparent);
              color: var(--accent); }
.btn.filled { background: var(--accent); color: var(--on-accent); }

Plain: the quietest. Use it for actions people rarely need.

2022

Send ↔ Stop

In AI chat composers, the send button becomes a stop button while an answer streams, then turns back.

Earliest documented

Unconfirmed. ChatGPT (November 2022) popularised it, but the only sources found, in two searches, are user forums. OpenAI's release notes do not mention it.

Confidence

Low · no dated primary source yet

• OpenAI community forum

<button class="send" aria-label="Send">…</button>

// While the reply streams, the same button stops it
send.onclick = () => {
  if (streaming) return stop();
  start();
};
function start() { streaming = true;  send.ariaLabel = 'Stop'; send.classList.add('stop'); }
function stop()  { streaming = false; send.ariaLabel = 'Send'; send.classList.remove('stop'); }

Send it, then press the same button again to stop the reply.

2023 → 2024

Buttons that react to where you look

On visionOS a highlight appears on the button you look at, trimmed to its shape. Hover became a signal of attention, not just a pointer.

Earliest documented

visionOS, WWDC23 (June 2023), "Design for spatial input". Disabled controls get no highlight; custom-styled buttons must supply their own.

Since then

visionOS 2 (WWDC24) added custom hover effects, applied by the system outside the app for privacy.

Confidence

High · Apple sessions

• WWDC23: Design for spatial input
• WWDC24: custom hover effects

/* The pointer stands in for your eyes; the glow is clipped to each shape */
.gaze button { position: relative; overflow: hidden; }
.gaze button::after {
  content: ""; position: absolute; inset: 0; opacity: 0;
  background: radial-gradient(100px circle at var(--x) var(--y),
              rgb(255 255 255 / .3), transparent 70%);
}
.gaze button.look::after { opacity: 1; }
.gaze button:disabled::after { display: none; } /* no highlight */

Move over the buttons: the glow follows, trimmed to each shape. The disabled one stays dark.

2025

Buttons that change shape when pressed

Instead of only changing colour, buttons now squish, round and make room. A connected group of buttons replaces the older segmented control.

Earliest documented

Google's Material 3 Expressive update (May 2025): more shapes and sizes, toggle behaviour, and shape changes on press and selection. Segmented buttons are deprecated in favour of connected button groups.

Since then

Google's own contribution, shipped with its 2025 Android and Material updates.

Confidence

High · Material Design docs

• Button groups
• Building with M3 Expressive
• Segmented (deprecated)

<div class="group" role="group" aria-label="Range">
  <button aria-pressed="false">Day</button>
  <button aria-pressed="true">Week</button>
  <button aria-pressed="false">Month</button>
</div>

.group { display: flex; gap: 2px; }
.group button {
  flex: 1 1 0; min-height: 52px; border-radius: 8px;
  transition: border-radius .35s, flex-grow .35s, transform .35s;
}
.group button:first-child { border-radius: 26px 8px 8px 26px; }
.group button:last-child  { border-radius: 8px 26px 26px 8px; }
.group button[aria-pressed="true"] { border-radius: 26px; }
/* pressed: squish, and the neighbours make room */
.group button.squish { flex-grow: 1.8; border-radius: 12px; transform: scaleY(.92); }

Press and hold one: it widens and squishes, and its neighbours make room.

2025

3D, animated icon tabs

Category buttons with small dimensional icons that play a moment when pressed: tactile and playful after a decade of flat design.

Earliest documented

Airbnb's app relaunch (May 2025): a Homes / Experiences / Services switcher with 3D-rendered icons. The balloon breathes fire and the bell shakes when pressed.

Confidence

Medium · design press · Airbnb's own post to add

• Design Week
• TechRadar

<div role="tablist" aria-label="Categories">
  <button role="tab" aria-selected="true"><svg>…</svg> Stays</button> …
</div>

/* Each icon plays its own short moment when its tab is pressed */
.balloon.anim .lift  { animation: rise .9s cubic-bezier(.3,1.4,.5,1); }
.balloon.anim .flame { animation: flicker .3s 3; }
.bell.anim .ring     { animation: shake .6s; transform-origin: 50% 15%; }
@media (prefers-reduced-motion: reduce) { .anim * { animation: none; } }

Generalised: line-art icons stand in for 3D renders.

2025

Glass buttons

Controls became a translucent layer that floats above content, bending what is behind it and reacting to touch. Beautiful over calm content, and harder to read over busy content.

Earliest documented

Apple's Liquid Glass, announced at WWDC on 9 June 2025: translucent, malleable controls that refract content and react to touch, as a layer above apps.

Since then

Reviewers raised contrast concerns over complex backgrounds, the same lesson neumorphism taught.

Confidence

High for the announcement · Apple's own docs to add

• TechCrunch
• Computerworld

<button class="glass">Continue</button>

/* A generalised glass control, not Apple's material */
.glass {
  min-height: 52px; padding: 0 26px; border-radius: 999px;
  background: radial-gradient(80px circle at var(--px) var(--py),
              rgb(255 255 255 / .35), transparent 70%), rgb(255 255 255 / .12);
  border: 1px solid rgb(255 255 255 / .35);
  backdrop-filter: blur(6px) saturate(1.6);
  transition: transform .5s cubic-bezier(.3, 1.6, .5, 1); /* springy */
}
.glass:active { transform: scale(1.12, .94); }   /* squashes like a drop */
/* JS sets --px/--py from the pointer, and stretches it while dragging */

Grab the Continue button and drag it between the striped and plain sides (or focus it and use the arrow keys).

2006

Infinite scroll

Pages stopped ending. New items load as you reach the bottom, so there is no "page 2" to click, and no natural place to stop.

Earliest documented

Aza Raskin says he designed it in 2006. One source dates it to 2016, against all the others.

Since then

Standard in social feeds. Raskin has since said publicly that he regrets it, because it removed the stopping point.

Confidence

Medium · his own interviews, no dated 2006 artefact

• NPR
• Masters of Scale

// Load the next page when a sentinel at the end scrolls into view
const io = new IntersectionObserver(([e]) => {
  if (e.isIntersecting) loadMore();
}, { root: feed, rootMargin: '0px 0px 120px' });
io.observe(sentinel);

Scroll the feed: more items arrive before you reach the end.

2007

Pinch to zoom

Two fingers move apart and the content grows around the point between them. Direct manipulation replaced zoom buttons.

Earliest documented

In a mass-market phone: the original iPhone, announced 9 January 2007 with "multi-touch". Disputed as a "first": multi-touch research is much older, and Jeff Han demonstrated it publicly in February 2006.

Since then

The default way to zoom maps, photos and pages on every touch screen.

Confidence

High for the iPhone date · medium for the earlier history

• Apple press release, 2007

// Two pointers: scale by the change in distance, around their midpoint
const d = Math.hypot(a.x - b.x, a.y - b.y);
scale = clamp(startScale * d / startDist, .1, 4);   // 10% to 400%
pic.style.transformOrigin = `${mid.x}px ${mid.y}px`;
pic.style.transform = `scale(${scale})`;
pic.style.touchAction = 'none'; // the page itself must not zoom

Pinch on a touch screen, or use + and − (10% to 400%). Play shows two fingers.

2007 → 2014

Swipe actions on list rows

Swiping a row sideways reveals actions behind it, and a long swipe commits the action. Triage became a gesture.

Earliest documented

Swipe-to-delete existed in the first iPhone apps; Mailbox (2013) made swiping the main way to sort email; Apple's iOS 8 Mail (2014) added configurable swipe actions.

Since then

Standard in mail and list apps on iOS and Android.

Confidence

Low · no dated primary source for any of the three dates

• Cult of Mac on Mailbox

// Follow the finger; past 40% of the width, commit on release
row.onpointermove = e => { dx = Math.min(0, e.clientX - x0); row.style.translate = `${dx}px 0`; };
row.onpointerup = () => dx < -row.offsetWidth * .4 ? archive(row) : snapBack(row);
/* Keyboard and screen readers get the same action as a real button */

Grab a row and drag it to the left: a short drag peeks at Archive, a long one archives it. Keyboard: Tab to the Archive button on each row.

2009 → 2012

Pull to refresh

Pull the top of a list down past a point and let go to load new items. The gesture became the button.

Earliest documented

Loren Brichter's Tweetie 2 for iPhone (2009). The patent was filed in 2010 and granted to Twitter in 2013, which promised to use it only defensively.

Since then

Apple added a system control in iOS 6 (2012) and it spread everywhere; many apps now refresh on their own instead.

Confidence

Medium · press and the patent filing

• Wikipedia: Tweetie
• TechCrunch on the patent

// Pull distance drives the indicator; release past 70px refreshes
list.onpointermove = e => {
  pull = Math.max(0, (e.clientY - y0) * .5);     // resistance
  ind.style.setProperty('--p', Math.min(1, pull / 70));
};
list.onpointerup = () => pull >= 70 ? refresh() : settle();

Grab the list and pull it down past the arrow, then let go. The Refresh button does the same for keyboards.

2011

The command palette

One shortcut opens a search box for every action in the app. It replaced toolbars for experts and teaches the shortcuts as you go.

Earliest documented

Most sources credit Sublime Text 2 (beta, 2011) with popularising Ctrl/Cmd+Shift+P. Its origin is disputed and no primary 2011 release note was found.

Since then

VS Code kept Ctrl/Cmd+Shift+P; Superhuman, Linear and Slack made Cmd+K the web standard.

Confidence

Medium · secondary sources agree

• Superhuman
• Sublime docs

// Fuzzy match: the typed letters appear in order
const match = (q, s) => { let i = 0; for (const c of s.toLowerCase()) if (c === q[i]) i++; return i === q.length; };
addEventListener('keydown', e => {
  if ((e.metaKey || e.ctrlKey) && e.key === 'k') { e.preventDefault(); open(); }
});

Open it, type a few letters, use the arrow keys and Enter.

2016 → 2021

Sheets that stop at set heights

A panel slides up from the bottom and rests at a peek, half or full height, so the content behind stays in view.

Earliest documented

Apple Maps in iOS 10 (2016) replaced its search bar with a card dragged up from the bottom; developers noted it was not yet a system component. iOS 15 (WWDC21) gave every app sheets with "medium" and "large" stop points.

Since then

Used for maps, music and AI apps on both platforms.

Confidence

High for iOS 15 · medium for the 2016 origin

• WWDC21: Customize and resize sheets
• MacStories iOS 10 review

/* Detents: the sheet rests at fixed heights */
.sheet { height: 90%; translate: 0 calc(100% - var(--detent)); transition: translate .5s; }
.sheet[data-d="1"] { --detent: 18%; }   /* peek   */
.sheet[data-d="2"] { --detent: 50%; }   /* medium */
.sheet[data-d="3"] { --detent: 90%; }   /* large  */
// on release, snap to the nearest detent

Grab the grey handle at the top of the sheet and drag it up or down; it settles at the nearest height. Or press it to step through.

2017 → 2019

Gestures replace the home button

A thin bar at the bottom of the screen replaced the home button: swipe up to leave an app. The whole screen became content.

Earliest documented

iPhone X (September 2017): no home button, a home indicator, swipe up to go home. Google's own change: Android 9 (2018) added a pill, and Android 10 (3 September 2019) made full gesture navigation the default.

Since then

The norm on both platforms; apps leave room for the gesture area.

Confidence

High · launch coverage of both

• 9to5Mac: iPhone X gestures
• 9to5Google: Android 10

// The app follows the finger and shrinks; past a threshold it goes home
bar.onpointermove = e => {
  const up = Math.max(0, y0 - e.clientY), k = Math.min(1, up / 160);
  app.style.transform = `translateY(${-up * .6}px) scale(${1 - k * .35})`;
  app.style.borderRadius = `${12 + k * 28}px`;
};
bar.onpointerup = () => up > 80 ? goHome() : reopen();

Grab the white bar at the bottom of the phone and drag it upward to go home. Tap the orange icon to open the app again.

2018 → 2021

Inline AI suggestions

The model guesses how your sentence ends and shows it in grey ahead of the cursor. One key accepts it; typing on ignores it.

Earliest documented

Gmail Smart Compose, announced at Google I/O on 8 May 2018. GitHub Copilot (technical preview, June 2021) brought it to code. Unconfirmed: Google's post does not describe the grey text or Tab-to-accept.

Since then

Standard in code editors and many writing tools.

Confidence

High for the date · medium for the Tab detail

• Google blog, May 2018
• Engadget

// Grey suggestion drawn after the typed text; Tab accepts it
input.oninput = () => { sugg.textContent = predict(input.value); };
input.onkeydown = e => {
  if (e.key === 'Tab' && sugg.textContent) { e.preventDefault(); input.value += sugg.textContent; sugg.textContent = ''; }
  if (e.key === 'Escape') sugg.textContent = '';
};
// Announce availability for screen readers, e.g. aria-describedby on the field

Type "Thanks for", then press Tab.

2022

Live activity in the status area

The camera cutout became a small, animated window onto something in progress: a timer, a delivery, a song. It grows when it has news and shrinks back.

Earliest documented

Apple's iPhone 14 Pro and its Dynamic Island, 7 September 2022. Live Activities were announced earlier, at WWDC22, for the Lock Screen.

Since then

Spread to sports, travel and delivery apps.

Confidence

High · Apple announcement

• 9to5Mac: Live Activities guidelines
• iMore

/* One element, three sizes, spring between them */
.pill { width: 120px; height: 34px; border-radius: 20px;
        transition: width .5s, height .5s, border-radius .5s cubic-bezier(.3,1.4,.5,1); }
.pill.compact  { width: 200px; }               /* activity running */
.pill.expanded { width: 300px; height: 120px; border-radius: 36px; }

Start the timer, then press the pill to expand it.

2024

An AI workspace beside the chat

The thing being made moved out of the chat into its own panel. You keep talking on one side while the document or code changes on the other.

Earliest documented

Claude Artifacts, 20 June 2024, with Claude 3.5 Sonnet. ChatGPT canvas followed in October 2024.

Since then

A side-by-side "chat plus work" layout is common across AI tools. Secondary sources describe the panels inconsistently, so this demo is generalised.

Confidence

High for the dates · company announcements

• Anthropic: Claude 3.5 Sonnet
• OpenAI: Introducing canvas

/* Chat alone, then chat and work side by side */
.work      { display: grid; grid-template-columns: 1fr 0fr; transition: grid-template-columns .6s; }
.work.open { grid-template-columns: .8fr 1.2fr; }
.doc       { overflow: clip; }

Send the prompt: the draft opens beside the chat.

2008 → 2011

Column grids on the web

Layouts snapped to a fixed set of columns with equal gutters, so pages built by different people still lined up.

Earliest documented

The 960 Grid System by Nathan Smith (2008) popularised 12- and 16-column layouts. Bootstrap, released by Twitter in August 2011, made the 12-column grid a default.

Since then

CSS Grid (2017) let pages define columns natively.

Confidence

Medium · project sites, release posts not re-checked

• 960.gs
• Bootstrap from Twitter, 2011

.page {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: 16px;                 /* gutter */
  padding: 0 24px;                  /* margin */
}
.card { grid-column: span 4; }     /* three cards across */

Press Play: first the margins, then the 12 columns and gutters, then every value.

2010

Responsive, fluid layouts

One layout that stretches and reflows for every screen, with spacing that changes at set widths instead of separate mobile sites.

Earliest documented

Ethan Marcotte's "Responsive Web Design", A List Apart, 25 May 2010: fluid grids, flexible images and media queries.

Since then

The default way to build for the web.

Confidence

High · the article itself

• A List Apart, May 2010

.card { padding: 16px; }
.card h4 { margin-bottom: 12px; }
@media (min-width: 600px) {
  .card { padding: 32px; }        /* more room on larger screens */
  .card h4 { margin-bottom: 20px; }
}

Switch between Phone and Desktop: the padding and gaps step up.

2014

The 8-point grid

Every size and gap is a multiple of 8 (and 4 for the tightest), so a whole product shares one rhythm and nobody argues about 13 versus 15 pixels.

Earliest documented

As a platform rule: Google's Material Design (2014), where components align to an 8dp grid and type to a 4dp baseline. Disputed as a "first": Android's 2012 design guide already used a 48dp rhythm, and the habit spread through designers' articles.

Since then

Most design systems use 4 or 8 as their base unit.

Confidence

Medium · Material's own pages for the rule

• Material: spacing methods
• Material 1 baseline grids

.card   { padding: 24px; }          /* 3 × 8 */
.title  { margin-bottom: 8px; }     /* 1 × 8 */
.sub    { margin-bottom: 24px; }
.fields { display: grid; gap: 16px; margin-bottom: 24px; }
.submit { margin-bottom: 16px; }

Press Play: the padding, then section gaps, field gaps and the tight title gap, then all values.

c. 2014 → 2025

Design tokens

Spacing values got names, like space-400, shared by design files and code, so changing one value changes it everywhere.

Earliest documented

Commonly credited to Salesforce's Lightning Design System team around 2014 (their tool, Theo). Unconfirmed: no primary source for the date or the people was found. The W3C Design Tokens Community Group published its first stable specification (2025.10) on 28 October 2025.

Since then

Design tools and code share the same named values.

Confidence

High for the 2025 spec · low for the 2014 origin

• W3C: first stable version

{
  "space": {
    "200": { "$type": "dimension", "$value": { "value": 8,  "unit": "px" } },
    "400": { "$type": "dimension", "$value": { "value": 16, "unit": "px" } },
    "600": { "$type": "dimension", "$value": { "value": 24, "unit": "px" } }
  }
}
.card { padding: var(--space-600); }

Press Play: each gap is labelled with its token name and value.

2017

The safe area

Edge-to-edge screens with notches, rounded corners and gesture bars meant content needed a guaranteed safe zone, then its own padding on top.

Earliest documented

iPhone X (2017). WebKit's "Designing Websites for iPhone X" introduced viewport-fit=cover and the safe-area insets, shipped as constant() then env() from iOS 11.2.

Since then

Every edge-to-edge app and site pads for the hardware.

Confidence

High · WebKit's own post

• WebKit, 2017

<meta name="viewport" content="width=device-width, viewport-fit=cover">

.screen {
  padding: env(safe-area-inset-top) env(safe-area-inset-right)
           env(safe-area-inset-bottom) env(safe-area-inset-left);
}
.content { padding: 16px; }  /* your own spacing, on top of the safe area */

Press Play: first the safe area the hardware needs, then the content padding.

2017 → 2021

Gap: spacing owned by the layout

Instead of every item carrying its own margin, the container sets one gap between its children. No doubled or leftover edges.

Earliest documented

CSS Grid shipped in all major browsers in March 2017 with grid-gap. Gap for flexbox followed, completing with Safari 14.1 in April 2021.

Since then

Design-system "stack" components and auto layout in design tools work the same way.

Confidence

Medium · browser release data, not re-checked

• MDN: gap

/* Before: each item spaces itself; edges and doubles creep in */
.list li { margin: 12px 0; }

/* After: the container owns the spacing */
.list { display: flex; flex-direction: column; gap: 12px; }

Compare Margins and Gap with the Design view: margins add space at the edges too.

2018 → 2023

Minimum touch target sizes

A small icon can still be easy to hit: the tappable area is padded out to a minimum size, and neighbours keep their distance.

Earliest documented

Apple's 44 × 44 point guidance came earlier, but its first date is unconfirmed. Earliest confirmed: WCAG 2.1 (2018), 44 × 44 CSS px at AAA. WCAG 2.2 (October 2023) added a 24 × 24 px minimum at AA. Material uses 48 × 48dp.

Since then

Icons keep their look but get a larger invisible hit area.

Confidence

High for WCAG · Apple's first date unconfirmed

• WCAG 2.2: target size
• Smashing Magazine

.tool { padding: 12px; }      /* 20px icon + 12 + 12 = 44px target */
.tool svg { width: 20px; height: 20px; }
.toolbar { display: flex; gap: 8px; }

Press Play: the drawn icon, then the padding that makes a 44px target, then the gap between targets.

2020

Fluid spacing with clamp()

Instead of jumping at breakpoints, gaps grow smoothly with the screen between a minimum and a maximum.

Earliest documented

CSS clamp() became available across browsers in 2020 (MDN: July 2020). Utopia's article on using it for fluid type and space was published on 25 September 2020.

Since then

Common in design systems that want one scale for every screen.

Confidence

High · MDN and Utopia's own post

• MDN: clamp()
• Utopia: clamp

.box  { container-type: inline-size; }
.card { padding: clamp(16px, 7cqi, 40px); }
.card > * + * { margin-top: clamp(8px, 4cqi, 24px); }
/* min, preferred (grows with the box), max */

Drag the width with the Design view on: the values change smoothly.

2021 → 2025

Roomier buttons

Component padding grew. Buttons got taller, rounder and wider inside, trading density for easier reading and tapping.

Earliest documented

Material 3 (2021): the standard button became 40dp tall, fully rounded, with 24dp side padding. Material 2 used 36dp, 16dp padding and 4dp corners; those older values should be re-checked against the archived spec.

Since then

M3 Expressive (2025) added five button sizes, each with its own padding.

Confidence

Medium · M2 values to re-check

• Material 3 buttons

.m2 { height: 36px; padding: 0 16px; border-radius: 4px;  text-transform: uppercase; }
.m3 { height: 40px; padding: 0 24px; border-radius: 20px; }

Press Play: side padding, then height, then corner radius, compared.

2025

Concentric corners: padding sets the radius

A nested shape's corner radius is its container's radius minus the padding between them, so curves stay parallel at any padding.

Earliest documented

Apple, WWDC25, "Get to know the new design system" (session 356): fixed, capsule and concentric shapes, where a concentric radius is the parent's minus the padding.

Since then

SwiftUI's ConcentricRectangle applies it automatically.

Confidence

High · Apple session and docs

• WWDC25 session 356
• ConcentricRectangle

.card  { --r: 32px; --p: 12px; border-radius: var(--r); padding: var(--p); }
.inner { border-radius: max(4px, calc(var(--r) - var(--p))); }  /* concentric */

Change the padding: the inner radius recalculates so the curves stay parallel.

2005 → 2010

A player you can put on any page

YouTube let anyone paste its player into their own site. Video stopped being a file to download and became a box you could drop into a blog post.

Earliest documented

YouTube launched in 2005 with a Flash player whose embed code anyone could copy. Writing in 2006, investor Fred Wilson credited the embeddable player as a key reason for its growth. The exact launch-day embed markup is not confirmed.

Since then

In 2010 YouTube tested an iframe embed that could fall back to HTML5 or Flash; iframe embeds are now the standard. Clicking the picture itself to pause or play is the norm on every web player since; its first dated appearance was not found.

Confidence

Medium · contemporary commentary and press

• AVC, Oct 2006
• The Register, 2010

<!-- Since 2010: one iframe; the host serves the right player -->
<iframe src="https://www.youtube.com/embed/VIDEO_ID"
        title="Our trip to the coast" allowfullscreen></iframe>

<!-- Flash era (typical form): a plugin object -->
<object data="player.swf" type="application/x-shockwave-flash">…</object>

The same video, embedded the old way and the current way. Click the picture to play or pause, as on every player from here on.

2009

Quality that adapts to your connection

Instead of one file, the player gets the video in several qualities and switches between them as your connection changes, so it keeps playing instead of stopping to buffer.

Earliest documented

Apple's HTTP Live Streaming, released with iPhone OS 3.0 in June 2009: the player measures bandwidth and switches bitrate during playback, in Safari with no extra app.

Since then

MPEG-DASH became the international standard for the same idea. YouTube's "Auto" quality works this way; the details of its rollout were not confirmed in this research.

Confidence

High for HLS · YouTube's rollout unconfirmed

• HTTP Live Streaming (Wikipedia)
• AppleInsider, 2009

#EXTM3U   (an HLS playlist: one video, four qualities)
#EXT-X-STREAM-INF:BANDWIDTH=400000,RESOLUTION=426x240
240p.m3u8
#EXT-X-STREAM-INF:BANDWIDTH=1500000,RESOLUTION=854x480
480p.m3u8
#EXT-X-STREAM-INF:BANDWIDTH=4000000,RESOLUTION=1280x720
720p.m3u8
#EXT-X-STREAM-INF:BANDWIDTH=8000000,RESOLUTION=1920x1080
1080p.m3u8

Play it, then slow the connection: the quality steps down instead of stopping.

2009 → 2010

Captions generated for every video

Speech recognition wrote captions automatically, so videos nobody had captioned could still be followed without sound, or in another language.

Earliest documented

Google announced automatic captions for YouTube on 19 November 2009, combining its speech recognition with the YouTube caption system, first for a group of partners.

Since then

Reported as available to all users from March 2010, then in more languages. Auto captions carry an "auto-generated" label because they make mistakes.

Confidence

High · Google's announcement

• YouTube blog, Nov 2009
• PCWorld

<video controls>
  <source src="trip.mp4" type="video/mp4">
  <track kind="captions" src="trip.en.vtt" srclang="en"
         label="English (auto-generated)" default>
</video>

Turn on CC: captions follow the speech, labelled as auto-generated.

2010 → 2015

Video without a plugin

The browser itself learned to play video. Players no longer needed a plugin, which meant they worked on phones, and their controls could be styled and made accessible like the rest of the page.

Earliest documented

YouTube began testing an HTML5 video player in January 2010, opt-in at first.

Since then

On 27 January 2015 YouTube made HTML5 its default player in Chrome, Internet Explorer 11, Safari 8 and beta Firefox.

Confidence

High · YouTube's engineering post, via press

• informitv, Jan 2010
• 9to5Google, Jan 2015

<!-- The browser plays it; no plugin -->
<video src="trip.mp4" controls playsinline width="640" height="360"></video>

Before native video, a missing plugin meant no video at all, which was the norm on phones.

2015 → 2018

Picture-in-picture

The video lifts out of the page into a small floating window, so you can keep watching while you read or switch apps.

Earliest documented

Safari on iPad, with iOS 9 (2015), through Apple's own WebKit interface; macOS Sierra brought it to Safari on the Mac in 2016.

Since then

Chrome shipped the standard Picture-in-Picture Web API in 2018 (sources list Chrome 69, 70 or 71), built to match Safari's features.

Confidence

High · WICG explainer and Google

• WICG explainer
• BGR on Chrome

// The standard API (Chrome, Edge, Safari)
pipButton.onclick = async () => {
  if (document.pictureInPictureElement) await document.exitPictureInPicture();
  else await video.requestPictureInPicture();
};

Press the picture-in-picture button (bottom right of the player): the video floats above the page. Then grab it and drag it to any corner.

2016

Inline playback and muted autoplay on iPhone

On iPhone, every web video used to jump to fullscreen. From iOS 10 it could play inside the page, and silent videos could start on their own when scrolled into view.

Earliest documented

WebKit's "New video policies for iOS" (2016): videos marked playsinline play inside the page on iPhone; muted videos may autoplay, only while visible, and pause if unmuted without a tap.

Since then

Muted, inline autoplay became the standard way to show video previews and replace GIFs.

Confidence

High · WebKit's own post

• WebKit: New video policies for iOS

<!-- Plays inside the page, starts silently when visible -->
<video src="clip.mp4" playsinline muted autoplay loop></video>

iOS 10 and later: the video starts silently on its own while it is in view. Tap it for sound.

2016 → 2017

Double-tap to skip

Tapping twice on the left or right half of the video jumps back or forward 10 seconds. The video itself became the control.

Earliest documented

YouTube's Android app, version 11.47, December 2016; reported broadly for Android and iOS in February 2017.

Since then

Common across mobile video apps and players.

Confidence

Medium · press reports

• The Next Web, Feb 2017
• Android Headlines, 2017

// Two taps within 300ms on one half of the video seek by 10s
screen.onpointerup = e => {
  if (e.timeStamp - lastTap < 300) seek(e.offsetX < screen.clientWidth / 2 ? -10 : 10);
  lastTap = e.timeStamp;
};
// Keyboard: J and L do the same

Double-click (or double-tap) either half to skip, or press J and L. A single click still pauses.

2017

Web video on the lock screen

A page playing media can show its title, artwork and controls on the phone's lock screen and in notifications, like a native app.

Earliest documented

The Media Session API in Chrome 57 for Android (stable March 2017): sites supply title, artist and artwork, and handle play, pause, seek and skip.

Since then

Supported in other browsers and on desktop, including the controls in picture-in-picture windows.

Confidence

High · Chrome release notes

• New in Chrome 57
• web.dev: Media Session

navigator.mediaSession.metadata = new MediaMetadata({
  title: 'Sunrise over the hills', artist: 'Our trip to the coast',
  artwork: [{ src: 'cover-512.png', sizes: '512x512', type: 'image/png' }]
});
navigator.mediaSession.setActionHandler('play', () => video.play());
navigator.mediaSession.setActionHandler('pause', () => video.pause());
navigator.mediaSession.setActionHandler('seekforward', () => video.currentTime += 10);

Play the video, then use the lock-screen controls: both stay in sync.

2020 → 2022

Chapters on the progress bar

The progress bar split into named sections, so you can see a video's structure and jump straight to the part you want.

Earliest documented

YouTube video chapters, opt-in in early May 2020 and rolled out in late May 2020: chapter titles show on the progress bar.

Since then

Extended to TVs and consoles in May 2022, and chapters can now be generated automatically.

Confidence

High · YouTube's announcement and support posts

• Gigazine, May 2020
• TechCrunch, May 2022

<!-- Chapters come from timestamps, e.g. in the description -->
0:00 Intro
0:12 The trail
0:31 The ridge
0:51 Wrap up
/* The bar is drawn as segments with small gaps between them */

Point at or focus the progress bar: each segment names its chapter.

2022

The most replayed moments

A small graph above the progress bar shows which parts other people replayed most, so viewers can find the highlight without scrubbing.

Earliest documented

YouTube's "Most replayed" graph, rolled out to all users on 18 May 2022 after an experiment: while seeking, a graph shows the most frequently replayed parts.

Since then

A standard part of YouTube's player on web and mobile.

Confidence

High · YouTube support post and press

• 9to5Google, May 2022
• TechCrunch, May 2022

<!-- A graph from aggregated replay counts, drawn above the bar -->
<svg class="heat" viewBox="0 0 100 20" preserveAspectRatio="none">
  <path d="M0 20 L0 16 … L100 18 L100 20 Z" />
</svg>

Point at or focus the progress bar: the graph peaks at the moment people replay most.