Formation CSS3 Avancé

1. CSS moderne et évolution de CSS

• De CSS3 au CSS moderne
• Normes CSS actuelles et implémentation par les navigateurs
• Compréhension de la spécification CSS et de la compatibilité des navigateurs
• Renforcement progressif (Progressive enhancement)
• Détection de fonctionnalités et dégradation gracieuse
• Comprendre l'écosystème du CSS moderne

2. Sélecteurs avancés

• Sélecteurs d'attributs avancés
• Pseudo-classes structurelles
• :is()
• :where()
• :not()
• :has() et sélecteurs relationnels
• Spécificité des sélecteurs
• Gestion de la spécificité dans les grands projets
• Meilleures pratiques pour les sélecteurs modernes

3. Couleurs modernes et effets visuels

• Fonctions de couleur RGB, HSL et modernes
• color(), lab(), lch(), oklab() et oklch()
• Couleurs relatives
• Transparence et canaux alpha
• Dégradés avancés
• Dégradés linéaires, radiaux et coniques
• color-mix()
• Interpolation des couleurs
• Filtres CSS et effets visuels
• Systèmes de thèmes et de couleurs modernes

4. Propriétés personnalisées CSS et systèmes de design

• Variables CSS / propriétés personnalisées
• Variables et valeurs par défaut (fallback)
• Theming dynamique
• Personnalisation au niveau des composants
• Jetons de design (Design tokens) avec CSS
• Création de thèmes clairs et sombres
• Utilisation de var(), @property et des propriétés personnalisées typées
• Construction de systèmes de design CSS maintenables

5. Imbrication CSS et gestion de la cascade

• Imbrication CSS native
• Syntaxe d'imbrication et meilleures pratiques
• Imbrication CSS vs. préprocesseurs
• Cascade et héritage
• Couches de cascade avec @layer
• Gestion des CSS tiers
• @scope et concepts de stylage encapsulé
• Construction d'architectures CSS prévisibles

6. Mise en page avancée avec Flexbox

• Rappel des fondamentaux de Flexbox
• Axe principal et axe transversal
• Alignement avancé
• Dimensionnement flexible
• gap
• Enroulement (wrapping) et ordre
• Mises en page Flexbox imbriquées
• Modèles courants de Flexbox
• Composants responsives utilisant Flexbox

7. CSS Grid avancé

• Rappel des fondamentaux de Grid
• Grilles explicites et implicites
• Dimensionnement avancé des pistes (tracks)
• minmax()
• auto-fit et auto-fill
• min(), max() et clamp()
• Zones de grille (Grid areas)
• Mises en page Grid responsives
• Mises en page de page complexes
• Subgrid CSS
• Utilisation de Subgrid pour des mises en page de composants alignées

8. Requêtes de conteneur et réactivité par composants

• Pourquoi les requêtes médiatiques basées sur le viewport ne suffisent pas toujours
• Concepts des requêtes de conteneur
• container-type
• @container
• Unités de longueur des requêtes de conteneur
• Design responsive axé sur les composants
• Requêtes de style de conteneur
• Conception de composants responsives réutilisables
• Requêtes de conteneur vs. requêtes médiatiques

9. Design responsive moderne

• Design mobile-first
• Points de rupture (breakpoints) responsives
• Typographie fluide
• Espacements fluides
• clamp()
• Unités de viewport modernes :
  • svh
  • lvh
  • dvh
  • svw
  • lvw
  • dvw
• Considérations relatives au viewport dynamique
• Unités relatives au conteneur
• Images et médias responsives
• Réduction des requêtes médiatiques inutiles

10. Propriétés logiques et internationalisation

• Propriétés CSS logiques vs. physiques
• margin-inline / margin-block
• padding-inline / padding-block
• inset-inline / inset-block
• Dimensionnement logique
• Modes d'écriture
• Mises en page de droite à gauche (RTL)
• Construction d'interfaces adaptables à l'international

11. Typographie moderne

• Typographie responsive
• Polices variables
• Considérations relatives au chargement des polices
• font-size-adjust
• Échelles de police fluides
• Automatisme de retour à la ligne et débordement du texte
• text-wrap: balance
• text-wrap: pretty
• hyphens
• Meilleures pratiques de la typographie moderne

12. Transformations, transitions et animations

• Transformations 2D et 3D
• Transitions
• Animations par points clés (keyframes)
• Fonctions de temps (timing functions)
• Composition des animations
• Performance des transformations
• Animations pilotées par le défilement (scroll-driven)
• animation-timeline
• Concepts de timeline de vue
• Accessibilité du mouvement
• prefers-reduced-motion
• Considérations de performance

13. Fonctionnalités CSS UI modernes

• Dialogues et popovers natifs CSS
• Stylage des états d'interface utilisateur interactifs
• :popover-open
• :modal
• :focus-visible
• :target
• Stylage des états des formulaires
• accent-color
• appearance
• field-sizing
• Contrôles de formulaires modernes
• Construction d'interactions CSS-only accessibles

14. Fonctions CSS avancées

• calc()
• min()
• max()
• clamp()
• minmax()
• fit-content()
• color-mix()
• Fonctions de couleur relatives
• Combinaison de fonctions pour des mises en page fluides
• Modèles de design responsive pratiques

15. Préprocesseurs CSS

• Aperçu des préprocesseurs CSS
• LESS
• Variables et mixins
• Imbrication des styles
• Fonctions et opérations
• LESS vs. CSS moderne natif
• Lorsqu'un préprocesseur reste utile
• Migration des fonctionnalités des préprocesseurs vers le CSS natif

16. Considérations relatives au design et à l'accessibilité

• Meilleures pratiques du CSS moderne
• Stylage centré sur l'accessibilité
• États de focus au clavier
• :focus-visible
• Réduction du mouvement
• Considérations relatives au contraste et aux couleurs
• Texte et contenu responsives
• Texte superposé aux images
• Composants responsives accessibles
• Renforcement progressif

17. Performance et maintenabilité du CSS

• Réduction de la complexité du CSS
• Évitement de la spécificité inutile
• Couches de cascade pour la maintenabilité
• Modèles réutilisables d'utilitaires et de composants
• Concepts de conteneur CSS
• content-visibility
• Performance du rendu et de la mise en page
• Réduction des changements de disposition (layout shifts)
• Organisation de grandes bases de code CSS
• Débogage du CSS avec les outils de développeur modernes des navigateurs

18. Projet pratique de CSS moderne

Les participants construisent une interface Web moderne et responsive intégrant :

• CSS Grid
• Flexbox
• Subgrid
• Requêtes de conteneur
• Imbrication CSS
• Propriétés personnalisées
• Couches de cascade
• Sélecteurs modernes
• Typographie fluide
• Unités de viewport modernes
• Design responsive
• Couleurs et dégradés modernes
• Animations et transitions
• Considérations d'accessibilité
• Meilleures pratiques de performance