Cette formation avancée s’adresse aux développeurs Web qui maîtrisent déjà les bases de CSS et souhaitent aller plus loin dans la mise en page et l’interactivité visuelle. Vous approfondirez les layouts complexes avec Grid, Subgrid et Flexbox, les fonctionnalités modernes du CSS — custom properties, :has(), container queries, cascade layers, oklch — les animations incluant View Transitions, et la stratégie Mobile First. Vous maîtriserez Sass dans sa version moderne avec @use et @forward, ainsi que l’outillage actuel : PostCSS, Lightning CSS, Stylelint, Tailwind.

Public visé

Développeurs, concepteurs Web, webmasters.

Prérequis

Avoir suivi cette formation, ou en maîtriser les thèmes abordés :

CSS - Initiation

Objectifs pédagogiques

À l’issue de cette formation, vous serez capable de :

Construire des layouts avancés avec Flexbox, Grid et Subgrid
Utiliser les fonctionnalités CSS modernes : custom properties, nesting, cascade layers, container queries, :has()
Appliquer une stratégie responsive et accessible avec mobile first, prefers-* et logical properties
Maîtriser la couleur et la typographie modernes avec oklch, color-mix et clamp
Mettre en œuvre des animations et transitions performantes, incluant View Transitions
Structurer une feuille de style avec Sass moderne, et Less en complément
Optimiser les performances CSS avec contain, content-visibility et will-change
Mettre en place un outillage moderne : PostCSS / Lightning CSS, Stylelint, DevTools

Programme

Jour 1 - Matin

Rappels et CSS moderne

Rappels

comprendre la cascade — spécificité, héritage, ordre des règles
maîtriser les sélecteurs et leurs combinaisons
structurer le modèle de boîte avec box-sizing
choisir les unités selon le contexte — absolues, relatives, ou viewport avec dvh et svh

Travaux pratiques :

Auditer une feuille de style existante et résoudre des conflits de cascade

Sélecteurs modernes

cibler un élément selon ses descendants avec :has(), en Baseline 2023
regrouper des sélecteurs et contrôler la spécificité avec :is() et :where()
traiter correctement le focus — :focus-visible, :focus-within

Travaux pratiques :

Adapter une navigation pour qu’un menu réagisse à l’état d’un descendant via :has()

Variables, calculs et couleur moderne

définir des variables natives avec custom properties et fallback
distinguer custom properties et variables Sass — runtime vs build-time
composer des valeurs fluides avec clamp() et ses voisines
exploiter la couleur perceptuelle — oklch(), oklab()
mélanger des couleurs en CSS avec color-mix()

Travaux pratiques :

Construire un système de design en custom properties avec une palette dérivée par color-mix()

Jour 1 - Après-midi

Layouts modernes

Flexbox

aligner et distribuer en une dimension
gérer l’espacement avec gap et le retour à la ligne avec flex-wrap
résoudre des patterns courants — centrage, navigation, holy grail

Travaux pratiques :

Reproduire un header complexe avec navigation alignée et espacement maîtrisé

Grid et Subgrid

composer une grille
créer des grilles fluides avec minmax(), auto-fit et auto-fill
aligner des sous-éléments sur la grille parente avec Subgrid, en Baseline 2024

Travaux pratiques :

Réaliser une mise en page magazine combinant Grid et Subgrid

Cascade Layers

structurer la cascade par couches avec @layer, en Baseline 2022
organiser reset, framework, composants et utilities sans !important

Travaux pratiques :

Refactorer une feuille existante en couches @layer ordonnées

Jour 2 - Matin

Stratégie responsive moderne

Mobile First

adopter une approche progressive — base mobile, surcharges au-dessus
éviter les pièges classiques de duplication et de surcharges fragiles

Travaux pratiques :

Convertir un site desktop-first en mobile-first

Media Queries modernes

utiliser la syntaxe range — @media (width >= 768px)
détecter les préférences utilisateur — prefers-color-scheme, prefers-reduced-motion, prefers-contrast
intégrer le thème système — color-scheme, accent-color

Travaux pratiques :

Implémenter un dark mode automatique aligné sur les préférences système

Container Queries

adapter un composant à son conteneur plutôt qu’au viewport avec @container, en Baseline 2023
déclarer un conteneur avec container-type et container-name

Travaux pratiques :

Rendre une carte produit adaptive selon la largeur de son emplacement

Logical Properties

abstraire la direction d’écriture avec les logical properties
préparer la i18n et le RTL

Travaux pratiques :

Adapter un layout existant pour fonctionner en LTR et en RTL

Jour 2 - Après-midi

Images, typographie et accessibilité

Images responsives

servir l’image adaptée à l’écran — srcset, sizes, <picture>
choisir un format moderne — WebP, AVIF
déclarer plusieurs sources en CSS avec image-set()
intégrer SVG inline et en background

Travaux pratiques :

Optimiser les images d’une page existante avec srcset et formats modernes

Typographie fluide

dimensionner le texte selon le viewport avec clamp()
exploiter les variable fonts via font-variation-settings
soigner les coupures de ligne — text-wrap: balance, pretty

Travaux pratiques :

Appliquer une typographie fluide à un article long avec hiérarchie cohérente

Accessibilité par CSS

rendre le focus visible et accessible avec :focus-visible
respecter les préférences utilisateur — prefers-reduced-motion, prefers-contrast
supporter le mode contraste élevé avec forced-colors
vérifier les contrastes WCAG

Travaux pratiques :

Auditer et corriger l’accessibilité visuelle d’une page

Jour 3 - Matin

Animations et performance

Transitions et animations

animer les changements d’état avec timing et easing
définir des animations avec @keyframes et les piloter via animation-*
composer des transformations 2D et 3D avec les propriétés individuelles modernes

Travaux pratiques :

Créer une animation de chargement réutilisable et enrichir les transitions d’un menu

Transitions de vue et scroll-driven

transitionner entre états ou entre pages avec View Transitions API
piloter une animation par la position de scroll avec scroll-timeline

Travaux pratiques :

Ajouter une transition de vue lors d’un changement de catégorie et une barre de progression de lecture

Performance CSS

isoler le rendu d’un sous-arbre avec contain et content-visibility
utiliser will-change sans abus
distinguer reflow, repaint et compositing
mesurer dans les DevTools — onglets Performance, Coverage

Travaux pratiques :

Profiler une page lourde et appliquer les optimisations CSS appropriées

Jour 3 - Après-midi

Préprocesseurs et outillage

Sass moderne

structurer un projet — architectures 7-1 ou ITCSS
décider quoi mettre dans Sass vs custom properties — build-time vs runtime
organiser le code avec règles imbriquées, mixins et fonctions
migrer vers les modules @use et @forward, @import étant déprécié
exploiter maps, listes, boucles et conditions

Travaux pratiques :

Refondre un thème existant en Sass moderne avec @use

Less en complément

situer Less aujourd’hui — maintenance et projets historiques
distinguer les principales différences avec Sass

Travaux pratiques :

Convertir un fichier Less existant vers Sass moderne

Outillage CSS moderne

intégrer une chaîne de build — PostCSS et plugins comme autoprefixer et postcss-preset-env, ou Lightning CSS
linter automatiquement avec Stylelint et l’intégrer en CI
choisir un framework utility-first — Tailwind CSS, UnoCSS
exploiter les DevTools CSS — inspecteurs Grid et Flexbox

Travaux pratiques :

Projet final : thème complet en Sass moderne, custom properties, container queries et @layer, validé par Stylelint et compilé via PostCSS

Modalités d’évaluation des acquis

En cours de formation, par des études de cas ou des travaux pratiques. En fin de formation, par un questionnaire d’auto-évaluation.

Voir aussi

Vous serez peut-être intéressés par les formations suivantes :

Formation DEV-WEB-210 — CSS - Avancé. Domaine : Développement. Niveau : Intermédiaire. Durée : 3 jours (21 heures). Mots-clés : css, sass, less, responsive, flexbox, grid, animations, développement, avancé. Cylian Formation, Dijon.