Valider et nettoyer la livraison
Objectif : Supprimer les dernières règles inutilisées et consigner les contrôles effectués avant livraison de la page de l’atelier.
Une feuille de style peut sembler terminée tout en contenant encore des sélecteurs inutilisés, des déclarations devenues redondantes ou des règles qui ne s’appliquent qu’à un état rarement affiché. Les supprimer sans méthode peut toutefois casser une partie de la page que vous n’avez pas testée. Vous allez établir des preuves avant chaque suppression et laisser une trace des contrôles effectués.
Auditer sans confondre absence et inutilité
Commencez par enregistrer une version de référence : ouvrez index.html dans le navigateur, vérifiez les quatre zones — en-tête, horaires, conseils et contact — puis notez les largeurs testées. Dans les outils de développement, l’onglet de couverture CSS peut signaler des déclarations qui n’ont pas été utilisées pendant cette navigation. Ce signal est un indice, pas une décision automatique : un état interactif, une largeur différente ou une page non ouverte peut encore dépendre de la règle.
Pour chaque candidate, recherchez le sélecteur dans les deux fichiers du projet et vérifiez qu’il correspond à un élément présent dans le HTML livré. Consultez aussi les règles de la feuille qui partagent le même sélecteur ou la même propriété : une déclaration peut être inutilisée parce qu’elle est écrasée, sans que tout son bloc soit à supprimer. Ne retirez rien sur la seule base d’un pourcentage d’utilisation fourni par le navigateur.
Nettoyer par petits changements vérifiables
Traitez une règle à la fois. Relevez le sélecteur, la déclaration concernée et la preuve de son inutilité ; supprimez-la, rechargez la page et répétez le parcours de contrôle. Si un écart apparaît, annulez cette suppression avant d’examiner une autre règle. Cette séquence rend le changement réversible et permet de relier une régression à une modification précise.
| Contrôle | Vérification attendue |
|---|---|
| Sélecteurs | Chaque sélecteur conservé correspond à un besoin identifié dans la page. |
| Couverture | Les zones et largeurs prévues ont été parcourues ; les absences de couverture ont été examinées. |
| Rendu | En-tête, horaires, conseils et contact restent lisibles, sans débordement visible. |
| Livraison | Les fichiers livrés sont index.html et style.css ; les règles et commentaires restants sont utiles. |
Le code ci-dessous donne un état de référence complet du projet à contrôler. Il conserve les classes du contrat et regroupe les déclarations par couche. Les requêtes de conteneur présentées ici adaptent la liste des conseils à la largeur disponible dans son propre bloc ; votre résultat doit être comparé au comportement de votre version avant toute fusion.
Fichiers à vérifier
<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Atelier de jardinage</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="atelier-page">
<header class="atelier-header">
<p class="atelier-header__sur-titre">Atelier pratique</p>
<h1 class="atelier-header__titre">Jardiner au fil des saisons</h1>
<p class="atelier-header__intro">Apprenez des gestes simples pour cultiver votre jardin.</p>
</header>
<main class="atelier-layout">
<section class="atelier-hours" aria-labelledby="horaires-titre">
<h2 class="atelier-hours__titre" id="horaires-titre">Horaires</h2>
<ul class="atelier-hours__liste">
<li>Lundi au vendredi : 9 h à 17 h</li>
<li>Samedi : 10 h à 14 h</li>
</ul>
<p class="atelier-hours__note">Inscription recommandée avant votre venue.</p>
</section>
<section class="atelier-tips" aria-labelledby="conseils-titre">
<h2 class="atelier-tips__titre" id="conseils-titre">Conseils pratiques</h2>
<ul class="atelier-tips__liste">
<li class="atelier-tips__item">Apportez des gants adaptés.</li>
<li class="atelier-tips__item">Prévoyez une gourde et des chaussures fermées.</li>
<li class="atelier-tips__item">Du matériel est prêté sur place.</li>
</ul>
</section>
<address class="atelier-contact atelier-contact--accent">
<h2 class="atelier-contact__titre">Nous contacter</h2>
<p class="atelier-contact__texte">Une question sur les inscriptions ?</p>
<a class="atelier-contact__lien" href="mailto:[email protected]">[email protected]</a>
</address>
</main>
</div>
</body>
</html>@layer base, layout, components;
:root {
--color-ink: #23352b;
--color-paper: #f7f4e9;
--color-leaf: #39734b;
--space-section: 3rem;
--texte-courant: clamp(1rem, 0.95rem + 0.35vw, 1.2rem);
--titre-principal: clamp(2rem, 1.4rem + 3vw, 3.5rem);
--espace-moyen: 1.5rem;
--content-width: 70rem;
}
@layer base {
* {
box-sizing: border-box;
}
body {
margin: 0;
color: var(--color-ink);
background: var(--color-paper);
font-family: system-ui, sans-serif;
font-size: var(--texte-courant);
line-height: 1.6;
}
h1,
h2,
p {
margin-top: 0;
}
}
@layer layout {
.atelier-page {
width: min(100% - 2 * var(--espace-moyen), var(--content-width));
margin-inline: auto;
padding-block: var(--espace-section);
}
.atelier-layout {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: var(--espace-moyen);
}
@media (min-width: 48rem) {
.atelier-layout {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.atelier-contact {
grid-column: 1 / -1;
}
}
}
@layer components {
.atelier-header {
margin-bottom: var(--space-section);
}
.atelier-header__sur-titre {
margin-bottom: var(--espace-moyen);
color: var(--color-leaf);
font-weight: 700;
}
.atelier-header__titre {
max-width: 18ch;
margin-bottom: 0.5rem;
font-size: var(--titre-principal);
line-height: 1.1;
}
.atelier-header__intro {
max-width: 60ch;
margin-bottom: 0;
}
.atelier-hours,
.atelier-tips,
.atelier-contact {
padding: var(--espace-moyen);
border: 1px solid var(--color-leaf);
border-radius: 0.75rem;
background: var(--color-paper);
}
.atelier-hours__titre,
.atelier-tips__titre,
.atelier-contact__titre {
margin-bottom: 0.75rem;
font-size: 1.25em;
}
.atelier-hours__liste,
.atelier-tips__liste {
margin: 0;
padding-left: 1.25em;
}
.atelier-hours__note {
margin: var(--espace-moyen) 0 0;
}
.atelier-tips {
container-name: atelier-tips;
container-type: inline-size;
}
.atelier-tips__item + .atelier-tips__item {
margin-top: 0.5rem;
}
@container atelier-tips (min-width: 32rem) {
.atelier-tips__liste {
columns: 2;
column-gap: var(--espace-moyen);
}
.atelier-tips__item {
break-inside: avoid;
}
}
.atelier-contact--accent {
color: var(--color-paper);
background: var(--color-leaf);
}
.atelier-contact__texte {
margin-bottom: 0.5rem;
}
.atelier-contact__lien {
color: inherit;
overflow-wrap: anywhere;
}
}Aperçu appliqué au document HTML de cette leçon : la règle CSS est injectée dans la page pour voir son effet réel.
Consigner les vérifications
Dans le compte rendu de livraison, notez la date, les fichiers contrôlés, les largeurs testées et les suppressions effectuées. Ajoutez les limites de l’audit, par exemple un état qui n’a pas pu être vérifié, ainsi que le résultat de la comparaison visuelle. Cette note n’a pas besoin d’être longue : elle doit permettre à une autre personne de comprendre ce qui a été testé et ce qui reste à confirmer.
À retenir
- Utilisez la couverture CSS pour repérer des candidates, jamais pour décider seule qu’une règle est morte.
- Supprimez une règle à la fois et rejouez les contrôles après chaque changement.
- Comparez les zones de la page à une référence, à plusieurs largeurs adaptées.
- Consignez les fichiers, les contrôles, les suppressions et les limites restantes.
La page est prête lorsque le rendu vérifié correspond à la référence et que les limites connues sont consignées dans le compte rendu de livraison.