Video · CSS is becoming a programming language — 6Pd6B0ZmT6s

Modern CSS features that no longer need JavaScript

Everything you see on this page is Astro + pure CSS. Carousels with native buttons, scroll-driven animations, anchor positioning, animated accordions, self-growing textareas, random values, logical selectors, fluid typography, the HTML Invoker API, customizable <select>, scroll-state queries, sibling functions, typed attr(), enter transitions, container queries, corner-shape and oklch + color-mix — without a line of JS.

Stack: Astro 7 · HTML + CSSPalette: amber / black0 KB of JS · native a11y

01Native carousel

Scroll snap + markers and buttons in CSS

Carousel with scroll markers and scroll buttons

02Scroll-driven

animation-timeline: scroll() / view()

Progress bar and reveals on viewport entry

position-anchor + position-try fallbacks

Popovers that don't go off-screen

details + ::details-content animated

details / summary with smooth transition

field-sizing: content

Textarea that grows and shrinks on its own

random() in CSS

Variation without JS using random()

:has() · :is() · :where() · :not()

Logical selectors that replace state JS

clamp() — fluid typography and layout

Responsive values without media queries

commandfor + invoketarget (HTML Invoker API)

Buttons that control elements without JS

10Customizable select

::picker(select) + selectedcontent

Style the <select> dropdown with pseudo-elements

container-type: scroll-state + @container scroll-state()

CSS reacts to scroll snap/stuck state

12Sibling functions

sibling-index() + sibling-count()

Position and total of siblings in pure CSS

Typed attr() — read attributes as color/number

One HTML attribute feeds CSS, no dedicated classes

14@starting-style

@starting-style — enter transitions

Animate popovers and dialogs on appear, without JS

15Container queries

container-type + @container

Elements that respond to their container's size, not the viewport

corner-shape + superellipse()

Native scoop, bevel, notch and squircle corners

17OKLCH + color-mix

oklch() + color-mix()

Perceptually uniform color and mixes in any space

:has() + checkbox to reveal a list

Reveal more items without slice() or JS

An honest note on support

Many of these APIs are recent and not yet in every browser (see the pill on each section). The nice part is they all degrade gracefully: the carousel still scrolls, the accordion opens/closes, the textarea works — just without the animated "plus".