Saltar al contenido
wandres.dev
Iniciar sesión

CSS moderno

CSS de verdad: cascada y capas, :has, nesting, @scope, grid y subgrid, container queries, OKLCH, anchor positioning, arquitectura y rendimiento.

56 unidades · 280 temasEmpezar la ruta
  1. 00

    Nivel 0

    5 temas
    1. 01El mapa del territorio: siete regiones del CSS modernohechoen curso
    2. 02Qué resuelve CSS y qué deja deliberadamente fuerahechoen curso
    3. 03Las etapas del motor: dónde ocurre cada cosa que escribeshechoen curso
    4. 04Lo que cambió de verdad entre 2020 y 2026hechoen curso
    5. 05Cómo se decide hoy si puedes usar algohechoen curso
  2. 01

    Nivel 1

    5 temas
    1. 01Una declaración es una restricción, no una ordenhechoen curso
    2. 02El flujo normal: la solución que el motor da por defectohechoen curso
    3. 03auto no es un valor: es una incógnitahechoen curso
    4. 04Cuando no funciona: el motor resolvió otra cosahechoen curso
    5. 05El precio de lo declarativo: qué ganas y qué renunciashechoen curso
  3. 02

    Nivel 2

    5 temas
    1. 01La cascada: seis criterios y solo uno es la especificidadhechoen curso
    2. 02Origen e importancia: los ocho escalones de arribahechoen curso
    3. 03!important y la inversión que casi nadie conocehechoen curso
    4. 04Contexto, atributo style y orden de apariciónhechoen curso
    5. 05Depurar la cascada con el navegador delantehechoen curso
  4. 03

    Nivel 3

    5 temas
    1. 01Especificidad: tres columnas que no se sumanhechoen curso
    2. 02Contar especificidad sin equivocarsehechoen curso
    3. 03La trampa arquitectónica de los identificadoreshechoen curso
    4. 04Auditar un proyecto: el gráfico de especificidadhechoen curso
    5. 05Dejar de pelear: cinco tácticas y un plan de saneamientohechoen curso
  5. 04

    Nivel 4

    5 temas
    1. 01Por qué una capa vence a la especificidadhechoen curso
    2. 02Declarar capas y fijar su ordenhechoen curso
    3. 03Importar dentro de una capa: domesticar el CSS ajenohechoen curso
    4. 04Capas anidadas, subcapas implícitas y capas anónimashechoen curso
    5. 05Arquitectura con capas: el reset, los terceros y las utilidadeshechoen curso
  6. 05

    Nivel 5

    5 temas
    1. 01Qué se hereda, qué no, y con qué criterio se decidióhechoen curso
    2. 02inherit, initial, unset y reverthechoen curso
    3. 03revert-layer: deshacer una capa enterahechoen curso
    4. 04La cadena de valores: de declarado a actualhechoen curso
    5. 05La herencia como herramienta de arquitecturahechoen curso
  7. 06

    Nivel 6

    5 temas
    1. 01:is() y la lista de selectores tolerantehechoen curso
    2. 02:where() y la especificidad cerohechoen curso
    3. 03:not() con listas, y su aritméticahechoen curso
    4. 04Límites y coste de los selectores funcionaleshechoen curso
    5. 05Diseñar CSS para que otros lo sobrescribanhechoen curso
  8. 07

    Nivel 7

    5 temas
    1. 01El selector relacional: qué hace :has() de verdadhechoen curso
    2. 02Especificidad, invalidez y los límites del argumentohechoen curso
    3. 03El coste real de :has() y cómo medirlohechoen curso
    4. 04Catálogo de patrones con :has()hechoen curso
    5. 05Lo que ya no necesita JavaScript, y lo que síhechoen curso
  9. 08

    Nivel 8

    5 temas
    1. 01La anatomía de An+B: rangos, ventanas y consultas de cantidadhechoen curso
    2. 02of S frente a nth-of-type: filtrar antes de contarhechoen curso
    3. 03:focus-visible y la heurística que decide por tihechoen curso
    4. 04:user-invalid frente a :invalid y el catálogo de estadoshechoen curso
    5. 05:target, :defined y dónde vive el estadohechoen curso
  10. 09

    Nivel 9

    5 temas
    1. 01Anidamiento nativo: la sintaxis y cómo lo procesa el motorhechoen curso
    2. 02El ampersand implícito y la regla del selector relativohechoen curso
    3. 03La especificidad del ampersandhechoen curso
    4. 04Diferencias reales con Sass: lo que no se puede hacerhechoen curso
    5. 05Cuándo no anidar: el coste de la profundidadhechoen curso
  11. 10

    Nivel 10

    5 temas
    1. 01El problema del ámbito y la sintaxis de @scopehechoen curso
    2. 02Raíz, límite y el donut scopehechoen curso
    3. 03:scope, el sujeto implícito y la especificidad cerohechoen curso
    4. 04La proximidad: un criterio nuevo en la cascadahechoen curso
    5. 05Soporte real de @scope y estrategia en 2026hechoen curso
  12. 11

    Nivel 11

    5 temas
    1. 01No son variables: son propiedades que se heredanhechoen curso
    2. 02var() y el fallback: el flujo completo de resoluciónhechoen curso
    3. 03Inválido al analizar frente a inválido al computarhechoen curso
    4. 04El valor vacío, el interruptor de espacio y las guardashechoen curso
    5. 05Custom properties en tiempo de ejecuciónhechoen curso
  13. 12

    Nivel 12

    5 temas
    1. 01@property: el registro y sus tres descriptoreshechoen curso
    2. 02La gramática de syntax: tipos, combinadores y límiteshechoen curso
    3. 03Animar lo inanimable: ángulos, gradientes y coloreshechoen curso
    4. 04Cuando el valor no encaja con la sintaxishechoen curso
    5. 05Registrar desde JavaScript y quién ganahechoen curso
  14. 13

    Nivel 13

    5 temas
    1. 01Las cuatro cajas y box-sizinghechoen curso
    2. 02El colapso de márgenes y sus tres casoshechoen curso
    3. 03Qué impide el colapso de márgeneshechoen curso
    4. 04gap frente a margin: por qué evita el colapso por diseñohechoen curso
    5. 05Márgenes auto, negativos, en porcentaje y lógicoshechoen curso
  15. 14

    Nivel 14

    5 temas
    1. 01Qué es un contexto de formatohechoen curso
    2. 02El BFC y el catálogo completo de lo que lo creahechoen curso
    3. 03Los tres bugs clásicos y su única causahechoen curso
    4. 04El IFC y la caja de líneahechoen curso
    5. 05Tres árboles que no son el mismohechoen curso
  16. 15

    Nivel 15

    5 temas
    1. 01Tamaño intrínseco frente a extrínsecohechoen curso
    2. 02min-content y max-content: cómo se calculan de verdadhechoen curso
    3. 03fit-content y stretch: los dos valores compuestoshechoen curso
    4. 04El algoritmo de resolución de anchoshechoen curso
    5. 05Propiedades lógicas: inline-size frente a widthhechoen curso
  17. 16

    Nivel 16

    5 temas
    1. 01flex-basis: el tamaño de partidahechoen curso
    2. 02grow y shrink: la asimetría que nadie explicahechoen curso
    3. 03La trampa de flex: 1hechoen curso
    4. 04min-width: auto, la causa número uno de 'no se encoge'hechoen curso
    5. 05El algoritmo de distribución, paso a pasohechoen curso
  18. 17

    Nivel 17

    5 temas
    1. 01Los dos ejes y el orden visualhechoen curso
    2. 02Alineación completa: justify, align y la caja de alineaciónhechoen curso
    3. 03margin: auto como herramienta de alineaciónhechoen curso
    4. 04flex-wrap y el límite real de flexboxhechoen curso
    5. 05Los cuatro patrones canónicos de flexboxhechoen curso
  19. 18

    Nivel 18

    5 temas
    1. 01El modelo de líneas, no el de celdashechoen curso
    2. 02La unidad fr y qué significa exactamentehechoen curso
    3. 03repeat() y minmax(): describir pistas sin enumerarlashechoen curso
    4. 04auto-fill frente a auto-fithechoen curso
    5. 05Cómo se dimensionan las pistashechoen curso
  20. 19

    Nivel 19

    5 temas
    1. 01grid-template-areas: dibujar el layouthechoen curso
    2. 02Nombrar líneas y los nombres implícitoshechoen curso
    3. 03El algoritmo de colocación automáticahechoen curso
    4. 04grid-auto-flow: dense y el orden de lecturahechoen curso
    5. 05Las pistas implícitas y la rejilla que no declarastehechoen curso
  21. 20

    Nivel 20

    5 temas
    1. 01El problema real que resuelve subgridhechoen curso
    2. 02La sintaxis de subgridhechoen curso
    3. 03Herencia de gaps y de nombres de líneahechoen curso
    4. 04La solución completa: tarjetas, formularios y la rejilla de páginahechoen curso
    5. 05Límites, soporte y el fallbackhechoen curso
  22. 21

    Nivel 21

    5 temas
    1. 01Una dimensión frente a dos: qué distingue de verdad a Grid de Flexhechoen curso
    2. 02El contenido manda o manda el layouthechoen curso
    3. 03El árbol de decisión Grid o Flexhechoen curso
    4. 04Combinarlos: cuándo la respuesta correcta son los doshechoen curso
    5. 05Los falsos duelos: seis mitos sobre Grid y Flexhechoen curso
  23. 22

    Nivel 22

    5 temas
    1. 01El problema del breakpointhechoen curso
    2. 02El patrón RAM: repeat, auto, minmaxhechoen curso
    3. 03El sidebar que colapsa solohechoen curso
    4. 04El switcher: cambiar de fila a columna con un umbralhechoen curso
    5. 05Los límites del layout intrínsecohechoen curso
  24. 23

    Nivel 23

    5 temas
    1. 01Un solo módulo de alineación para todos los layoutshechoen curso
    2. 02Qué eje es cuál: justify y align en flex, grid y bloquehechoen curso
    3. 03Los valores: start, flex-start, self-start y toda la familiahechoen curso
    4. 04Las taquigrafías place-* y el problema del centradohechoen curso
    5. 05Desbordamiento seguro y la llegada de align-content al bloquehechoen curso
  25. 24

    Nivel 24

    5 temas
    1. 01Por qué el viewport era la pregunta equivocadahechoen curso
    2. 02Containment: el aislamiento que hace posible la preguntahechoen curso
    3. 03container-type y container-name: declarar el contenedorhechoen curso
    4. 04La sintaxis de @containerhechoen curso
    5. 05Un contenedor no puede consultarse a sí mismohechoen curso
  26. 25

    Nivel 25

    5 temas
    1. 01Las seis unidades de contenedorhechoen curso
    2. 02Contra qué se resuelven las unidades de contenedorhechoen curso
    3. 03Tipografía relativa al contenedorhechoen curso
    4. 04Espaciado y ritmo proporcionales al contenedorhechoen curso
    5. 05El componente verdaderamente portablehechoen curso
  27. 26

    Nivel 26

    5 temas
    1. 01Consultar un valor, no un tamañohechoen curso
    2. 02El estado real del soporte en 2026hechoen curso
    3. 03El patrón de variante: modos que se propaganhechoen curso
    4. 04@property y las trampas del valorhechoen curso
    5. 05Combinar tamaño y estilo en una arquitecturahechoen curso
  28. 27

    Nivel 27

    5 temas
    1. 01La sintaxis de rango en media querieshechoen curso
    2. 02prefers-reduced-motion: reducir no es eliminarhechoen curso
    3. 03Esquema de color, contraste y transparenciahechoen curso
    4. 04forced-colors: cuando el sistema decide los coloreshechoen curso
    5. 05Consultas de puntero: hover none no significa móvilhechoen curso
  29. 28

    Nivel 28

    5 temas
    1. 01Detectar una declaración con @supportshechoen curso
    2. 02Comprobar selectores y formatos de fuentehechoen curso
    3. 03Negación, combinación y anidamientohechoen curso
    4. 04Escribir el camino base primerohechoen curso
    5. 05Lo que @supports no puede detectarhechoen curso
  30. 29

    Nivel 29

    5 temas
    1. 01Las unidades absolutas y el píxel de referenciahechoen curso
    2. 02Las unidades relativas al tipohechoen curso
    3. 03lh y rlh: medir en alturas de líneahechoen curso
    4. 04Unidades de viewport y la barra del navegadorhechoen curso
    5. 05Unidades lógicas: vi, vb y el eje que cambiahechoen curso
  31. 30

    Nivel 30

    5 temas
    1. 01La recta entre dos puntoshechoen curso
    2. 02El zoom, el factor de respuesta y WCAGhechoen curso
    3. 03Construir una escala modular fluidahechoen curso
    4. 04Espaciado fluido y lo que no debe serlohechoen curso
    5. 05Verificar la escala y cuándo no usarlahechoen curso
  32. 31

    Nivel 31

    5 temas
    1. 01El ciclo de carga de una fuente webhechoen curso
    2. 02@font-face y sus descriptoreshechoen curso
    3. 03font-display y sus cinco valoreshechoen curso
    4. 04unicode-range y el subsettinghechoen curso
    5. 05preload y el coste real en byteshechoen curso
  33. 32

    Nivel 32

    5 temas
    1. 01Qué es una fuente variablehechoen curso
    2. 02Los ejes registrados y los personalizadoshechoen curso
    3. 03font-variation-settings frente a las propiedades de alto nivelhechoen curso
    4. 04opsz y el tamaño ópticohechoen curso
    5. 05Cuándo sale a cuenta una fuente variablehechoen curso
  34. 33

    Nivel 33

    5 temas
    1. 01text-wrap: balance y prettyhechoen curso
    2. 02hyphens y por qué depende de langhechoen curso
    3. 03Características de OpenType: font-variant frente a font-feature-settingshechoen curso
    4. 04text-box-trim y el espacio que no veshechoen curso
    5. 05El ajuste óptico de los márgeneshechoen curso
  35. 34

    Nivel 34

    5 temas
    1. 01El degradado que pasa por gris suciohechoen curso
    2. 02Qué es la gamma y por qué existehechoen curso
    3. 03Luz lineal frente a valor codificadohechoen curso
    4. 04La mezcla que sale malhechoen curso
    5. 05Los límites de hex y de HSLhechoen curso
  36. 35

    Nivel 35

    5 temas
    1. 01Uniformidad perceptual: qué mide de verdad un espacio de colorhechoen curso
    2. 02Los tres ejes de OKLCH y qué controla cada unohechoen curso
    3. 03La sintaxis de oklch() y oklab() en CSShechoen curso
    4. 04Lab, LCH, Oklab y OKLCH: quién es quiénhechoen curso
    5. 05Construir una paleta en OKLCH y la misma en HSL, lado a ladohechoen curso
  37. 36

    Nivel 36

    5 temas
    1. 01color-mix() y el espacio de interpolación explícitohechoen curso
    2. 02Sintaxis de color relativo: la palabra fromhechoen curso
    3. 03Derivar hover, disabled y todos los estados de un único tokenhechoen curso
    4. 04La función color() y los espacios anchoshechoen curso
    5. 05Mapeo de gamut: qué pasa cuando pides un color imposiblehechoen curso
  38. 37

    Nivel 37

    5 temas
    1. 01Lineal, radial y cónico: la geometría de cada degradadohechoen curso
    2. 02Paradas, posiciones y la sugerencia de interpolaciónhechoen curso
    3. 03Elegir el espacio de interpolación de un degradadohechoen curso
    4. 04Bandas duras, repeticiones y degradados usados como patrónhechoen curso
    5. 05Bandas, ruido y el coste real de un degradadohechoen curso
  39. 38

    Nivel 38

    5 temas
    1. 01El modelo de capas de background y el orden de pintadohechoen curso
    2. 02Posición, tamaño y repetición de una capa de fondohechoen curso
    3. 03background-clip, background-origin y el coste de attachmenthechoen curso
    4. 04Radios elípticos y la sintaxis de la barrahechoen curso
    5. 05border-image y el corte en nueve trozoshechoen curso
  40. 39

    Nivel 39

    5 temas
    1. 01Anatomía de box-shadow: desplazamiento, desenfoque y expansiónhechoen curso
    2. 02Sombras internas: hundir, delimitar y sustituir al bordehechoen curso
    3. 03box-shadow sigue la caja, drop-shadow sigue el alfahechoen curso
    4. 04Un sistema de elevación con sombras superpuestashechoen curso
    5. 05El coste de renderizado del desenfoquehechoen curso
  41. 40

    Nivel 40

    5 temas
    1. 01clip-path y el catálogo de formas básicashechoen curso
    2. 02path(), shape() y las formas de coordenadashechoen curso
    3. 03Recortar es binario, enmascarar tiene alfahechoen curso
    4. 04mask con imágenes, degradados y composiciónhechoen curso
    5. 05shape-outside: que el texto fluya alrededor de una formahechoen curso
  42. 41

    Nivel 41

    5 temas
    1. 01El pipeline de filter y por qué el orden importahechoen curso
    2. 02Las diez funciones de filtro y qué hace cada una por dentrohechoen curso
    3. 03backdrop-filter: qué hace el navegador y por qué es carohechoen curso
    4. 04mix-blend-mode: los modos separables y los que no lo sonhechoen curso
    5. 05isolation y el grupo de fusiónhechoen curso
  43. 42

    Nivel 42

    5 temas
    1. 01translate, rotate y scale frente a transformhechoen curso
    2. 02El orden importa: transform es multiplicación de matriceshechoen curso
    3. 03transform-origin: el punto sobre el que gira todohechoen curso
    4. 04perspective: dónde está el ojo que mirahechoen curso
    5. 05preserve-3d y backface-visibility: la escena que se aplanahechoen curso
  44. 43

    Nivel 43

    5 temas
    1. 01El orden de pintado: las siete capas dentro de un contextohechoen curso
    2. 02La lista completa de lo que crea un contexto de apilamientohechoen curso
    3. 03El árbol de contextos y la comparación por niveleshechoen curso
    4. 04Por qué tu z-index de 9999 sigue quedando debajohechoen curso
    5. 05isolation y la arquitectura de capas de una páginahechoen curso
  45. 44

    Nivel 44

    5 temas
    1. 01Los cinco valores de position y qué cambia cada unohechoen curso
    2. 02El bloque contenedor: cómo se determina y contra qué midehechoen curso
    3. 03inset, las propiedades lógicas y el sistema sobrerestringidohechoen curso
    4. 04La posición estática hipotética y el hueco que deja relativehechoen curso
    5. 05Cuando un ancestro con transform convierte tu fixed en absolutehechoen curso
  46. 45

    Nivel 45

    5 temas
    1. 01Las tres condiciones que sticky tiene que cumplirhechoen curso
    2. 02Cómo funciona sticky por dentro: dos rectángulos y un límitehechoen curso
    3. 03overflow: hidden, el asesino silencioso del stickyhechoen curso
    4. 04El patrón de cabecera pegajosa, y las cabeceras apiladashechoen curso
    5. 05El índice lateral y cómo saber que algo está pegadohechoen curso
  47. 46

    Nivel 46

    5 temas
    1. 01anchor-name y position-anchor: atar dos elementoshechoen curso
    2. 02La función anchor() y sus ladoshechoen curso
    3. 03anchor-size() y position-area: dimensionar y colocar en la rejillahechoen curso
    4. 04@position-try y el reposicionamiento cuando no cabehechoen curso
    5. 05position-visibility y el soporte real en 2026hechoen curso
  48. 47

    Nivel 47

    5 temas
    1. 01La capa superior y el final del z-indexhechoen curso
    2. 02dialog: la diferencia real entre show() y showModal()hechoen curso
    3. 03El atributo popover: auto, manual y el light dismisshechoen curso
    4. 04La API de invocación: command y commandforhechoen curso
    5. 05Menú y tooltip anclados sin JavaScript de posicionamientohechoen curso
  49. 48

    Nivel 48

    5 temas
    1. 01scroll-snap como sistema: contenedor, hijos y paradahechoen curso
    2. 02scroll-behavior y la preferencia de movimiento reducidohechoen curso
    3. 03overscroll-behavior y el encadenamiento del scrollhechoen curso
    4. 04scrollbar-gutter, scrollbar-width y scrollbar-colorhechoen curso
    5. 05scroll-margin y scroll-padding con cabecera fijahechoen curso
  50. 49

    Nivel 49

    5 temas
    1. 01Por qué los controles resisten al CSShechoen curso
    2. 02accent-color y color-scheme: teñir sin destruirhechoen curso
    3. 03field-sizing y el tamaño de los controleshechoen curso
    4. 04Los pseudo-elementos de cada control y las pseudo-clases de estadohechoen curso
    5. 05El select personalizable y el equilibrio con la accesibilidadhechoen curso
  51. 50

    Nivel 50

    5 temas
    1. 01El problema que todas las metodologías intentaban resolverhechoen curso
    2. 02OOCSS y SMACSS: separar y categorizarhechoen curso
    3. 03BEM: el nombre como sustituto del ámbitohechoen curso
    4. 04ITCSS y Atomic CSS: ordenar y atomizarhechoen curso
    5. 05Lo que quedó obsoleto y el paso a los tokenshechoen curso
  52. 51

    Nivel 51

    5 temas
    1. 01El modelo de Tailwind, por dentrohechoen curso
    2. 02El mejor argumento de cada ladohechoen curso
    3. 03El declive del CSS-in-JS en runtimehechoen curso
    4. 04Módulos de CSS y las soluciones de tiempo de compilaciónhechoen curso
    5. 05Qué eligen los equipos en 2026, según el proyectohechoen curso
  53. 52

    Nivel 52

    5 temas
    1. 01Los tres niveles de token, y por qué treshechoen curso
    2. 02Implementar la capa de tokenshechoen curso
    3. 03Temas con light-dark() y color-schemehechoen curso
    4. 04El modo oscuro no es una inversiónhechoen curso
    5. 05Contratos de componente con custom propertieshechoen curso
  54. 53

    Nivel 53

    5 temas
    1. 01Los mitos del rendimiento de CSS, con datoshechoen curso
    2. 02Dónde está el coste de verdad: layout y painthechoen curso
    3. 03contain: las cuatro garantías y qué compra cada unahechoen curso
    4. 04content-visibility, contain-intrinsic-size y la búsqueda en la páginahechoen curso
    5. 05will-change y el coste de las capas de compositorhechoen curso
  55. 54

    Nivel 54

    5 temas
    1. 01Leer la cascada real en el panel de estiloshechoen curso
    2. 02Valores computados y de dónde viene cada unohechoen curso
    3. 03Los overlays: grid, flex, container queries y scroll-snaphechoen curso
    4. 04Un método reproducible para bugs de layouthechoen curso
    5. 05El método aplicado a cuatro bugs realeshechoen curso
  56. 55

    Nivel 55

    5 temas
    1. 01La hoja de estilos de 2026, de principio a finhechoen curso
    2. 02El mapa de decisiones del track enterohechoen curso
    3. 03Los errores que ya no deberías cometerhechoen curso
    4. 04Hacia dónde va el lenguajehechoen curso
    5. 05El modelo mental completohechoen curso