Formation CSS3 avancé

1. Le CSS moderne et l'évolution du CSS

• De CSS3 au CSS moderne
• Standards CSS actuels et implémentation par les navigateurs
• Compréhension de la spécification CSS et de la prise en charge par les navigateurs
• Amélioration progressive
• Détection de 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
• Meilleures pratiques pour les 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ématisation moderne et systèmes de couleurs

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

• Variables CSS / propriétés personnalisées
• Variables et valeurs de repli
• 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. Imbriquation CSS et gestion de la cascade

• Imbriquation CSS native
• Syntaxe d'imbriquation et meilleures pratiques
• Imbriquation CSS vs préprocesseurs
• Cascade et héritage
• Couches de cascade avec @layer
• Gestion du CSS tiers
• @scope et concepts de stylisation scopée
• 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é
• Dimensionnement flexible
• gap
• Retours à la ligne et ordonnancement
• Mises en page Flexbox imbriquées
• Modèles courants de Flexbox
• Composants responsifs utilisant Flexbox

7. CSS Grid avancé

• Rappel des fondamentaux de Grid
• Grilles explicites et implicites
• Dimensionnement avancé 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
• CSS Subgrid
• Utilisation de Subgrid pour des mises en page de composants alignées

8. Requêtes de conteneur et responsivité par composants

• Pourquoi les requêtes médias de la fenêtre d'affichage ne suffisent pas toujours
• Concepts des requêtes de conteneur
• container-type
• @container
• Unités de longueur des requêtes de conteneur
• Conception responsive pilotée par les composants
• Requêtes de style des requêtes de conteneur
• Conception de composants responsifs réutilisables
• Requêtes de conteneur vs requêtes médias

9. Conception responsive moderne

• Conception mobile d'abord
• Points de rupture responsifs
• Typographie fluide
• Espacement fluide
• clamp()
• Unités de fenêtre d'affichage modernes :
  • svh
  • lvh
  • dvh
  • svw
  • lvw
  • dvw
• Considérations sur la fenêtre d'affichage dynamique
• Unités relatives au conteneur
• Images et médias responsifs
• Réduction des requêtes médias 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 internationalement adaptatives

11. Typographie moderne

• Typographie responsive
• Polices variables
• Considérations sur le chargement des polices
• font-size-adjust
• Échelles de typographie fluides
• Casse des mots et débordement du texte
• text-wrap: balance
• text-wrap: pretty
• hyphens
• Meilleures pratiques en typographie moderne

12. Transformations, transitions et animations

• Transformations 2D et 3D
• Transitions
• Animations par images clés
• Fonctions de minuterie
• Composition d'animations
• Performance des transformations
• Animations pilotées par le défilement
• animation-timeline
• Concepts de View-timeline
• Accessibilité des animations
• prefers-reduced-motion
• Considérations de performance

13. Fonctions d'interface utilisateur CSS modernes

• Boîtes de dialogue et bulles natives CSS
• Stylisation des états d'interface utilisateur interactifs
• :popover-open
• :modal
• :focus-visible
• :target
• Stylisation 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
• Modèles de conception responsive pratiques

15. Préprocesseurs CSS

• Aperçu des préprocesseurs CSS
• LESS
• Variables et mélanges (mixins)
• Imbriquation des styles
• Fonctions et opérations
• LESS vs CSS moderne natif
• Quand un préprocesseur est-il encore utile ?
• Migration des fonctionnalités des préprocesseurs vers le CSS natif

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

• Meilleures pratiques CSS modernes
• Stylisation centrée sur l'accessibilité
• États de focus du clavier
• :focus-visible
• Réduction des animations
• Contrastes et considérations sur les couleurs
• Texte et contenu responsifs
• Texte sur images
• Composants responsifs accessibles
• Amélioration progressive

17. Performance et maintenabilité du CSS

• Réduction de la complexité du CSS
• Éviter la spécificité inutile
• Couches de cascade pour la maintenabilité
• Modèles réutilisables de 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 de grandes bases de code CSS
• Débogage CSS avec les outils de développement 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
• Imbriquation CSS
• Propriétés personnalisées
• Couches de cascade
• Sélecteurs modernes
• Typographie fluide
• Unités de fenêtre d'affichage modernes
• Conception responsive
• Couleurs et dégradés modernes
• Animations et transitions
• Considérations d'accessibilité
• Meilleures pratiques de performance