Cours CSS / vérifier le design adaptatif : largeur, zoom et clavier

Le CSS adaptatif doit rester utilisable à différentes largeurs de fenêtre, niveaux de zoom et conditions d'entrée. Vérifiez le contenu tronqué, le défilement inattendu de la page, les contrôles cachés et la focus clavier invisible plutôt que de vous fier uniquement à un aperçu unique de taille de téléphone.

Préparez une page pour les vérifications adaptatives

Les dimensions fluides, la requête média et le ratio d'image appris dans la leçon précédente sont rassemblés sur une seule page. Si vous enregistrez le code suivant sous responsive-check.html, vous pouvez voir les menus, cartes, images, longues chaînes et formulaires de saisie ensemble. L'image est contenue dans le fichier et aucune bibliothèque ou serveur séparé n'est nécessaire.

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>responsive-check.html</title>
<style>
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; font: 1rem/1.6 sans-serif; color: #243447; }
h1, h2, p { margin-top: 0; } a { color: #145f8f; }
a:focus-visible, button:focus-visible, input:focus-visible { outline: 3px solid #ac4100; outline-offset: 3px; }
.page { width: min(100%, 64rem); margin-inline: auto; padding: 1rem; }
.menu { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1rem; }
.menu a { display: block; padding: .65rem 1rem; background: #e8f3fa; }
.cards { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; }
.card { min-width: 0; padding: 1rem; border: 1px solid #789; overflow-wrap: anywhere; }
.card h2 { font-size: 1.25rem; } .card img { display: block; max-width: 100%; height: auto; margin-bottom: 1rem; }
.form { width: min(100%, 28rem); margin-top: 2rem; }
label { display: block; font-weight: bold; }
input { width: 100%; min-width: 0; padding: .65rem; font: inherit; }
button { max-width: 100%; padding: .65rem 1rem; font: inherit; white-space: normal; overflow-wrap: anywhere; }
@media (min-width: 42rem) { .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
</style>
</head>
<body>
<main class="page">
<h1>Check the same page under different conditions</h1>
<nav class="menu" aria-label="Lab Menu"><a href="#cards">Card description</a><a href="#request">Enter your question</a><a href="#result">Record check results</a></nav>
<section id="cards" class="cards">
<article class="card"><img src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22400%22%20height%3D%22300%22%20viewBox%3D%220%200%20400%20300%22%3E%3Crect%20width%3D%22400%22%20height%3D%22300%22%20fill%3D%22%23287699%22%2F%3E%3Crect%20width%3D%22400%22%20height%3D%2235%22%20fill%3D%22%23205c32%22%2F%3E%3Crect%20y%3D%22265%22%20width%3D%22400%22%20height%3D%2235%22%20fill%3D%22%239e3131%22%2F%3E%3Ccircle%20cx%3D%22200%22%20cy%3D%22150%22%20r%3D%2270%22%20fill%3D%22%23f6ae4c%22%2F%3E%3Crect%20x%3D%2212%22%20y%3D%22120%22%20width%3D%2230%22%20height%3D%2260%22%20fill%3D%22white%22%2F%3E%3Crect%20x%3D%22358%22%20y%3D%22120%22%20width%3D%2230%22%20height%3D%2260%22%20fill%3D%22white%22%2F%3E%3C%2Fsvg%3E" width="400" height="300" alt="Practice illustration showing both the upper and lower bands and the center circle"><h2>Long descriptions can be read to the end if there is no fixed height.</h2><p>Zooming may reduce how much text fits on each line. The description and link below the image must stay visible even when the same content occupies more lines.</p><a href="#result">First card notes</a></article>
<article class="card"><h2>Card with a long identifier</h2><p class="token">REFERENCE_ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789</p><p>Long strings are wrapped without deleting the content itself.</p><a href="#result">Second card notes</a></article>
</section>
<form id="request" class="form" action="#request" method="get"><h2>Enter your question</h2><label for="email">Email</label><p id="help">Use test@example.com instead of a real address to try the input styling. This example has no server that stores information.</p><input id="email" name="email" type="email" aria-describedby="help" required><p><button type="submit">Check input format</button></p></form>
<section id="result"><h2>Check results</h2><p>Record the viewport width, zoom level, changed rules, and results in a separate note.</p></section>
</main>
</body>
</html>

Cette page a été initialement créée pour ne pas avoir de débordement horizontal. Dans les exercices suivants, nous identifierons la cause en ajoutant et en supprimant le CSS qui crée l'erreur un par un. Si vous copiez le fichier original et le laissez sous responsive-check-original.html, il est facile de revenir en arrière si vous modifiez diverses propriétés par erreur. L'envoi du formulaire est un exemple qui n'est pas envoyé à un serveur de stockage et utilise l'adresse de test suggérée au lieu d'informations personnelles réelles.

Parcourir les largeurs et tester les points de rupture

Dans Edge, ouvrez les outils de développement, activez l'émulation d'appareil et saisissez une largeur en mode Réactif. Les raccourcis Windows par défaut sont F12 ou Ctrl+Maj+I pour les outils de développement et Ctrl+Maj+M pour l'émulation d'appareil. Les étiquettes et positions de la barre d'outils peuvent varier selon la version ; consultez le guide d'émulation d'appareil de Microsoft Edge. Comparez les largeurs juste en dessous et au-dessus de chaque condition lors de l'utilisation des media queries et des points de rupture adaptés au contenu.

1. À 320px et 390px, vérifiez si le menu s'étend sur plusieurs lignes et si l'image et la zone de saisie s'adaptent au texte. Faites défiler jusqu'en bas et recherchez les tronquages de texte et le défilement horizontal sur toute la page.
2. Augmentez lentement la largeur et vérifiez les zones où les cartes sont trop étroites ou s'il y a de l'espace inutile entre les menus. Vous ne vous contentez pas de choisir quelques appareils.
3. Cet exemple change à 42rem. Avec une taille de police initiale de 16px, comparez 671px, 672px et 673px : 671px devrait avoir une colonne de cartes, tandis que 672px et 673px devraient en avoir deux.
4. Sur des écrans plus larges tels que 1365px et 1920px, vérifiez si la largeur maximale du texte est maintenue et si les lignes ne sont pas trop longues. En plus de l'émulation d'appareil, vérifiez le fonctionnement, le clavier virtuel et la rotation de l'écran sur l'appareil réel utilisé.

L'émulation de périphérique est un outil d'approximation qui modifie la largeur et certaines conditions. Elle ne reproduit pas toutes les polices, les commandes tactiles, le clavier virtuel et le comportement du navigateur d'un appareil réel. Nous recommandons de vérifier la situation de saisie lorsque le clavier virtuel apparaît en bas de l'écran sur l'appareil réel.

Séparer le zoom du navigateur et les modifications de la taille du texte

À mesure que le zoom du navigateur augmente l'ensemble de la page, la largeur de la fenêtre d'affichage que le CSS peut utiliser peut également changer. Effectuez un zoom avant avec Ctrl et + sous Windows, et revenez à l'agrandissement par défaut avec Ctrl+0. Définir la taille de la police ou agrandir uniquement la police est une condition pour vérifier séparément la relation entre le texte et le bloc. Les expériences consistant à changer la taille de la police de HTML dans le CSS ne doivent pas être enregistrées comme un zoom du navigateur.

1. Enregistrez la largeur de l'écran à l'échelle par défaut dans la fenêtre réelle du navigateur et mettez-la à l'échelle à 200%. Vérifiez que le texte dans le texte du menu, la description de la carte, l’étiquette, la zone de saisie et le bouton n’est ni coupé ni chevauché.
2. Assurez-vous que votre contenu reste lisible à des grossissements plus importants. Lorsqu'il est agrandi de 400 % en se basant sur une largeur de 1280 px CSS, l'espace équivaut à environ 320 px CSS, mais la valeur réelle peut varier en fonction de l'interface du navigateur, de la barre de défilement, etc.
3. Restaurez l'échelle par défaut et vérifiez de nouveau en modifiant de manière significative les paramètres de police de votre navigateur. Les conditions et résultats du changement de la police par défaut, de l'agrandissement de la page et de la modification du CSS sont enregistrés comme des éléments distincts.

Les Règles pour l’accessibilité des contenus Web (WCAG) prévoient notamment un agrandissement du texte jusqu’à 200% sans perte de contenu ni de fonctionnalité, ainsi que la redistribution d’un contenu à défilement vertical dans une largeur équivalente à 320 pixels CSS sans défilement dans les deux directions. Certaines parties qui exigent une disposition bidimensionnelle, comme une carte géographique ou un tableau de données, peuvent bénéficier d’une exception justifiée. Cette exception ne s’étend pas automatiquement à toute la page. Consultez W3C : redimensionnement du texte et W3C : redistribution du contenu pour les critères et leurs exceptions.

Reproduire et diagnostiquer le débordement horizontal

Ajoutez simplement la déclaration suivante à la fin de votre CSS d'origine et ouvrez-la à 390px. La première carte nécessite au moins 40rem, elle ne tiendra donc pas à l'intérieur de l'écran. Sélectionnez la carte en utilisant la sélection d'élément dans les outils de développement et vérifiez la largeur calculée et la largeur minimale.

.card:first-child { min-width: 40rem; }

Ce problème ne peut pas être résolu simplement en réduisant la taille des colonnes de la grille. Cela est dû au fait que l'élément lui-même nécessite une largeur minimale. Si vous supprimez la déclaration que vous avez ajoutée, il reviendra à l'original min-width: 0. Vérifiez de nouveau le défilement horizontal et l'affichage des cartes à la même largeur d'écran.

Après restauration, ajoutez simplement cette fois la déclaration suivante : Vérifiez où les identificateurs longs débordent, et supprimez les déclarations supplémentaires pour rétablir overflow-wrap: anywhere. Mettre deux problèmes à la fois rend difficile de savoir quel changement l’a résolu. La largeur minimale fixée et la gestion des chaînes longues sont différenciées entre overflow et le retour à la ligne des chaînes longues gestion du débordement.

.card { overflow-wrap: normal; }

Vous pouvez rapidement vérifier si la page entière déborde avec les valeurs ci-dessous dans la console. Si le nombre à droite est plus grand que celui de gauche, c’est un signal pour rechercher la cause. Cette vérification compare uniquement la largeur du document et ne dit pas immédiatement quel élément en est la cause ; la zone de défilement horizontal prévue et les éléments cachés doivent également être déterminés séparément.

({ viewport: window.innerWidth, document: document.documentElement.scrollWidth })

Trouver le contenu coupé par des hauteurs fixes

Avec l’original sans aucun problème de largeur, ajoutez simplement le code suivant en bas : Remarquez que la description ou le lien en bas de la première carte est coupé. La combinaison de hauteur fixe et de masquage est particulièrement problématique car un texte agrandi ou de longues descriptions augmentent la hauteur requise.

.card:first-child { height: 10rem; overflow: hidden; }

Supprimez la déclaration que vous avez ajoutée pour revenir à la hauteur automatique en fonction du contenu. Même si l'objectif de conception est de correspondre à la hauteur des cartes courtes, évitez de tronquer les informations. Examinez des alternatives telles que la définition d'une hauteur minimale pour permettre un espace vide ou l'ajustement des conditions de placement, et vérifiez à nouveau les phrases longues et les conditions d'agrandissement. Masquer le défilement horizontal ou réduire continuellement la taille de la police pour masquer le problème n'est pas un premier choix pour la même raison.

Vérifiez la navigation au clavier et enregistrez les résultats

Après avoir ouvert une nouvelle page, utilisez Tab pour passer au menu, au lien de la carte, au champ de saisie de l'email et aux boutons dans l'ordre. Revenez en arrière avec Shift+Tab et assurez-vous que la bordure de focus est visible. Assurez-vous que la navigation vers les éléments hors écran défile correctement et qu'aucun menu fixe ou autre élément ne bloque complètement le focus. Si vous modifiez l'ordre visuel avec du CSS, assurez-vous qu'il ne contredit pas l'ordre de lecture HTML/de navigation au clavier.

Ce tableau est un exemple de la manière d'enregistrer et les résultats réels de l'inspection sont vérifiés et renseignés dans chaque environnement. Même lors de l'enregistrement qu'il n'y avait pas de problèmes, vous devez laisser les conditions qui ont été mises en œuvre afin de pouvoir les comparer avec les changements ultérieurs. En vérifiant séparément la largeur, l'agrandissement, le contenu et le fonctionnement du clavier et en retestant les conditions de défaillance initiales après correction, vous pouvez réduire les problèmes faciles à manquer en ne regardant qu'un seul écran.