CSS3 Avanzado

1. CSS Moderno y Evolución de CSS

• De CSS3 al CSS moderno
• Estándares actuales de CSS e implementación en navegadores
• Comprensión de la especificación de CSS y la compatibilidad con navegadores
• Mejora progresiva
• Detección de características y degradación elegante
• Comprensión del ecosistema de CSS moderno

2. Selectores Avanzados

• Selectores de atributos avanzados
• Pseudo-clases estructurales
• :is()
• :where()
• :not()
• :has() y selectores relacionales
• Especificidad de selectores
• Gestión de la especificidad en proyectos grandes
• Mejores prácticas en selectores modernos

3. Colores y Efectos Visuales Modernos

• Funciones de color modernas: RGB, HSL
• color(), lab(), lch(), oklab() y oklch()
• Colores relativos
• Transparencia y canales alfa
• Gradientes avanzados
• Gradientes lineales, radiales y cónicos
• color-mix()
• Interpolación de colores
• Filtros CSS y efectos visuales
• Tematización moderna y sistemas de color

4. Propiedades Personalizables de CSS y Sistemas de Diseño

• Variables CSS / propiedades personalizables
• Variables y valores de respaldo (fallback)
• Temas dinámicos
• Personalización a nivel de componente
• Design tokens (fichas de diseño) con CSS
• Creación de temas claro y oscuro
• Uso de var(), @property y propiedades personalizables tipadas
• Construcción de sistemas de diseño CSS mantenibles

5. Anidación de CSS y Gestión de la Cascada

• Anidación nativa de CSS
• Sintaxis de anidación y mejores prácticas
• Anidación CSS vs. pre-procesadores
• Cascada y herencia
• Capas de cascada con @layer
• Gestión de CSS de terceros
• @scope y conceptos de estilizado acotado (scoped styling)
• Construcción de arquitecturas CSS predecibles

6. Maquetación Avanzada con Flexbox

• Repaso de los fundamentos de Flexbox
• Eje principal y eje transversal
• Alineación avanzada
• Dimensionamiento flexible
• gap
• Envoltura y ordenamiento
• Maquetaciones Flexbox anidadas
• Patrones comunes de Flexbox
• Componentes responsivos usando Flexbox

7. CSS Grid Avanzado

• Repaso de los fundamentos de Grid
• Grillas explícitas e implícitas
• Tamaño avanzado de pistas (track sizing)
• minmax()
• auto-fit y auto-fill
• min(), max() y clamp()
• Áreas de grilla
• Maquetaciones Grid responsivas
• Maquetaciones de página complejas
• Subgrillas CSS
• Uso de Subgrid para maquetaciones de componentes alineados

8. Consultas de Contenedor y Responsividad Basada en Componentes

• Por qué las consultas de medios de la ventana gráfica no siempre son suficientes
• Conceptos de consultas de contenedor
• container-type
• @container
• Unidades de longitud de consultas de contenedor
• Diseño responsivo basado en componentes
• Consultas de estilo de consultas de contenedor
• Diseño de componentes responsivos reutilizables
• Consultas de contenedor vs. consultas de medios

9. Diseño Responsivo Moderno

• Diseño centrado en el móvil
• Puntos de ruptura responsivos
• Tipografía fluida
• Espaciado fluido
• clamp()
• Unidades modernas de ventana gráfica:
• svh
• lvh
• dvh
• svw
• lvw
• dvw
• Consideraciones de la ventana gráfica dinámica
• Unidades relativas al contenedor
• Imágenes y medios responsivos
• Reducción de consultas de medios innecesarias

10. Propiedades Lógicas e Internacionalización

• Propiedades CSS lógicas vs. físicas
• margin-inline / margin-block
• padding-inline / padding-block
• inset-inline / inset-block
• Dimensionamiento lógico
• Modos de escritura
• Maquetaciones de derecha a izquierda (RTL)
• Construcción de interfaces adaptables internacionalmente

11. Tipografía Moderna

• Tipografía responsiva
• Fuentes variables
• Consideraciones de carga de fuentes
• font-size-adjust
• Escala de tipos fluida
• Saltos de línea y desbordamiento de texto
• text-wrap: balance
• text-wrap: pretty
• hyphens
• Mejores prácticas en tipografía moderna

12. Transformaciones, Transiciones y Animaciones

• Transformaciones 2D y 3D
• Transiciones
• Animaciones con fotogramas clave
• Funciones de tiempo
• Composición de animaciones
• Rendimiento de transformaciones
• Animaciones impulsadas por el desplazamiento
• animation-timeline
• Conceptos de línea de tiempo de vista (view-timeline)
• Accesibilidad del movimiento
• prefers-reduced-motion
• Consideraciones de rendimiento

13. Funciones de UI Modernas de CSS

• Diálogos y popovers nativos de CSS
• Estilización de estados interactivos de la UI
• :popover-open
• :modal
• :focus-visible
• :target
• Estilización de estados de formularios
• accent-color
• appearance
• field-sizing
• Controles de formulario modernos
• Construcción de interacciones solo con CSS accesibles

14. Funciones Avanzadas de CSS

• calc()
• min()
• max()
• clamp()
• minmax()
• fit-content()
• color-mix()
• Funciones de color relativas
• Combinación de funciones para maquetaciones fluidas
• Patrones prácticos de diseño responsivo

15. Pre-procesadores de CSS

• Visión general de los pre-procesadores de CSS
• LESS
• Variables y mezclas (mixins)
• Anidación de estilos
• Funciones y operaciones
• LESS vs. CSS nativo moderno
• Cuándo sigue siendo útil un pre-procesador
• Migración de características de pre-procesadores a CSS nativo

16. Consideraciones de Diseño y Accesibilidad

• Mejores prácticas de CSS moderno
• Estilización con enfoque en la accesibilidad
• Estados de foco de teclado
• :focus-visible
• Reducción del movimiento
• Consideraciones de contraste y color
• Texto y contenido responsivos
• Texto sobre imágenes
• Componentes responsivos accesibles
• Mejora progresiva

17. Rendimiento y Mantenibilidad de CSS

• Reducción de la complejidad de CSS
• Evitar la especificidad innecesaria
• Capas de cascada para la mantenibilidad
• Patrones reutilizables de utilidades y componentes
• Conceptos de contención de CSS
• content-visibility
• Rendimiento de renderizado y maquetación
• Reducción de cambios en la maquetación (layout shifts)
• Organización de bases de código CSS grandes
• Depuración de CSS con herramientas modernas para desarrolladores de navegadores

18. Proyecto Práctico de CSS Moderno

Los participantes construirán una interfaz web moderna y responsiva que incorpore:

• CSS Grid
• Flexbox
• Subgrillas
• Consultas de contenedor
• Anidación de CSS
• Propiedades personalizables
• Capas de cascada
• Selectores modernos
• Tipografía fluida
• Unidades modernas de ventana gráfica
• Diseño responsivo
• Colores y gradientes modernos
• Animaciones y transiciones
• Consideraciones de accesibilidad
• Mejores prácticas de rendimiento