Formation CSS3 avancé

1. CSS moderne et évolution du CSS

• De CSS3 au CSS moderne
• Normes CSS actuelles et implémentation dans les navigateurs
• Compréhension de la spécification CSS et de la prise en charge par les navigateurs
• Amélioration progressive
• Détection des fonctionnalités et dégradation gracieuse
• Compréhension de l'écosystème 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
• Bonnes pratiques des sélecteurs modernes

3. Couleurs modernes et effets visuels

• RGB, HSL et fonctions de couleur 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
• Thèmes et systèmes de couleurs modernes

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

• Variables CSS / propriétés personnalisées
• Variables et valeurs de secours
• Thématisation dynamique
• Personnalisation au niveau des composants
• Jetons de conception (Design tokens) avec CSS
• Création de thèmes clair et sombre
• Utilisation de var(), @property et des propriétés personnalisées typées
• Construction de systèmes de conception CSS maintenables

5. Nesting CSS et gestion de la cascade

• Nesting CSS natif
• Syntaxe de nesting et bonnes pratiques
• Nesting CSS par rapport aux pré-processeurs
• Cascade et héritage
• Couches de cascade avec @layer
• Gestion du CSS tiers
• @scope et concepts de stylage scopé
• Construction d'architectures CSS prévisibles

6. Mises en page avancées avec Flexbox

• Rappel des fondamentaux de Flexbox
• Axe principal et axe transversal
• Alignement avancé
• Taille flexible
• gap
• Rupture de ligne et ordre
• Mises en page Flexbox imbriquées
• Motifs courants de Flexbox
• Composants responsifs utilisant Flexbox

7. CSS Grid avancé

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

8. Requêtes de conteneur et réactivité basée sur les composants

• Pourquoi les requêtes média de viewport ne suffisent pas toujours
• Concepts de requêtes de conteneur
• container-type
• @container
• Unités de longueur de requête de conteneur
• Conception responsive pilotée par les composants
• Requêtes de style de requête de conteneur
• Conception de composants responsifs réutilisables
• Requêtes de conteneur par rapport aux requêtes média

9. Conception Web responsive moderne

• Conception mobile d'abord
• Points de rupture (breakpoints) responsifs
• Typographie fluide
• Espaces 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 responsifs
• Réduction des requêtes média inutiles

10. Propriétés logiques et internationalisation

• Propriétés CSS logiques par rapport aux propriétés physiques
• margin-inline / margin-block
• padding-inline / padding-block
• inset-inline / inset-block
• Taille logique
• Modes d'écriture
• Mises en page de droite à gauche (RTL)
• Construction d'interfaces internationalement adaptables

11. Typographie moderne

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

12. Transformations, transitions et animations

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

13. Fonctionnalités UI CSS modernes

• Dialogues et éléments pop-up natifs CSS
• Stylage des états d'interface utilisateur interactifs
• :popover-open
• :modal
• :focus-visible
• :target
• Stylage des états de formulaire
• accent-color
• appearance
• field-sizing
• Contrôles de formulaire modernes
• Construction d'interactions accessibles uniquement en CSS

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
• Motifs pratiques de conception responsive

15. Pré-processeurs CSS

• Aperçu des pré-processeurs CSS
• LESS
• Variables et mixins
• Nesting des styles
• Fonctions et opérations
• LESS par rapport au CSS moderne natif
• Lorsqu'un pré-processeur est encore utile
• Migration des fonctionnalités des pré-processeurs vers le CSS natif

16. Considérations de conception et d'accessibilité

• Bonnes pratiques CSS modernes
• Stylage axé sur l'accessibilité
• États de focus clavier
• :focus-visible
• Mouvement réduit
• Considérations relatives au contraste et aux couleurs
• Texte et contenu responsifs
• Texte superposé aux images
• Composants responsifs accessibles
• Amélioration progressive

17. Performance et maintenabilité CSS

• Réduction de la complexité du CSS
• Éviter l'excès de spécificité
• Couches de cascade pour la maintenabilité
• Motifs réutilisables d'utilitaires et de composants
• Concepts de confinement CSS
• content-visibility
• Performance du rendu et de la mise en page
• Réduction des changements de mise en page (layout shifts)
• Organisation des grandes bases de code CSS
• Débogage du CSS avec les outils de développement des navigateurs modernes

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
• Nesting CSS
• Propriétés personnalisées
• Couches de cascade
• Sélecteurs modernes
• Typographie fluide
• Unités de viewport modernes
• Conception responsive
• Couleurs et dégradés modernes
• Animations et transitions
• Considérations d'accessibilité
• Bonnes pratiques de performance