CSS responsivo y moderno
21 pasos en 6 series de CSS.
Lo que CSS ganó en los últimos años, que es mucho. Media queries y container queries, propiedades personalizadas, y después los selectores que hacen preguntas: :has(), :is(), :where().
Movimiento, efectos y contenido generado lo rematan. Veintiún pasos, y varios resuelven problemas para los que la gente todavía escribe JavaScript.
Responsivo
- Media queriesBreakpoints que adaptan un layout, escritos mobile first.
- Tipografía y espacio fluidosclamp escala un valor con el viewport entre un piso y un techo.
- Container queriesEstilizar un componente según el espacio que recibe, no según el viewport.
- Preguntarle al contenedorUn componente que se dimensiona según su hueco, no según la ventana donde le tocó estar.
Propiedades personalizadas
- Propiedades personalizadasVariables que siguen la cascada, aceptan fallbacks y se definen por componente.
- Variables con fallbackEl segundo argumento de var() es qué usar cuando la variable no está definida.
- Propiedades personalizadas tipadas@property le dice al navegador qué es una variable, y entonces puede animarla.
Selectores que hacen preguntas
- El selector de padre:has() por fin deja que una regla dependa de lo que un elemento contiene.
- :is() y :where()El mismo agrupamiento; difieren en una sola cosa: qué hacen con la especificidad.
- AnidamientoLas reglas hijas viven dentro del padre: así lees el componente en un solo lugar.
Movimiento y efectos
- TransicionesInterpolar un cambio de propiedad en el tiempo, solo sobre las propiedades baratas.
- Transicionar hacia display: noneEl truco que antes pedía un timeout: dos líneas extra y el elemento puede animar su salida.
- Animaciones con keyframesUna secuencia de estados con nombre, repetible y reproducible.
- TransformacionesMover, escalar y rotar una caja sin tocar el layout.
- Transformaciones en propiedades propiastranslate, rotate y scale ya son propiedades: dos reglas pueden mover el mismo elemento.
- Animaciones movidas por el scrollLa línea de tiempo es la posición del scroll y no el reloj, y no cuesta nada de JavaScript.
- Respetar el movimiento reducidoToda animación necesita un interruptor de apagado para quien lo pide.
- Sombras y filtrosProfundidad y efectos de imagen: sombras de caja y de texto, filtros, modos de fusión.
Contenido generado
- PseudoelementosCajas generadas antes y después del contenido, más las de texto y UI.
- Anidamiento y capasDos sumas modernas: reglas anidadas y capas de cascada para ordenar.
Bis
- component_library.cssComponentes con tema: botones, tarjetas, chips y un toast, todos movidos por tokens.