Nuevo en CSS

Permite que un componente responda al ancho de su propio contenedor en lugar del viewport.

Chrome 105Edge 105Safari 16Firefox 110

Estiliza un padre según lo que contiene, sin clases de estado en JS.

Chrome 105Edge 105Safari 15.4Firefox 121

Anidado nativo de reglas dentro de reglas, incluido `&` para el padre, media y container queries.

Chrome 120Edge 120Safari 17.2Firefox 117

Las capas posteriores ganan, sea cual sea la especificidad de la regla de abajo.

Chrome 99Edge 99Safari 15.4Firefox 97

Un grid anidado puede adoptar las pistas de filas o columnas de su padre, de modo que títulos, cuerpos y.

Chrome 117Edge 117Safari 16Firefox 71

Mezcla dos colores en el espacio de color que elijas, así que puedes derivar colores de hover, tinte y.

Chrome 111Edge 111Safari 16.2Firefox 113

Espacios de color perceptualmente uniformes: pasos iguales de luminosidad se ven iguales, y el tono se.

Chrome 111Edge 111Safari 15.4Firefox 113

Toma un color existente y reescribe sus canales: `oklch(from var(--brand) calc(l + .2) c h)` crea un.

Chrome 119Edge 119Safari 16.4Firefox 128

Elige uno de dos colores según el `color-scheme` del elemento.

Chrome 123Edge 123Safari 17.5Firefox 120

Da a una custom property un tipo, un valor inicial y herencia, lo que la hace animable.

Chrome 85Edge 85Safari 16.4Firefox 128

Equilibra la longitud de las líneas en bloques cortos de texto (títulos, pies de foto) para que nunca.

Chrome 114Edge 114Safari 17.5Firefox 121

Popovers declarativos: cualquier elemento con `popover` se abre en la capa superior mediante el.

Chrome 114Edge 114Safari 17Firefox 125

Los diálogos modales nativos traen el atrapado de foco correcto, la inercia de la página y la gestión de.

Chrome 134Edge 134Safari noFirefox 137

Permite transicionar desde `display:none` y otras propiedades discretas.

Chrome 117Edge 117Safari 17.5Firefox 129

Retira un subárbol del foco, de los clics y del árbol de accesibilidad con un solo atributo.

Chrome 102Edge 102Safari 15.5Firefox 112

Como `:valid`/`:invalid`, pero solo después de que el usuario haya interactuado con el campo, así que un.

Chrome 119Edge 119Safari 16.5Firefox 88

Recolorea checkboxes, radios, sliders de rango y barras de progreso nativos con el color de tu marca,.

Chrome 93Edge 93Safari 15.4Firefox 92

Matemáticas en CSS más allá de calc(): ajustar un valor fluido a una rejilla (`round(nearest, 1.2rem,.

Chrome 125Edge 125Safari 15.4Firefox 118

La trigonometría en CSS hace que los layouts circulares y radiales sean CSS puro: coloca N elementos en.

Chrome 111Edge 111Safari 15.4Firefox 108

Dos animaciones sobre una propiedad, sumadas en vez de sustituidas.

Chrome 112Edge 112Safari 16Firefox 115

Mueve un elemento a lo largo de un trazado (círculo, inset, polígono, path SVG o `shape()`), rotándolo.

Chrome 116Edge 116Safari 16Firefox 122

`mask` sin prefijo permite desvanecer, recortar y dar forma a cualquier elemento con gradientes o.

Chrome 120Edge 120Safari 15.4Firefox 53

Aplica blur/saturate/brightness a lo que hay detrás de un elemento, la base de cabeceras, hojas y.

Chrome 76Edge 76Safari 18Firefox 103

Control estándar de las barras de scroll: reserva el hueco para que el layout no se desplace cuando.

Chrome 121Edge 121Safari 26.2Firefox 64

Agrupar varios `<details>` con el mismo `name` crea un acordeón exclusivo de forma nativa.

Chrome 131Edge 131Safari 18.4Firefox 144

Estiliza rangos de texto arbitrarios (coincidencias de búsqueda, corrector, tokens de código) sin.

Chrome 105Edge 105Safari 17.2Firefox 140

Envuelve un cambio del DOM en `document.startViewTransition()` y el navegador anima entre el estado.

Chrome 111Edge 111Safari 18Firefox 144

Coincide con `<details>`, `<dialog>`, `<select>` e inputs de fecha y color mientras están abiertos,.

Chrome 133Edge 133Safari 26.5Firefox 136

Consulta los valores de custom properties de un contenedor: `@container style(--theme: dark)` estiliza.

Chrome 111Edge 111Safari 18Firefox 151

Acota reglas a un subárbol con un límite inferior opcional ("scope en dónut"): `@scope (.card) to.

Chrome 118Edge 118Safari 17.4Firefox 146

Hace que inputs, textareas y selects se dimensionen según su contenido, así que un textarea crece.

Chrome 123Edge 123Safari 26.2Firefox 152

Devuelve negro o blanco, el que más contraste con el color dado.

Chrome 147Edge 147Safari 26Firefox 146

Una sintaxis de trazado escrita en unidades y matemáticas de CSS en vez de los números sin unidad de.

Chrome 135Edge 135Safari 18.4Firefox 148

Funciones numéricas que devuelven la posición de un elemento (empezando en 1) entre sus hermanos y el total.

Chrome 138Edge 138Safari 26.2Firefox 154

Recorta el espacio extra por encima de la altura de las mayúsculas y por debajo de la línea base dentro.

Chrome 133Edge 133Safari 18.2Firefox 154

Tooltips y menús se anclan a su disparador y se voltean en el borde.

Chrome 125Edge 125Safari 26Firefox 147

`@container name { }` sin condición coincide siempre que exista un contenedor con ese nombre, una forma.

Chrome 148Edge 148Safari 26.4Firefox 149

`lh` es el line-height del elemento, `rlh` el de la raíz, así que el espaciado puede expresarse en.

Chrome 109Edge 109Safari 16.4Firefox 120

Controla una animación de keyframes por la posición del scroll en lugar del tiempo: barras de progreso.

Chrome 115Edge 115Safari 26Firefox flag (158 nightly)

Activa en un sitio multipágina las navegaciones animadas con una sola at-rule en ambas páginas; los.

Chrome 126Edge 126Safari 18.2Firefox no

Mejor ajuste de párrafos: evita palabras huérfanas, mejora la separación silábica y empareja el borde.

Chrome 117Edge 117Safari 26Firefox no

Un popover de clase tooltip que no cierra los popovers `auto` abiertos y se cierra cuando se abre otro hint.

Chrome 133Edge 133Safari noFirefox 149

Declara cómo puede cerrarse un `<dialog>`: `any` (Escape, clic fuera o programático), `closerequest`.

Chrome 134Edge 134Safari noFirefox 137

`color-mix()` ahora acepta cualquier número de colores con pesos, y `light-dark()` acepta imágenes y.

Chrome 150Edge 150Safari noFirefox 150

Elimina los márgenes del primer y último hijo en los bordes del contenedor, así que el padding de una.

Chrome 155 (upcoming)Edge 155 (upcoming)Safari 16.4Firefox no

Trunca un bloque a N líneas con puntos suspensivos.

Chrome flagEdge flagSafari legacyFirefox flag

Una API de JavaScript tipada para valores CSS: lee `el.computedStyleMap().get('width')` como un.

Chrome 66Edge 66Safari 16.4Firefox flag

Una palabra clave de cascada que actúa como si la regla actual no definiera la propiedad, dejando ganar.

Chrome 148Edge 148Safari 27 betaFirefox 150

Actívalo con `interpolate-size: allow-keywords` y podrás transicionar `height: 0` a `height: auto` (o.

Chrome 129Edge 129Safari noFirefox no

Cambia lo que dibuja `border-radius`: `squircle` (curvas continuas al estilo iOS), `scoop` (hacia.

Chrome 139Edge 139Safari noFirefox no

Condiciones en línea dentro de un valor: `if(style(--variant: primary): #2563eb; else: #e5e7eb)`.

Chrome 137Edge 137Safari TPFirefox no

Funciones definidas por el autor con parámetros tipados y un descriptor `result`, utilizables en.

Chrome 139Edge 139Safari TPFirefox no

Hace que el foco de teclado y el orden del lector de pantalla sigan el orden visual de los layouts flex.

Chrome 137Edge 137Safari noFirefox no

Carruseles en CSS puro: un contenedor con scroll-snap genera botones de anterior/siguiente y una.

Chrome 135Edge 135Safari noFirefox no

Estiliza un elemento según su estado de scroll: una cabecera sticky que gana sombra cuando queda pegada,.

Chrome 133Edge 133Safari noFirefox no

Escala el tamaño de fuente de un título para que la línea llene exactamente su contenedor, la respuesta.

Chrome 150Edge 150Safari noFirefox no

Recorta un fondo a la caja del borde menos la caja del padding, así que un borde con gradiente es una.

Chrome 150Edge 150Safari noFirefox no

Dibuja líneas dentro de los huecos de grid/flex con `column-rule` y `row-rule` (más `*-rule-inset` y.

Chrome 149Edge 149Safari noFirefox no

`random(min, max, step)` da un valor aleatorio estable por carga de página (o por elemento con.

Chrome noEdge noSafari 26.2 / 26.0Firefox flag

Un layout tipo masonry en el que los elementos fluyen al carril de columna más corto, expresado con.

Chrome flagEdge flagSafari 26.4Firefox flag

Activa en un `<select>` nativo el renderizado totalmente estilizable: estiliza el botón, el desplegable.

Chrome 135Edge 135Safari 27 betaFirefox no

`attr()` ahora funciona en cualquier propiedad y puede interpretar el atributo como un tipo.

Chrome 133Edge 133Safari TPFirefox flag