Préparer un plan de migration

Une refonte CSS menée en une seule fois rend les régressions difficiles à localiser : si l’en-tête, les horaires et le contact changent simultanément, vous ne savez pas quel changement a provoqué un débordement ou une différence d’espacement. Vous allez convertir l’audit de la page de l’atelier en une série de modifications courtes, contrôlables et réversibles.

Dans la leçon précédente, vous avez cartographié les règles par zone et par responsabilité ; servez-vous de cette carte comme point de départ, sans recommencer l’inventaire. Le plan de migration ajoute trois décisions : dans quel ordre intervenir, quelle zone tester en premier et comment vérifier que le rendu reste acceptable.

Découper la migration en étapes vérifiables

Une étape de migration doit avoir un périmètre limité, un résultat attendu et un moyen de contrôle. Évitez une tâche vague comme « nettoyer le CSS de la page » : elle est trop large pour être validée et ne vous indique pas quoi annuler si un défaut apparaît. Préférez une action comme « isoler les règles de la zone horaires, puis vérifier son alignement à trois largeurs d’écran ».

1. Conservez une version de référence de la feuille actuelle et notez les pages, états ou largeurs concernés.
2. Choisissez une seule zone de la page pour la première modification.
3. Appliquez le changement prévu, puis contrôlez le rendu et les éléments voisins.
4. Consignez le résultat : validé, à corriger ou annulé, avec la cause observée.
5. Passez à la zone suivante seulement lorsque le résultat est compris et stable.

Par exemple, si la carte d’audit révèle que les horaires ont des règles localisées et peu de dépendances visibles, vous pouvez commencer par cette zone. En revanche, si les styles de l’en-tête affectent aussi les titres ou les liens ailleurs, reportez cette partie : une modification locale y présente un risque plus élevé. L’ordre doit donc tenir compte du rayon d’impact, pas seulement de la taille du bloc de code.

Choisir un composant pilote

Le composant pilote sert à éprouver votre méthode sur une portion réelle de la page avant de l’appliquer aux autres. Pour la page de l’atelier, le bloc de contact peut constituer un bon candidat s’il est visuellement circonscrit, représentatif des problèmes rencontrés et facile à vérifier. Évitez de choisir d’emblée la zone la plus complexe ou la plus partagée par tout le site : vous cumuleriez les risques au moment où votre procédure est encore à valider.

Comparer le rendu avant et après

Avant la modification, relevez le rendu de référence aux largeurs importantes pour le projet : une fenêtre étroite, une largeur intermédiaire et une fenêtre large. Gardez constants le contenu, le zoom et l’état de la page ; sinon, la comparaison risque de mélanger une variation de contenu avec un effet de CSS. Après le changement, reprenez les mêmes vues et comparez à la fois le bloc modifié et ses voisins.

Une différence n’est pas automatiquement une régression : elle peut être le résultat voulu, par exemple un texte qui s’enroule plus tôt pour éviter une largeur excessive. En revanche, un contenu coupé, un bouton inaccessible, un chevauchement ou une zone qui disparaît signale un défaut à traiter. Notez chaque écart et sa décision avant de poursuivre ; cette trace permet de distinguer un changement intentionnel d’un oubli.

Migration : bloc de contact
Référence : contact-avant, fenêtre étroite / intermédiaire / large
Modification : règles du bloc de contact uniquement
Contrôles : retour à la ligne, alignement, espacement, liens
Résultat : validé / à corriger / annulé
Écarts observés : aucun / description précise
Décision : poursuivre / corriger avant la suite

Cette fiche courte suffit pour rendre chaque étape explicite, y compris lorsque vous travaillez seul et reprenez la feuille plusieurs semaines plus tard. Si une comparaison révèle une régression, annulez ou corrigez uniquement la dernière étape plutôt que de revenir sur toute la migration. Une fois le pilote validé, appliquez la même démarche aux autres zones en adaptant les contrôles à leur rôle.

À retenir

• Divisez la refonte en étapes limitées, chacune assortie d’un contrôle et d’un résultat attendu.
• Choisissez un pilote représentatif dont les effets restent assez circonscrits.
• Comparez les mêmes contenus et les mêmes largeurs avant et après chaque changement.
• Consignez les écarts et leur décision ; ne poursuivez pas tant qu’une régression n’est pas comprise.

Vous pourrez ensuite structurer les règles de production en définissant des couches de cascade, sans modifier simultanément toutes les zones de la page.