Inspecter la mise en page dans le navigateur

Une navigation peut sembler correctement répartie sur votre écran tout en se décalant sur un autre format. Une carte peut aussi dépasser de sa colonne sans que la cause soit évidente dans la feuille de styles. Vous allez apprendre à isoler la règle responsable avec les outils intégrés au navigateur, puis à vérifier votre correction à plusieurs largeurs.

Ouvrir l’inspecteur et cibler un élément

Ouvrez la page de l’atelier dans votre navigateur, puis affichez les outils de développement avec le menu contextuel « Inspecter ». Dans l’onglet des éléments, choisissez l’outil de sélection et cliquez directement sur l’élément qui paraît mal placé : par exemple le conteneur de navigation, une carte de conseil ou la zone des horaires. Le panneau des styles présente les déclarations associées à cet élément et permet de repérer le fichier et la ligne où elles sont définies.

Une déclaration barrée n’est pas celle qui s’applique : une autre règle la remplace, souvent parce qu’elle est plus spécifique ou apparaît plus tard. Le panneau des styles calculés affiche les valeurs effectivement appliquées après résolution des règles CSS. Comparez ces valeurs avec votre intention, puis remontez à la déclaration active plutôt que de modifier plusieurs sélecteurs au hasard.

Visualiser Flexbox et Grid

Quand vous sélectionnez un conteneur Flexbox ou Grid, les navigateurs modernes proposent un contrôle pour afficher un overlay, c’est-à-dire une surimpression temporaire des repères de mise en page. Pour Flexbox, l’overlay rend visibles le conteneur et ses éléments ; pour Grid, il montre les pistes et les limites des cellules. Activez-le depuis l’icône ou le panneau de mise en page associé au conteneur : le nom et l’emplacement du contrôle varient légèrement selon le navigateur.

Supposons que le bloc de contact semble occuper la mauvaise colonne. Sélectionnez son élément HTML et contrôlez sa règle de placement, puis activez l’overlay de la grille parente. Vous voyez alors si la grille possède bien les pistes attendues et si le bloc se trouve dans la zone prévue. Les zones nommées et leur association aux éléments ont été étudiées dans la leçon « Placer les zones de la page » ; ici, l’overlay sert à confronter cette configuration à son rendu réel.

Reproduire le problème à une autre largeur

Activez le mode appareil dans les outils de développement pour simuler un viewport plus étroit, c’est-à-dire la zone visible de la page dans le navigateur. Vous pouvez choisir un appareil prédéfini ou saisir une largeur personnalisée et redimensionner la zone de prévisualisation. Vérifiez la page à la largeur où le défaut apparaît : une navigation qui passe à la ligne ou une grille qui devient trop serrée peut révéler une règle activée uniquement par une media query.

<!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>
    <header class="entete">
        <a class="logo" href="#accueil">Atelier jardin</a>
        <nav class="navigation" aria-label="Navigation principale">
            <a href="#horaires">Horaires</a>
            <a href="#conseils">Conseils</a>
            <a href="#contact">Contact</a>
        </nav>
    </header>
    <main class="page" id="accueil">
        <section class="horaires" id="horaires">
            <h1>Atelier de jardinage</h1>
            <p>Ateliers ouverts le mercredi et le samedi.</p>
        </section>
        <section class="conseils" id="conseils" aria-label="Conseils pratiques">
            <article class="carte"><h2>Préparer le sol</h2><p>Choisissez un emplacement adapté aux plantes.</p></article>
            <article class="carte"><h2>Arroser avec soin</h2><p>Arrosez au pied et vérifiez l’humidité du sol.</p></article>
        </section>
        <aside class="contact" id="contact"><h2>Contact</h2><p>Écrivez à [email protected]</p></aside>
    </main>
</body>
</html>

:root {
    --couleur-fond: #f3f5ed;
    --couleur-texte: #243324;
    --couleur-carte: #ffffff;
    --espace: 1rem;
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    color: var(--couleur-texte);
    background: var(--couleur-fond);
    font-family: sans-serif;
}

.entete {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--espace);
    padding: var(--espace);
}

.navigation {
    display: flex;
    gap: var(--espace);
}

.page {
    display: grid;
    grid-template-columns: 2fr 1fr;
    grid-template-areas: "horaires contact" "conseils contact";
    gap: var(--espace);
    padding: var(--espace);
}

.horaires { grid-area: horaires; }
.conseils { grid-area: conseils; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--espace); }
.contact { grid-area: contact; }
.carte, .contact { padding: var(--espace); background: var(--couleur-carte); }

@media (max-width: 600px) {
    .entete { align-items: flex-start; flex-direction: column; }
    .page { grid-template-columns: 1fr; grid-template-areas: "horaires" "conseils" "contact"; }
    .conseils { grid-template-columns: 1fr; }
}

Chargez ces deux fichiers, puis inspectez la navigation et le conteneur « page ». À moins de 600 pixels, la règle de la media query réoriente l’en-tête et redéfinit la grille ; dans l’inspecteur, vous pouvez voir la déclaration active et désactiver temporairement une règle en cliquant sur sa case. Cette modification temporaire n’altère pas style.css : elle sert à tester rapidement une hypothèse avant de reporter la correction dans le fichier.

Procéder par hypothèses

Commencez par décrire précisément le défaut : « le lien Contact passe sous le logo » est plus utile que « la navigation est cassée ». Sélectionnez ensuite l’élément concerné, identifiez la règle active et modifiez une seule valeur dans l’inspecteur. Si le résultat confirme votre hypothèse, appliquez la correction dans style.css, en respectant les conventions du projet ; sinon, annulez la modification et testez une autre cause.

• Inspectez l’élément qui manifeste le défaut, puis consultez ses règles actives et ses styles calculés.
• Utilisez les overlays Flexbox et Grid pour visualiser les conteneurs, les éléments et les pistes.
• Reproduisez le problème dans le mode appareil en réglant la largeur du viewport.
• Testez une hypothèse à la fois dans l’inspecteur, puis reportez seulement la correction confirmée dans style.css.

Dans la prochaine leçon, vous construirez le squelette des zones de contenu de la page de l’atelier en vous appuyant sur ces outils pour vérifier leur placement.