Formation CSS avancé et Responsive Design avec Less et Sass

Jour 1 - Matin

Rappel sur les CSS

• Règles de priorités, de cascade et d'héritage
• Sélecteurs : simples, composés, pseudo-classes, pseudo-éléments
• Propriétés des boîtes : box-sizing, position...
• Unités : absolue, relatives, viewports unit
• Couleurs et filtres

Sélecteurs et features modernes

• Le sélecteur parent
• Le regroupement et la spécificité
• Les pseudo-classes d'état
• Sélecteurs d'attribut avancés

Variables et calculs

• Les variables CSS natives
• La typographie et les espacements fluides
• Différence entre custom properties et variables Sass : portée, runtime
• Taille

Couleur moderne

• Les limites de RGB et HSL
• Les couleurs perceptuelles
• Mélanges et variantes de couleur
• Les filtres et les fonctions de couleur

Exemples de travaux pratiques (à titre indicatif)

• Développer une page fidèle à un modèle fourni
• Refondre une feuille de style en custom properties et clamp()

Jour 1 - Après-midi

Les modes de positionnement

• Le flux normal, position relative, absolute, fixed, sticky
• Float : usage limité au wrap d'images

Flexbox en détail

• Les axes, l'alignement (wrap, gap) et aspect-ratio
• Les patterns : centrage, navigation

CSS Grid et Subgrid

• Grid template, areas, lignes, gap
• Les Subgrid
• Les patterns : magazine, layout

Cascade Layers

• @layer : organisation de la cascade
• Cas d'usage : reset, framework, composants

Exemple de travaux pratiques (à titre indicatif)

• Construire un layout responsive complet avec Grid, Subgrid et @layer

Jour 2 - Matin

Responsive Design

• Adaptation des contenus, du positionnement et de la navigation
• La stratégie du Mobile First
• Les pièges classiques

Media Queries modernes

• Range syntax et abandon du type de media
• Les features : prefers-color-scheme, prefers-reduced-motion, prefers-contrast
• color-scheme et accent-color

Container Queries

• Adaptation au conteneur, pas au viewport
• Cas d'usage : les composants réutilisables

Logical Properties

• Les propriétés inline-size / block-size, margin-inline, padding-block
• Préparation à l'internationalisation et au RTL

Exemples de travaux pratiques (à titre indicatif)

• Développer une page à l'aide de Grid et Flexbox
• Concevoir un composant adaptatif via container queries et logical properties

Jour 2 - Après-midi

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

Exemple de travaux pratiques (à titre indicatif)

• 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 : font-variation-settings, font-display
• Soigner les coupures de ligne : text-wrap: balance, pretty

Exemple de travaux pratiques (à titre indicatif)

• 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

Exemple de travaux pratiques (à titre indicatif)

• Auditer et corriger l'accessibilité visuelle d'une page

Jour 3 - Matin

Transitions et animations

• Animer les changements d'état : propriétés animables, timing, easing
• Définir des animations avec @keyframes et les piloter via animation-*
• Composer des transformations 2D et 3D : propriétés individuelles translate, rotate, scale

Exemple de travaux pratiques (à titre indicatif)

• 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 : view-transition-name
• Piloter une animation par la position de scroll : animation-timeline, scroll-timeline

Exemple de travaux pratiques (à titre indicatif)

• 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 : contain, content-visibility
• Utiliser will-change sans abus
• Distinguer reflow, repaint et compositing
• Mesurer dans les DevTools : onglets Layers, Performance, Coverage

Jour 3 - Après-midi

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 : règles imbriquées, mixins, fonctions
• Migrer vers les modules : @use et @forward (@import déprécié)
• Exploiter maps, listes, boucles et conditions

Exemple de travaux pratiques (à titre indicatif)

• 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

Outillage CSS moderne

• Intégrer une chaîne de build : PostCSS et plugins (autoprefixer, postcss-preset-env), Lightning CSS
• Linter automatiquement avec Stylelint et l'intégrer en CI
• Choisir un framework utility-first : Tailwind CSS, UnoCSS - principe et cas d'usage
• Exploiter les DevTools CSS : inspecteurs Grid et Flexbox, computed styles, animations