⌘ REFERENCIA · 209 elementos
Cheatsheet de CSS Moderno
El lenguaje entero en un sitio: cascada, selectores, layout, consultas, tipografía, color, posición y rendimiento. Busca por propiedad o por el problema que tienes.
⚖️ La cascada y las capas 15
Origen, encapsulación, style, capa, especificidad, ordenSeis criterios
Solo se mira si los cuatro anteriores empataronLa especificidad es la quinta
Las transiciones arriba del todo; el UA normal, abajoOcho escalones de origen
Ganan a tu CSS normal y pierden ante cualquier importantLas animaciones
Tres columnas que no se suman ni se llevan una(a, b, c)
Ninguna cantidad de clases lo alcanza jamásUn ID vale 1-0-0
El orden queda fijado en la línea que las nombra@layer reset, base, util;
Autoridad por posición, no por peso del selectorGana la capa más tardía
Se mete en una capa lo ajeno, no lo tuyoEncapar debilita
Vive en una capa implícita final: le gana a todasEl CSS sin capa
Entre importantes gana la capa más temprana!important invierte
El que está escrito fuera de toda capaEl important más débil
Encerrar la hoja de un tercero al importarla@import url(x) layer(viejo)
Devolver la propiedad a lo que dijo la capa anteriorrevert-layer
Del padre, del spec, según herede, del origen previoinherit · initial · unset · revert
🎯 Selectores, anidamiento y ámbito 15
Agrupa y adopta el peso de su argumento más específico:is(a, b)
Lo mismo con peso cero: la llave del CSS de librería:where(a, b)
Un selector inválido dentro no tumba a los demásLista tolerante
Niega varias cosas y cobra la más específica de ellas:not(a, b)
Estilar el contenedor, o el hermano anterior, sin JS:has(> img)
Ni dentro de otro :has, ni con un pseudo-elemento de argumento:has() no se anida
Filtra primero y cuenta después; nth-of-type no puede:nth-child(2n of .fav)
Dos condiciones para expresar un rango cerrado:nth-child(n+3):nth-child(-n+7)
El anillo solo cuando el navegador cree que hubo teclado:focus-visible
Inválido solo después de que el usuario haya intervenido:user-invalid
Lo anidado es un selector relativo anclado en el padreEl & implícito
Un solo ID en la lista del padre encarece todo el bloque& pesa como :is()
Techo y suelo: el donut que deja fuera lo ajeno@scope (.card) to (.slot)
Criterio nuevo: gana el ámbito más cercano al elementoProximidad
El sujeto implícito de la raíz, con especificidad cero:scope
🔧 Custom properties y @property 11
No es una variable: es una propiedad que se hereda--gap: 1rem
El fallback es todo lo que va tras la primera comavar(--gap, 1rem)
No cae al valor anterior: cae a unsetInválido al computar
Vacío o initial como interruptor de una declaraciónEl truco del espacio
Registrar da tipo, valor inicial y control de la herencia@property
El tipo es lo que decide si el valor se puede interpolarsyntax: <color>
Descriptor obligatorio: no hay valor por defectoinherits
Obligatorio salvo cuando la sintaxis es el asteriscoinitial-value
El mismo registro desde JS; el primero que llega mandaCSS.registerProperty()
Registrado como angle, el gradiente por fin giraAnimar un ángulo
Escribir y leer la variable en tiempo de ejecuciónsetProperty · getComputedStyle
📦 Caja, flujo y tamaño 12
Contenido, relleno, borde y margen, en ese ordenLas cuatro cajas
width pasa a medir hasta el borde exteriorbox-sizing: border-box
Solo vertical, solo en flujo normal, y en tres casosColapso de márgenes
Padding, borde, un BFC nuevo o salir del flujoQué lo impide
Separación entre hermanos que nunca colapsa ni sobra al finalgap
Una isla de layout: contiene floats y corta el colapsoBFC
Crear un BFC sin ningún efecto secundariodisplay: flow-root
La palabra más larga frente a no romper nuncamin-content · max-content
Como max-content pero con un techo declaradofit-content(20rem)
Llenar el contenedor descontando margen y bordestretch
La lógica: cambia de eje con el modo de escriturainline-size
No es un valor: es la incógnita que resuelve el motorauto
🧵 Flexbox 10
El tamaño de partida antes de repartir nadaflex-basis
Reparte el sobrante en partes proporcionalesflex-grow
Reparte el déficit ponderado por la base: no es simétricoflex-shrink
Es 1 1 0%: iguala anchos e ignora el contenidoflex: 1
Es 1 1 auto: crece pero parte del contenidoflex: auto
La causa número uno de que un hijo no se encojamin-width: auto
El arreglo del texto que desborda su columnamin-width: 0
justify-content va en el principal, align-items en el otroLos dos ejes
Empujar un solo elemento al extremo del ejemargin-inline-start: auto
Cada línea se dimensiona sola: no hay columnasEl límite de flex-wrap
🧱 Grid y subgrid 12
Se coloca entre líneas numeradas, no en celdasModelo de líneas
Fracción del espacio libre, no del espacio total1fr
Un suelo y un techo para la misma pistaminmax(12rem, 1fr)
Colapsa las pistas vacías; auto-fill las conservarepeat(auto-fit, ...)
repeat, auto-fit y minmax: responsive sin un solo breakpointEl patrón RAM
El layout dibujado en texto, y sin contar líneasgrid-template-areas
Un área nav genera las líneas nav-start y nav-endNombres implícitos
Lo que no cabe crea filas que nunca declarastePistas implícitas
Rellena huecos y desordena el orden de lecturagrid-auto-flow: dense
El hijo adopta las pistas del padre en vez de crear las suyassubgrid
Por eso las tarjetas hermanas alinean sus filasHereda gaps y nombres
Centrado en los dos ejes con una sola declaraciónplace-items: center
📐 Consultas y soporte 14
Aísla el tamaño en línea para poder preguntarlocontainer-type: inline-size
Poner nombre para saltar al contenedor que te interesacontainer-name
La pregunta la hace el descendiente, no el contenedor@container (width > 30rem)
Un contenedor no puede consultar su propio tamañoNunca a sí mismo
Las seis unidades relativas al contenedor de consultacqw cqh cqi cqb cqmin cqmax
Consultar un valor en lugar de una medida@container style(--modo: compacto)
Sintaxis de rango: se acabaron min- y max-(400px <= width <= 900px)
Reducir no es eliminar: el feedback sigue haciendo faltaprefers-reduced-motion
Preferencias del sistema, no capacidades del aparatoprefers-color-scheme · prefers-contrast
No significa móvil: significa que no hay hover fiable(hover: none)
Puntero impreciso: sube el tamaño de los objetivos(pointer: coarse)
El sistema impone la paleta; quítate de en medioforced-colors: active
Detectar un selector, no solo una declaración@supports selector(:has(a))
Escribe primero el camino base y mejora dentro@supports not (...)
📏 Unidades y escalas fluidas 13
Relativa a la raíz: la única que sigue el ajuste de fuenterem
Relativa al propio elemento: se compone al anidarem
Anchos y alturas medidos sobre la fuente realch · ex · cap · ic
Una altura de línea como unidad: ritmo vertical exactolh · rlh
El clásico: en móvil ignora la barra y recorta contenidovh
Se actualiza al retraerse la barra, y provoca saltosdvh
El viewport pequeño y el grande, los dos establessvh · lvh
Las de viewport medidas en ejes lógicosvi · vb
Un suelo, una recta y un techo en una funciónclamp(min, fluido, max)
Una pendiente en vw más una intersección en remLa recta entre dos puntos
Qué fracción del tamaño aporta el término en remFactor de respuesta
Sin término en rem el ajuste de fuente no lo mueve: falla 1.4.4Nunca solo vw
Una razón entre pasos, con cada paso fluido por separadoEscala modular
🔤 Tipografía y fuentes 15
Describe un archivo; no lo descarga hasta que se usa@font-face
Texto ya, con un cambio visible cuando llegue la fuentefont-display: swap
O llega a tiempo o no se usa: cero reflowfont-display: optional
Trocear por alfabeto: se baja solo lo que apareceunicode-range
Cuadrar el fallback para que el cambio no mueva nadasize-adjust · ascent-override
Adelanta la descarga y compite con todo lo demáspreload
Un archivo con ejes continuos en lugar de un peso por archivoFuente variable
Los cinco ejes registrados, en minúsculawght wdth slnt ital opsz
Tamaño óptico: más contraste al crecer, más robustez al reduciropsz
La vía baja: resérvala para los ejes personalizadosfont-variation-settings
Reparte las líneas de un titular, con tope de líneastext-wrap: balance
Evita la palabra huérfana al final del párrafotext-wrap: pretty
No hace nada si el elemento no declara su idiomahyphens: auto
La vía alta a OpenType: con nombre y sin apagar lo demásfont-variant-*
Recorta el hueco muerto que la métrica deja arriba y abajotext-box-trim
🎨 Color 13
El número codificado no es luz: por eso las mezclas ensucianGamma
Interpolar azul y amarillo en sRGB pasa por el centro muertoEl gris sucio
Lightness nominal: dos colores con la misma L no pesan igualhsl()
Claridad perceptual, croma y tono como ejes independientesoklch(L C H)
El mismo espacio en coordenadas cartesianasoklab()
Fija la claridad, mueve el tono: toda la escala pesa igualPaleta consistente
Mezclar declarando el espacio, no el que toquecolor-mix(in oklch, a, b)
Color relativo: derivar estados sin duplicar el tokenrgb(from var(--c) r g b / 50%)
Salir de sRGB hacia las gamas anchascolor(display-p3 ...)
El color imposible se acerca bajando croma, no recortandoMapeo de gamut
Dos valores en una línea; exige color-scheme declaradolight-dark()
Elegir por dónde da la vuelta el tono del degradadoin oklch longer hue
El punto medio del tramo, movido a manoSugerencia de interpolación
🖌️ Pintura, forma y filtros 14
La primera de la lista es la que se pinta encimaCapas de background
Recortar el fondo por la silueta de las letrasbackground-clip: text
Bonito y caro: repinta en cada fotograma de scrollbackground-attachment: fixed
La barra separa el radio horizontal del verticalborder-radius: 2rem / 1rem
Corta la imagen en nueve trozos y estira los ladosborder-image
Sigue la caja y su radio, no la silueta del contenidobox-shadow
Sigue el canal alfa: la sombra real de un PNG o un SVGfilter: drop-shadow()
Varias sombras superpuestas, no una sola muy grandeSistema de elevación
Recorte binario: dentro o fuera, sin medias tintasclip-path
Formas por coordenadas; solo shape() admite unidades CSSshape() · path() · xywh()
Enmascarar sí tiene alfa: admite degradados y bordes suavesmask
Que el texto rodee una forma; sigue exigiendo floatshape-outside
Obliga a rasterizar lo que hay detrás en cada fotogramabackdrop-filter
Fusiona con el grupo, salvo que levantes la barreramix-blend-mode · isolation
🔺 Transformaciones y apilamiento 12
Propiedades sueltas: se animan y se sobrescriben apartetranslate · rotate · scale
Es producto de matrices: rotar y mover no conmutaEl orden de transform
El punto que se queda quieto; por defecto, el centrotransform-origin
En SVG decide si el origen mide sobre el viewBox o la cajatransform-box
La distancia del ojo: menos valor, más deformaciónperspective
Sin esto los hijos se aplanan contra el padretransform-style: preserve-3d
Ocultar la cara trasera al voltear una tarjetabackface-visibility: hidden
Un átomo: ningún hijo puede salirse de élContexto de apilamiento
opacity < 1, transform, filter, will-change, position fixedQué lo crea
Inútil si el ancestro ya perdió la comparación de arribaz-index: 9999
El orden de pintado dentro de un contexto, de fondo a positivosLas siete capas
Crear el contexto a propósito y sin efecto visualisolation: isolate
📌 Posición y sticky 10
static, relative, absolute, fixed y stickyLos cinco valores
La caja contra la que miden inset y los porcentajesBloque contenedor
Se desplaza al pintar, pero su hueco original se quedarelative
Donde estaría el absolute si no lo hubieras sacadoPosición estática hipotética
Un ancestro transformado lo convierte de hecho en absolutetransform rompe fixed
Los cuatro lados; con dos en auto y margin auto, se centrainset: 0
Relative hasta el umbral y pegado dentro de su propio padresticky
Un umbral, un scroller ancestro y sitio por donde moverseLas tres condiciones
En cualquier ancestro mata el sticky y sin avisaroverflow: hidden
Cada una con su top acumulado y su z-index crecienteCabeceras apiladas
🪟 Anclaje y capa superior 15
Bautizar el elemento que sirve de referenciaanchor-name: --menu
Contra qué ancla se mide este elemento posicionadoposition-anchor
Un lado del ancla usado como valor de insetanchor(bottom)
Dimensionar copiando la medida del anclaanchor-size(width)
La rejilla de nueve casillas alrededor del anclaposition-area
Alternativas para cuando la posición preferida no cabe@position-try
Qué hacer cuando el ancla se sale de la pantallaposition-visibility
Firefox 147 fue el último motor en implementarloBaseline en enero de 2026
Top layer, backdrop, foco atrapado y el resto inertedialog.showModal()
Sin modalidad: se queda en el flujo y sin backdropdialog.show()
El velo tras el modal, estilizable y animable::backdrop
Light dismiss: se cierra al pulsar fuera y con Escapepopover="auto"
Solo se cierra si tú lo cierras explícitamentepopover="manual"
Abrir y cerrar desde el marcado, sin escribir JavaScriptcommand · commandfor
Por encima del documento entero: el z-index deja de contarTop layer
🖱️ Scroll y formularios 14
El contenedor declara el eje y cuánto insistescroll-snap-type: x mandatory
Cada hijo dice por qué borde quiere quedar alineadoscroll-snap-align
Prohíbe que un gesto rápido se salte elementosscroll-snap-stop: always
El aire que el ancla deja bajo la cabecera fijascroll-margin-top
Lo mismo, pero declarado una vez en el contenedorscroll-padding
Corta el encadenamiento al llegar al final del paneloverscroll-behavior: contain
Reserva el hueco y evita el salto horizontalscrollbar-gutter: stable
La vía estándar; deja en paz a los pseudo de WebKitscrollbar-width · scrollbar-color
Suavizado nativo, y apágalo con reduced-motionscroll-behavior: smooth
Tiñe checkbox, radio y range sin destruir su accesibilidadaccent-color
El control crece con lo que el usuario va escribiendofield-sizing: content
Abre el select al CSS con ::picker() y ::checkmarkappearance: base-select
La única parte estilizable del input de fichero::file-selector-button
Le dice al navegador qué controles y qué barras pintarcolor-scheme
⚡ Arquitectura y rendimiento 14
El nombre como sustituto del ámbito que el lenguaje no teníaBEM
Ordenar la hoja de lo genérico a lo específicoITCSS
Primitivo, semántico y de componente, y por eso tresTokens en tres niveles
No es invertir: es otra escala de claridad y de cromaModo oscuro
Custom properties como API pública de un bloqueContrato de componente
Utilidades generadas; el ámbito lo aporta el marcadoTailwind
En declive: coste por render y fricción con el servidorCSS-in-JS en runtime
Promesas al motor para que acote el trabajo del framecontain: layout paint
Las cuatro garantías; exige que tú declares el tamañocontain: strict
Sáltate el renderizado de lo que aún no se vecontent-visibility: auto
El tamaño que se finge mientras no se renderizacontain-intrinsic-size
Reserva de capa: cara en memoria y nunca es el arreglowill-change
En layout y paint, no en la longitud de tus selectoresDónde está el coste
Grid, flex, container queries y scroll-snap, dibujadosOverlays de DevTools