CSS3 Avanzado

1. CSS moderno y evolución de CSS

• Del CSS3 al CSS moderno
• Estándares de CSS actuales 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 gradual
• Comprensión del ecosistema moderno de CSS

2. Selectores avanzados

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

3. Colores modernos y efectos visuales

• Funciones de color RGB, HSL y modernas
• 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
• Sistemas de tema y colores modernos

4. Propiedades personalizadas de CSS y sistemas de diseño

• Variables de CSS / propiedades personalizadas
• Variables y valores de respaldo
• Temas dinámicos
• Personalización a nivel de componente
• Tokens de diseño con CSS
• Creación de temas claros y oscuros
• Uso de var(), @property y propiedades personalizadas tipificadas
• Construcción de sistemas de diseño CSS mantenibles

5. Anidación de CSS y gestión de cascadas

• Anidación nativa de CSS
• Sintaxis de anidación y mejores prácticas
• Anidación de CSS frente a pre-procesadores
• Cascada y herencia
• Capas de cascada con @layer
• Gestión de CSS de terceros
• @scope y conceptos de estilos limitados
• Construcción de arquitecturas CSS predecibles

6. Diseño avanzado con Flexbox

• Repaso de los fundamentos de Flexbox
• Eje principal y eje transversal
• Alineación avanzada
• Tamaño flexible
• gap
• Envoltura y ordenamiento
• Diseños anidados de Flexbox
• Patrones comunes de Flexbox
• Componentes receptivos usando Flexbox

7. CSS Grid avanzado

• Repaso de los fundamentos de Grid
• Grillas explícitas e implícitas
• Tamaño avanzado de pistas
• minmax()
• auto-fit y auto-fill
• min(), max() y clamp()
• Áreas de grilla
• Diseños de grilla receptivos
• Diseños de página complejos
• Subgrilla CSS
• Uso de Subgrilla para diseños de componentes alineados

8. Consultas de contenedor y receptividad basada en componentes

• Por qué las consultas de medio de la ventana gráfica no siempre son suficientes
• Conceptos de consultas de contenedor
• container-type
• @container
• Unidades de longitud de consulta de contenedor
• Diseño receptivo impulsado por componentes
• Consultas de estilo de consulta de contenedor
• Diseño de componentes receptivos reutilizables
• Consultas de contenedor frente a consultas de medio

9. Diseño receptivo moderno

• Diseño mobile-first
• Puntos de quiebre receptivos
• Tipografía fluida
• Espaciado fluido
• clamp()
• Unidades de ventana gráfica modernas:
  • svh
  • lvh
  • dvh
  • svw
  • lvw
  • dvw
• Consideraciones de la ventana gráfica dinámica
• Unidades relativas al contenedor
• Imágenes y medios receptivos
• Reducción de consultas de medio innecesarias

10. Propiedades lógicas e internacionalización

• Propiedades CSS lógicas frente a físicas
• margin-inline / margin-block
• padding-inline / padding-block
• inset-inline / inset-block
• Tamaño lógico
• Modos de escritura
• Diseños de derecha a izquierda (RTL)
• Construcción de interfaces adaptadas internacionalmente

11. Tipografía moderna

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

12. Transformaciones, transiciones y animaciones

• Transformaciones 2D y 3D
• Transiciones
• Animaciones de fotogramas clave
• Funciones de tiempo
• Composición de animaciones
• Rendimiento de transformaciones
• Animaciones impulsadas por el desplazamiento
• animation-timeline
• Conceptos de View-timeline
• Accesibilidad del movimiento
• prefers-reduced-motion
• Consideraciones de rendimiento

13. Funciones de interfaz de usuario modernas de CSS

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

14. Funciones avanzadas de CSS

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

15. Pre-procesadores de CSS

• Resumen de pre-procesadores de CSS
• LESS
• Variables y mixins
• Anidación de estilos
• Funciones y operaciones
• LESS frente a CSS nativo moderno
• Cuándo sigue siendo útil un pre-procesador
• Migración de funciones de pre-procesador a CSS nativo

16. Consideraciones de diseño y accesibilidad

• Mejores prácticas de CSS moderno
• Estilización con prioridad en accesibilidad
• Estados de enfoque de teclado
• :focus-visible
• Movimiento reducido
• Consideraciones de contraste y color
• Texto y contenido receptivos
• Texto sobre imágenes
• Componentes receptivos accesibles
• Mejora progresiva

17. Rendimiento y mantenibilidad de CSS

• Reducción de la complejidad de CSS
• Evitar especificidades innecesarias
• Capas de cascada para la mantenibilidad
• Patrones reutilizables de utilidades y componentes
• Conceptos de contención de CSS
• content-visibility
• Rendimiento de renderizado y diseño
• Reducción de cambios en el diseño
• Organización de bases de código CSS grandes
• Depuración de CSS con herramientas de desarrollo modernas de navegador

18. Proyecto práctico de CSS moderno

Los participantes construyen una interfaz web receptiva moderna que incorpora:

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