Boîtes, conteneurs et empilements

• Boîtes et box-sizing
• Notion de Bloc Englobant
• Notion de Contexte de formatage
• Notion de Contexte d'empilement (et z-index)

Unités et Sélecteurs CSS modernes

• rem, le “pixel accessible”
• les unités de Viewport (vw, vh, vmin, vmax)
• les tailles intrinsèques (min-content, max-content, fit-content)
• les sélecteurs historiques (class, id, attributs, descendance, enfance, frères)
• les sélecteurs modernes (:not, where, :has)
• les sélecteurs de formulaires : :enabled, :disabled, :valid, :invalid, :checked

Le CSS moderne (CSS4 ?)

• Les "variables" en CSS : custom properties
• Réinitialiser une propriété : inherit, initial, unset
• Positionner en adhérence avec position: sticky
• Un filtre derrière un élément avec backdrop-filter
• Le support de fonctionnalités avec @supports
• Conserver le ratio avec aspect-ratio
• S'adapter au thème (light / dark) avec prefers-color-scheme
• Les media queries d'interaction @media (pointer)
• Trois valeurs à la fois avec clamp()
• Gérer la spécificité avec @layer()
• Alléger les imbrications avec display: contents
• Plein d'autres fonctionnalités CSS utilisables en production aujourd'hui

Produire des CSS maintenables

• Pourquoi CSS est-il si compliqué à maintenir ?
• Historique des Méthodologies (BEM, OOCSS, SMACSS, Atomic CSS) et des Frameworks (Bootstrap, Tailwind)
• La petite dernière : CubeCSS
• Bonnes pratiques générales : conventions de nommage, performance, réutilisabilité

État des lieux du Web mobile

• Périphériques, OS, navigateurs, moteurs, langages
• Le marché mobile et ses statistiques

Un contenu fluide

• Gérer les débordements de contenus (césures et autres coupures)
• Gérer les débordements de médias (images, vidéos, flash, etc.)
• Bonus : points de suspension, cas des liens, cas des éléments préformatés

Les tailles des devices mobiles

• Des vrais et des faux pixels
• Taille de fenêtre virtuelle : Viewport
• Taille d'écran : screen-width
• Taille déclarée : device-width
• Le pixel-ratio

Les images responsive

• "Retina" ?
• La base : les images fluides
• Images de décoration (cover, image-set())
• Images de contenu (srcset, <picture>)

Transformations CSS

• rotate(), la rotation d'éléments
• scale(), le zoom / dézoom
• translate(), la translation
• skewX(), skewY(), la déformation
• transform-origin, le point d'origine

Les transitions et animations

• Propriétés : property, duration, delay, timing-function
• Accélération
• Propriétés supportées
• Animer avec keyframes
• Éviter les animations trop gourmandes en ressources ?

Optimisation des webfonts

• anatomie de @font-face
• .woff, .woff2 et formats compressés
• Google Fonts
• font-display pour optimiser l'affichage
• fontes variables
• indicateurs de pré-chargement de ressources

Optimisation des images pour le Web

• vectoriel vs bitmap
• gif, jpeg et png
• webp
• avif
• jpeg xl
• <picture> à la rescousse
• quelle stratégie adopter ?

TP Intégration de maquette

De l'analyse de la maquette graphique à l'intégration HTML/CSS en respectant à la fois : Bonnes Pratiques, Responsive, Mobile First et Dark Mode.

On en profitera pour échanger et expérimenter sur tous les thèmes utiles : artchitecture des fichiers, notions de wireframes / maquettes / UIKit / Styleguide / Design System, les variables CSS, découpage (layout et composants), positionnements Flexbox et Grid Layout, etc.

Préprocesseur Sass

Immersion au sein du préprocesseur le plus courant en CSS : l'utilité, le fonctionnement, les fonctionnalités principales (partiels, variables, imbrications).

Et pour les plus chevronnés, les notions de Sélecteur de parent «&», Fonctions intégrées, Extend, Placeholder, Mixin, Interpolation de variables, Boucles, Conditions, Listes, Maps.