Video · CSS is becoming a programming language — 6Pd6B0ZmT6s

Features de CSS moderno que ya no necesitan JavaScript

Todo lo que ves en esta página es Astro + CSS puro. Carousels con botones nativos, scroll-driven animations, anchor positioning, accordions animados, textareas que crecen solos, valores aleatorios, selectores lógicos, tipografía fluida, el HTML Invoker API, <select> customizable, scroll-state queries, sibling functions, attr() tipado, transiciones de entrada, container queries, corner-shape y oklch + color-mix — sin una línea de JS.

Stack: Astro 7 · HTML + CSSPaleta: amber / black0 KB de JS · a11y nativa

01Carousel nativo

Scroll snap + markers y botones en CSS

Carousel con scroll markers y scroll buttons

02Scroll-driven

animation-timeline: scroll() / view()

Barra de progreso y reveals al entrar en viewport

position-anchor + position-try fallbacks

Popovers que no se salen de la pantalla

details + ::details-content animado

details / summary con transición suave

field-sizing: content

Textarea que crece y se achica solo

random() en CSS

Variación sin JS con random()

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

Selectores lógicos que reemplazan JS de estado

clamp() — tipografía y layout fluido

Valores responsive sin media queries

commandfor + invoketarget (HTML Invoker API)

Botones que controlan elementos sin JS

10Select customizable

::picker(select) + selectedcontent

Estilá el dropdown del <select> con pseudo-elementos

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

CSS reacciona al estado de snap/stuck del scroll

12Sibling functions

sibling-index() + sibling-count()

Posición y total de hermanos en CSS puro

attr() tipado — leer atributos como color/número

Un atributo HTML alimenta el CSS, sin clases dedicadas

14@starting-style

@starting-style — transiciones de entrada

Animá popovers y diálogos al aparecer, sin JS

15Container queries

container-type + @container

Elementos que responden al tamaño de su contenedor, no del viewport

corner-shape + superellipse()

Esquinas scoop, bevel, notch y squircle nativos

17OKLCH + color-mix

oklch() + color-mix()

Color perceptualmente uniforme y mezclas en cualquier espacio

:has() + checkbox para revelar lista

Ver más elementos sin slice() ni JS

Nota honesta sobre soporte

Muchas de estas APIs son recientes y aún no están en todos los navegadores (ver pill de cada sección). La gracia es que todas degradan bien: el carousel sigue scrolleando, el accordion abre/cierra, el textarea funciona — solo sin el "plus" animado.