Conception web adaptative

La conception adaptative permet à une page HTML de s’adapter lorsque l’espace disponible change. Un téléphone tenu verticalement, une tablette tournée à l’horizontale et une fenêtre d’ordinateur redimensionnée doivent tous présenter un texte lisible, des contrôles utilisables et des images adaptées. Tu conçois pour une plage continue de largeurs, y compris celles qui se trouvent entre les tailles d’appareils familières.

Ethan Marcotte a introduit le terme en 2010 autour de trois techniques : les mises en page fluides, les images redimensionnables et les requêtes média. Flexbox, les grilles, les requêtes de conteneur et le balisage des images adaptatives complètent désormais ces outils. Chacun résout une partie différente du problème ; une page demande plus qu’un seul réglage.

Compter les bons pixels

Un pixel CSS est une unité de mise en page, qui ne correspond pas nécessairement à un point de l’écran. CSS définit 96px comme l’équivalent de 1in ; sur un écran, ce rapport ne garantit pas une mesure physique d’un pouce. Un écran à haute densité utilise plusieurs pixels de l’appareil pour chaque pixel CSS. Le rapport de pixels de l’appareil décrit cette relation.

Un téléphone large de 390 pixels CSS avec un rapport de 3 compte 1 170 pixels de l’appareil en largeur. Une requête de largeur voit toujours 390px. Les points supplémentaires aident à dessiner du texte et des images nets ; ils ne donnent pas trois fois plus d’espace à la mise en page. Cette distinction compte lorsque tu choisis ensuite les fichiers image.

La zone d’affichage est la partie du navigateur utilisée pour afficher la page, sans ses barres d’outils. Redimensionner une fenêtre ou tourner un appareil change l’espace disponible. Sur téléphone, l’apparition et la disparition des barres d’outils peuvent aussi modifier la hauteur visible.

Indiquer la largeur prévue aux navigateurs mobiles

Les navigateurs mobiles peuvent mettre en page une page non configurée dans une large zone d’affichage virtuelle, souvent d’environ 980 pixels CSS, puis la réduire pour l’écran. Sur un téléphone de 390px, l’échelle est d’environ 0,4. Un texte déclaré à 16px paraît alors mesurer environ 6,4px de haut, et une requête pour une largeur étroite peut ne jamais correspondre car la zone d’affichage utilisée pour la mise en page reste large.

Place ceci dans le <head> du document :

<meta name="viewport" content="width=device-width, initial-scale=1">

width=device-width demande la largeur de l’appareil en pixels CSS. initial-scale=1 démarre au zoom normal. Après l’avoir ajouté, recharge la page dans une vue de navigateur de la taille d’un téléphone et vérifie le texte ainsi que les requêtes de largeur actives.

Laisse le zoom disponible. N’ajoute pas user-scalable=no ni maximum-scale=1. Les lecteurs malvoyants ont besoin d’agrandir le contenu ; le texte doit pouvoir être agrandi à 200 % sans perte de contenu ni de fonctionnalité. Certains navigateurs mobiles ignorent les restrictions de zoom, mais la page doit elle-même prendre en charge le zoom.

Vérifier aussi la mise en page

La balise de la zone d’affichage ne modifie pas une boîte de largeur fixe. Une .page avec width: 960px dépasse toujours une zone d’affichage de 390px. Remplace les largeurs rigides par des largeurs fluides bornées, rends les médias redimensionnables et ajoute des changements de mise en page là où le contenu en a besoin.

Pour déterminer pourquoi une page mobile est minuscule, cherche d’abord la balise de la zone d’affichage dans le <head>. Pour déterminer pourquoi une page de taille normale défile horizontalement, inspecte les boîtes qui dépassent la largeur disponible. Ces symptômes indiquent des causes différentes.

Choisis une unité en te demandant ce que la dimension doit suivre. Une colonne suit généralement son bloc englobant. La marge intérieure d’un bouton peut suivre son texte. La longueur des lignes d’un paragraphe suit la police. La bonne référence permet aux changements de fonctionner ensemble.

Pourcentages et modèle de boîte

Une boîte avec width: 50% mesure 300px de large dans un bloc englobant de 600px et 180px dans un bloc de 360px. En écriture horizontale normale, les marges intérieures et extérieures en pourcentage, y compris celles du haut et du bas, utilisent elles aussi la largeur du bloc englobant. Ainsi, padding-top: 10% dans un parent de 600px de large vaut 60px.

La hauteur fonctionne autrement. Une hauteur en pourcentage demande une hauteur de référence définie. Lorsque la hauteur d’un parent ordinaire provient de son contenu, height: 50% se comporte généralement comme auto. Laisse les boîtes de texte grandir avec leur contenu au lieu de les contrôler avec des hauteurs en pourcentage.

Utilise un conteneur fluide avec un maximum :

.page {
  box-sizing: border-box;
  width: 100%;
  max-width: 70rem;
  margin-inline: auto;
  padding-inline: 1rem;
}

Sur un écran étroit, la boîte remplit la largeur disponible, avec les marges intérieures à l’intérieur. Sur un grand écran, sa largeur s’arrête à 70rem et les marges automatiques en ligne la centrent. Avec une taille racine de 16px, sa largeur extérieure maximale est de 1 120px. border-box inclut les marges intérieures et les bordures dans la largeur déclarée ; avec content-box, une largeur de 100 % plus les marges intérieures déborderait. Une largeur fixe width: 70rem empêcherait aussi la boîte de rétrécir.

Par exemple, un élément englobant border-box de 340px de large avec 16px de marge intérieure de chaque côté laisse 308px à son contenu en l’absence de bordure. La largeur déclarée décrit l’extérieur de cette boîte. Si tu passes la même déclaration à content-box, le contenu seul mesure 340px et la largeur extérieure devient 372px. Inspecter ces différentes largeurs dans les outils de développement facilite le repérage des débordements dus aux marges intérieures.

Laisser les réglages du texte se transmettre

Laisse la taille de police racine à la valeur par défaut du lecteur ou utilise un pourcentage comme 100%. Avec une taille racine de 16px, 1.5rem vaut 24px ; avec une taille de 20px, il vaut 30px. Une règle fixe html { font-size: 16px; } empêche cette préférence de police par défaut de se transmettre aux dimensions relatives à la racine.

Pour font-size, em utilise la taille de police du parent. Les tailles de listes imbriquées définies chacune à 1.2em se multiplient donc : 16px devient 19,2px, puis 23,04px. Utilise rem lorsque tous les niveaux d’imbrication doivent garder la même taille.

Dans les autres propriétés, em utilise la taille de police propre à l’élément. Un bouton avec padding: 0.5em 1em voit ses marges intérieures grandir avec son texte. Cela garde un espacement proportionné sans point de rupture distinct.

Pour les paragraphes, max-width: 65ch fournit une limite de lecture utile. L’unité mesure la largeur de « 0 » : elle ne compte donc pas exactement les caractères dans une police proportionnelle. Environ 45 à 75 caractères par ligne est une recommandation courante ; vérifie la police et le texte réels dans le navigateur.

Les unités relatives à la zone d’affichage suivent celle du navigateur même lorsqu’un élément se trouve dans une boîte plus petite. 1vw représente 1 % de sa largeur ; 1vh représente 1 % de sa hauteur. vmin utilise la plus petite dimension et vmax la plus grande. Dans une zone d’affichage de 800px de large, 50vw vaut 400px. Dans une zone de 300px de haut, 70vh vaut 210px.

Cette référence compte. Une barre latérale peut ne mesurer que 260px de large dans une fenêtre de 1 400px. Un enfant avec width: 50vw demande 700px : il ne tiendra donc pas dans cette barre. Utilise un pourcentage lorsque l’enfant doit suivre son parent. Pour un bloc ordinaire de pleine largeur, préfère width: 100% : 100vw peut inclure la largeur d’une barre de défilement sur ordinateur et créer un défilement horizontal.

Choisir la hauteur mobile voulue

Les barres d’outils des navigateurs mobiles peuvent réduire la zone visible de la page. Les unités de hauteur relatives à la zone d’affichage distinguent trois états :

vh correspond à la grande zone d’affichage. Il existe aussi des variantes de largeur comme svw, lvw et dvw. Pour une grande section d’ouverture, min-height: 100svh fixe un minimum stable tout en permettant à un contenu plus long de grandir. Une height fixe laisse le contenu déborder lorsqu’il devient plus haut. Les unités dynamiques peuvent suivre les changements des barres d’outils, mais les mises à jour peuvent se faire par étapes et déplacer la mise en page.

Choisis la référence de hauteur selon le comportement voulu. Une section d’ouverture stable peut utiliser la petite zone d’affichage même après la disparition des barres d’outils ; elle n’a pas besoin de s’étirer à nouveau simplement parce que davantage d’espace devient visible. Un panneau destiné à suivre cet espace changeant peut utiliser les unités dynamiques, en acceptant les mouvements possibles. Dans les deux cas, une hauteur minimale permet au contenu supplémentaire d’allonger la section dans le flux normal.

Borner une valeur fluide

min() sélectionne la plus petite valeur et peut plafonner une largeur : width: min(100%, 40rem) remplit le parent jusqu’à atteindre 40rem. max() sélectionne la plus grande valeur et fournit un minimum. clamp() donne un minimum, une valeur préférée et un maximum, dans cet ordre.

.title {
  font-size: clamp(1rem, 0.5rem + 2vw, 2rem);
}

Avec une taille racine de 16px, le minimum est de 16px, la taille préférée est de 8px plus 2 % de la largeur de la zone d’affichage, et le maximum est de 32px. Examinons les bornes :

1. À 375px, la taille préférée est de 15,5px : le minimum de 16px s’applique donc.
2. À 1 000px, la taille préférée est de 28px, dans les limites.
3. À 1 400px, la taille préférée est de 36px : le maximum de 32px s’applique donc.

Les mêmes fonctions acceptent des calculs comme min(100% - 2rem, 70rem). Utilise des valeurs de longueur compatibles et des espaces autour de l’opérateur de soustraction.

Un texte dimensionné uniquement en vw peut devenir minuscule sur les écrans étroits et immense sur les grands écrans. Le zoom sur ordinateur réduit aussi la largeur de la zone d’affichage en pixels CSS, ce qui peut annuler l’agrandissement de ce texte. Inclus une part relative à la police et des bornes utiles, puis teste l’agrandissement du texte : une expression mixte rem/vw ne garantit pas à elle seule un agrandissement complet à 200 %.

Une requête média applique du CSS lorsqu’une condition portant sur la sortie, la zone d’affichage ou les préférences du lecteur est vraie. Le navigateur vérifie à nouveau la condition lorsque les paramètres concernés changent : redimensionner une fenêtre peut donc changer les styles sans recharger la page.

.heading { font-size: 1.25rem; }

@media (min-width: 40em) {
  .heading { font-size: 2rem; }
}

Avec la valeur habituelle de 16px par défaut dans le navigateur, 40em vaut 640px. Le titre plus grand s’applique à partir de cette largeur. Dans les requêtes média, em et rem utilisent la taille de police initiale du navigateur, et non une taille définie par l’auteur sur <html>. Pour un lecteur dont la valeur par défaut est de 20px, le même changement se produit à 800px.

Lire précisément les conditions

min-width inclut sa borne : 600px correspond à min-width: 600px. max-width inclut aussi sa borne. La syntaxe d’intervalle rend la comparaison explicite :

@media (width >= 600px) { /* wider layout */ }
@media (600px <= width < 900px) { /* middle band */ }

Si tu associes max-width: 600px à min-width: 600px, les deux correspondent à 600px. Utiliser 599px et 600px laisse au contraire un intervalle sans correspondance pour les largeurs fractionnaires comme 599,5px. Des requêtes de largeur minimale croissante évitent cet intervalle ; des intervalles complémentaires comme < 600px et >= 600px sont une autre solution.

Les types de média indiquent la sortie : screen, print ou la valeur par défaut all. @media print peut retirer la navigation et utiliser un texte sombre sur papier blanc. Les conditions se combinent de plusieurs façons utiles :

only n’a pas d’effet utile dans les navigateurs actuels. La largeur et la hauteur décrivent la zone d’affichage ; orientation: portrait signifie que sa hauteur est au moins égale à sa largeur. D’autres caractéristiques testent la précision de l’entrée, le survol, la résolution, la réduction des animations et le thème clair ou sombre. Une zone d’affichage en paysage ne dit pas si le lecteur dispose d’une souris.

Dans une condition pratique, @media (hover: hover) and (pointer: fine) exige une entrée principale capable de survoler et de cibler avec précision. Une fenêtre étroite utilisée à la souris peut y correspondre, tandis qu’un appareil tactile large peut ne pas y correspondre. Utilise la requête pour des effets de pointeur facultatifs ; garde l’action sous-jacente accessible par les contrôles habituels de la page.

Garder la cascade à l’esprit

Une requête média n’augmente pas la spécificité d’un sélecteur. Dans une feuille de style normale avec des règles de même spécificité, la dernière déclaration correspondante l’emporte. Si la règle de base .heading apparaît après la règle pour grand écran ci-dessus, elle l’emporte aussi aux grandes largeurs. Place d’abord les règles de base, puis les requêtes qui les modifient.

Tu peux aussi associer une condition en HTML. <link rel="stylesheet" href="print.css" media="print"> applique ses règles à l’impression, mais un navigateur peut tout de même télécharger le fichier avec une priorité inférieure. L’attribut media d’un élément <source> utilise des conditions pour choisir une source d’image.

Le CSS conçu d’abord pour les mobiles commence par la mise en page étroite, sous forme de règles ordinaires hors de toute requête. Des requêtes de largeur minimale ajoutent ensuite des changements lorsque l’espace le permet. Cela convient au flux normal du document : les blocs s’empilent déjà verticalement, si bien que la page de base demande souvent peu de code de mise en page.

Le CSS conçu d’abord pour les ordinateurs commence par les règles pour grand écran et utilise des requêtes de largeur maximale pour les modifier. Les deux approches peuvent fonctionner, mais la conception d’abord pour les mobiles rend généralement la base et chaque changement ultérieur plus faciles à suivre.

Partir d’une colonne

.cards {
  display: grid;
  gap: 1rem;
}

@media (min-width: 40em) {
  .cards { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 64em) {
  .cards { grid-template-columns: repeat(3, 1fr); }
}

Avec une valeur par défaut de 16px, les changements se produisent à 640px et 1 024px. Une zone d’affichage de 500px montre une colonne. À 800px, la première requête correspond et donne deux colonnes. À 1 200px, les deux requêtes correspondent ; la dernière règle donne trois colonnes.

La requête pour la plus grande largeur ne désactive pas la précédente. Si tu inverses leur ordre, la règle à 40em vient en dernier et réduit la mise en page large à deux colonnes. Garde les requêtes de largeur minimale dans l’ordre croissant lorsqu’elles modifient la même propriété avec la même spécificité.

Trouver le point de rupture dans le contenu

Un point de rupture est l’endroit où une requête modifie la mise en page. Commence avec le contenu réel dans une fenêtre étroite, puis élargis-la lentement. Repère une navigation qui passe maladroitement à la ligne, des paragraphes qui deviennent trop longs ou des cartes qui s’étirent au-delà d’une largeur de lecture utile. Ajoute un changement là où il améliore ce contenu.

Ne choisis pas un point de rupture simplement parce qu’un appareil familier a cette largeur. Les écrans varient, les fenêtres d’ordinateur peuvent avoir n’importe quelle taille et une police plus grande peut amener la même navigation à demander plus d’espace. Des points de rupture en unités relatives peuvent aider la mise en page à réagir à la taille de texte par défaut du lecteur.

Après chaque changement, teste les deux côtés du point de rupture et plusieurs largeurs entre les changements. Une mise en page correcte uniquement à 375px, 768px et 1 280px a encore de nombreuses occasions d’échouer. Les largeurs fluides, le retour à la ligne et les colonnes automatiques de grille gèrent une grande partie de l’espace intermédiaire.

Teste ensemble la navigation et la liste de cartes après avoir ajouté une barre latérale à la page. La fenêtre est devenue plus large, mais la colonne principale peut être devenue plus étroite car elle partage désormais cet espace. Une disposition de cartes qui fonctionnait juste sous le point de rupture de la page peut échouer juste au-dessus. C’est un bon endroit pour laisser les cartes passer à la ligne ou s’organiser en colonnes automatiques, tandis que la page utilise une requête explicite.

Garder un contenu utile et des téléchargements adaptés

Les utilisateurs de téléphone ont eux aussi besoin du contenu de la page. Si une explication secondaire prend trop de place, empile-la plus bas ou place-la dans un élément natif dépliable <details> que les lecteurs peuvent ouvrir. Ne retire pas des informations nécessaires simplement pour rendre une capture d’écran étroite plus ordonnée.

Commencer par une page étroite aide aussi à choisir une page par défaut légère. Masquer une grande image avec CSS n’empêche pas forcément son téléchargement ; utilise le balisage des images adaptatives pour proposer des fichiers adaptés. Une page lisible à une colonne avec une image plus petite constitue un bon point de départ ; les mises en page plus larges ajoutent ensuite de l’espace et réorganisent le contenu.

Une mise en page peut s’adapter grâce à une requête explicite ou à ses propres règles de dimensionnement. Utilise une requête lorsque la disposition doit changer à un point choisi. Utilise une mise en page intrinsèque lorsque les éléments doivent simplement tenir dans l’espace disponible.

Laisser la grille compter les colonnes

.tiles {
  display: grid;
  grid-template-columns:
    repeat(auto-fit, minmax(min(15rem, 100%), 1fr));
  gap: 1rem;
}

Avec une taille racine de 16px, chaque colonne vise une largeur d’au moins 240px. La grille en place autant que possible, soustrait les espacements, puis partage la largeur restante avec 1fr. Dans un conteneur de 1 000px, quatre colonnes de 240px et trois espacements de 16px demanderaient 1 008px : seules trois colonnes tiennent donc. Chacune reçoit environ 322,7px. Un conteneur de 700px obtient deux colonnes de 342px ; un conteneur de 360px en obtient une.

Le min(15rem, 100%) intérieur est utile lorsque le conteneur mesure moins de 240px de large. Il permet au minimum de devenir la largeur disponible. Sans lui, le minimum de 240px provoquerait un débordement. auto-fit réduit les pistes vides à zéro, ce qui permet à quelques éléments de s’étendre ; auto-fill conserve les pistes vides et peut laisser ces éléments plus étroits.

Laisser les éléments flexibles passer à la ligne

.links {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}
.links > * { flex: 1 1 15rem; }

Chaque élément part d’une base de 15rem, peut rétrécir ou grandir et passe à la ligne lorsque la ligne ne peut plus accueillir d’éléments. Chaque ligne partage son propre espace restant. Deux éléments sur la dernière ligne peuvent donc devenir plus larges que les éléments au-dessus. Une grille convient mieux lorsque les largeurs des colonnes doivent s’aligner d’une ligne à l’autre. La navigation peut aussi passer à la ligne, ou une requête peut changer sa flex-direction en column.

Modifier toute la page si nécessaire

Commence la page dans le flux normal. Ajoute ensuite une disposition avec barre latérale :

@media (min-width: 48em) {
  .page {
    display: grid;
    grid-template-columns: 16rem minmax(0, 1fr);
    gap: 1rem;
  }
}

Avec la valeur habituelle de 16px par défaut, cela commence à 768px. La première colonne est la barre latérale ; la seconde prend l’espace restant. Le minimum de zéro permet à la piste principale de rétrécir ; son contenu doit tout de même pouvoir passer à la ligne ou défiler correctement. Les zones de grille nommées peuvent exprimer une disposition plus complexe.

Garde le HTML dans un ordre de lecture logique. La propriété order de Flexbox et le placement dans la grille changent l’emplacement visuel des éléments, mais le focus clavier et les lecteurs d’écran suivent toujours l’ordre du code source. Teste en parcourant les liens avec la touche de tabulation après les avoir réorganisés.

Un tableau de données large peut avoir besoin de sa structure bidimensionnelle. Place-le dans un élément englobant à défilement local avec overflow-x: auto, tabindex="0", role="region" et un nom accessible comme aria-label="Event schedule". Seule la région du tableau doit défiler horizontalement ; le reste de la page doit toujours se redistribuer.

Une requête sur la largeur de la zone d’affichage donne la même réponse pour chaque composant d’une page. Cela peut être inadapté à une carte réutilisable : la fenêtre peut mesurer 1 400px de large alors que la barre latérale ne donne que 300px à la carte. Une requête de taille de conteneur mesure l’espace disponible d’un ancêtre : la carte peut ainsi s’adapter à son emplacement réel.

Déclarer un élément englobant, puis mettre en forme son contenu

<div class="card-wrap">
  <article class="card">...</article>
</div>

.card-wrap { container-type: inline-size; }
.card { display: grid; gap: 1rem; }

@container (min-width: 25rem) {
  .card { grid-template-columns: 8rem minmax(0, 1fr); }
}

En écriture horizontale, inline-size correspond à la largeur. Cette valeur déclare que l’élément englobant peut répondre aux requêtes sur sa taille en ligne. Avec une police racine de 16px, 25rem vaut 400px. Une carte dans un élément englobant de 300px reste empilée ; une autre dans un élément de 500px place son image à côté de son texte. Les deux peuvent se trouver sur la même page en même temps.

Une requête mesure un ancêtre de l’élément mis en forme. Si tu places container-type seulement sur .card puis essaies de modifier cette même carte, la requête cherche toujours parmi ses ancêtres. Utilise un élément englobant comme boîte de mesure et la carte intérieure comme boîte à mettre en forme.

Sélectionner l’ancêtre voulu

Une requête de taille sans nom utilise le conteneur de taille ancêtre approprié le plus proche. Dans une mise en page imbriquée, il peut s’agir d’un élément englobant intérieur. Un nom te permet de choisir un ancêtre particulier :

.panel { container: sidebar / inline-size; }

@container sidebar (width >= 30rem) {
  .panel-title { font-size: 1.5rem; }
}

La propriété raccourcie définit à la fois le nom et le type. S’il n’existe aucun ancêtre approprié, la requête ne correspond pas ; les styles de base continuent de s’appliquer. Les conditions peuvent utiliser des intervalles et des opérateurs logiques comme and, or et not.

Vérifier que le conteneur obtient sa taille

Le confinement empêche la dimension interrogée de dépendre du contenu même que la requête peut remettre en forme. Place container-type sur une boîte dont la largeur provient de la mise en page du parent, comme un bloc, une zone de grille ou un élément flexible qui grandit. Une boîte qui se réduit normalement à son contenu peut s’effondrer lorsque ce contenu ne contribue plus à sa taille en ligne.

container-type: size prend en charge les requêtes de largeur et de hauteur, mais confine aussi le dimensionnement en bloc. Sa hauteur doit être définie indépendamment ; sinon elle peut s’effondrer. Pour des cartes ordinaires, inline-size permet à la hauteur de continuer à suivre le contenu. La valeur par défaut normal ne crée pas de conteneur pour les requêtes de taille.

Les caractéristiques de taille comprennent la largeur, la hauteur, la taille en ligne, la taille de bloc, le rapport largeur-hauteur et l’orientation, à condition que le type de conteneur choisi prenne en charge les dimensions concernées. Les principaux navigateurs actuels prennent en charge les requêtes de taille. Garde une mise en page de base empilée et utilisable pour que la carte fonctionne encore si un navigateur ignore l’amélioration.

Une page adaptative peut combiner trois approches : la redistribution automatique, les conditions sur la zone d’affichage et les conditions sur les composants. Détermine les informations dont la mise en page a besoin avant de choisir une requête.

Dimensionner dans un conteneur

Les unités de requête de conteneur représentent des pourcentages d’un conteneur ancêtre approprié. cqw et cqh utilisent la largeur et la hauteur. cqi et cqb utilisent la taille en ligne et la taille de bloc. cqmin et cqmax utilisent respectivement la plus petite et la plus grande des deux dimensions. En écriture horizontale, la taille en ligne est la largeur.

Dans un conteneur admissible de 400px de large, 5cqi vaut 20px. Dans un conteneur de 600px de large, il vaut 30px. Un titre peut ainsi suivre son propre composant, même lorsque la largeur de toute la page reste identique.

Garde des bornes autour du texte :

.card-wrap { container-type: inline-size; }
.card h2 {
  font-size: clamp(1rem, 4cqi, 1.5rem);
}

Avec une taille racine de 16px, un élément englobant de 300px donne une valeur préférée de 12px : le minimum de 16px s’applique donc. À 600px, 4cqi vaut 24px, soit le maximum. Des éléments englobants plus larges ne peuvent pas porter le titre au-dessus de 24px. Teste l’agrandissement ainsi que le redimensionnement de l’élément englobant ; le texte fluide doit rester utilisable lorsque les lecteurs zooment.

Les unités de conteneur choisissent l’ancêtre admissible le plus proche pour la direction mesurée. S’il n’en existe pas, elles se replient sur les unités de la petite zone d’affichage. Un container-type oublié peut donc faire varier le texte avec la fenêtre tout en donnant l’impression de fonctionner. Inspecte les ancêtres lorsqu’une dimension semble suivre le mauvais espace. Le nom d’un conteneur dans une requête ne redirige pas, à lui seul, toutes les unités de conteneur vers cet ancêtre nommé.

Combiner les outils

Une page peut passer à une disposition en colonnes avec barre latérale et contenu principal à 48em grâce à une requête média. Dans la zone principale, une grille automatique peut placer autant de cartes que l’espace le permet. La requête de conteneur propre à une carte peut déplacer son image à côté de son texte seulement lorsque cet emplacement précis est assez large.

Ne remplace pas une requête sur la réduction des animations ou le survol par une requête de conteneur. Les dimensions d’une boîte ne révèlent ni les préférences du lecteur ni son périphérique d’entrée. De même, copier les règles d’une carte dans des requêtes distinctes sur la zone d’affichage pour chaque emplacement lie ce composant réutilisable à chaque mise en page environnante. Laisse son espace local décider du moment où sa disposition change.

Une image peut être plus large que l’espace que lui donne la mise en page. Commence par une règle qui lui permet de rétrécir tout en conservant ses proportions :

img, video {
  max-width: 100%;
  height: auto;
}

max-width limite la largeur affichée à celle du conteneur sans forcer une petite image à le remplir. width: 100% étirerait un petit logo sur toute la largeur. La hauteur automatique préserve le rapport largeur-hauteur lorsque la largeur change.

Réserver l’espace avant le téléchargement

Garde les attributs de dimensions dans le HTML :

<img src="coast.jpg" width="1200" height="800"
     alt="A rocky coast with a walking path">

Ces dimensions donnent un rapport largeur-hauteur de 3:2, ce qui permet au navigateur de réserver l’espace avant l’arrivée du fichier. Lorsque le CSS affiche l’image à 360px de large, la hauteur correspondante est de 240px. Retirer les attributs parce que l’image est adaptative fait perdre cette information de dimensionnement précoce. Le CSS peut toujours afficher l’image à une taille inférieure aux dimensions des attributs.

Pour un lecteur vidéo intégré, donne à la boîte son propre rapport :

iframe {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
}

Cela conserve un format de lecteur 16:9 lorsque sa largeur change. Pour le texte, laisse la hauteur dépendre du contenu ; un rapport largeur-hauteur fixe est utile pour les boîtes de médias dont la forme est connue.

Choisir si le recadrage est autorisé

Une miniature de carte doit souvent remplir une boîte uniforme. Donne-lui une largeur et un rapport largeur-hauteur, puis choisis comment l’image source s’y ajuste :

.thumbnail {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: top;
}

cover remplit la boîte et coupe les parties qui dépassent. contain montre toute l’image et peut laisser des bandes vides. La valeur par défaut fill étire l’image jusqu’aux dimensions de la boîte, ce qui peut la déformer. object-position choisit l’alignement utilisé lors de l’ajustement ; l’alignement en haut garde la partie supérieure visible dans cet exemple.

Pour une comparaison concrète, place une photo de 400 × 200 dans une miniature de 320 × 240. Avec cover, elle est redimensionnée à 480 × 240, puis 160px de sa largeur redimensionnée sont coupés au total. Avec contain, elle est redimensionnée à 320 × 160, laissant au total 80px de hauteur inutilisée. Les deux préservent les proportions de l’image source ; le choix dépend de la nécessité de remplir la boîte ou de garder toute l’image visible.

Les images qui apportent du contenu doivent utiliser <img> avec une alternative textuelle utile. Les arrière-plans CSS conviennent à la décoration ; background-size: cover peut les recadrer pour remplir leur boîte, et les requêtes média peuvent changer le fichier d’arrière-plan.

Pour les images situées sous la première partie visible de la page, loading="lazy" peut différer leur téléchargement jusqu’à ce que le lecteur s’en approche. Laisse l’image principale d’ouverture se charger immédiatement pour qu’elle apparaisse rapidement. Réduire une photo de 4 000 pixels avec CSS télécharge toujours cette photo ; le balisage des images adaptatives est nécessaire pour choisir un fichier plus petit.

Une photo peut être proposée dans plusieurs fichiers de mêmes contenu et proportions, mais de dimensions différentes en pixels. Le changement de résolution permet au navigateur de choisir un fichier selon la taille d’affichage, la densité de l’écran et ses décisions de chargement. Il évite les transferts de données inutiles tout en conservant assez de détails.

Taille d’affichage fixe : les descripteurs de densité

<img src="logo-200.png"
     srcset="logo-200.png 1x, logo-400.png 2x"
     width="200" height="80" alt="Northwind Books">

Le logo est affiché à 200 pixels CSS de large. Le fichier de 200 pixels convient à un écran de rapport 1 ; celui de 400 pixels fournit deux pixels source par pixel CSS affiché pour un rapport de 2. Cette forme utilise des descripteurs x et ne demande pas d’attribut sizes.

Taille d’affichage variable : les descripteurs de largeur

<img src="park-800.jpg"
     srcset="park-480.jpg 480w,
             park-800.jpg 800w,
             park-1600.jpg 1600w"
     sizes="(min-width: 64em) 50vw, 100vw"
     width="1600" height="1000"
     alt="Trees around a park pond">

Chaque valeur w doit indiquer la largeur réelle du fichier en pixels. Elle ne définit pas de largeur CSS. Le CSS contrôle toujours la boîte, et sizes décrit au navigateur la largeur d’affichage prévue.

La première condition correspondante dans sizes l’emporte. Avec une valeur par défaut de 16px dans le navigateur, l’emplacement mesure 50vw à partir de 1 024px ; en dessous, il mesure 100vw. La dernière longueur, sans condition, sert de repli. Les longueurs peuvent utiliser des unités relatives à la zone d’affichage, des unités en pixels ou relatives à la police, ainsi que des calculs comme calc(100vw - 2rem), mais pas de pourcentages. Lorsque sizes est absent avec des descripteurs de largeur, le navigateur suppose normalement 100vw.

Calculer le niveau de détail nécessaire

Multiplie la largeur d’affichage indiquée par le rapport de pixels de l’appareil. Pour choisir le plus petit fichier suffisant, compare cette valeur cible aux largeurs des fichiers proposés :

1. Une zone d’affichage de 1 200px avec un rapport de 1 utilise l’emplacement de 50vw : 600 pixels CSS. Le fichier 800w est le premier assez grand.
2. Une zone d’affichage de 390px avec un rapport de 3 utilise 390 pixels CSS. Il faut 1 170 pixels source : 1600w atteint donc la cible.
3. La même zone étroite avec un rapport de 2 demande 780 pixels source, ce que fournit 800w.

Les navigateurs peuvent réutiliser un fichier plus grand en cache ou privilégier un fichier plus petit lorsque les conditions de chargement sont limitées. Le balisage fournit des fichiers candidats et des informations de taille, et non un ordre absolu de télécharger un fichier précis.

Les navigateurs commencent à télécharger les images avant de disposer de la mise en page CSS complète. C’est pourquoi l’indication de taille appartient au HTML. Si le CSS donne à une image la moitié de la zone d’affichage mais que sizes indique 100vw, le navigateur peut télécharger un fichier trop grand. Mets sizes à jour lorsque la mise en page change. Garde src comme solution de repli et utilise une seule alternative textuelle alt. Des cadrages différents nécessitent <picture>, car les fichiers proposés pour le changement de résolution doivent rester des versions interchangeables de la même image.

Réduire les dimensions en pixels d’une photo conserve la même composition. Un téléphone a parfois besoin d’une composition différente : sur une photo large d’une scène, la personne qui parle peut devenir trop petite pour être reconnue. La direction artistique modifie le cadrage ou l’image pour que le sujet important reste bien visible.

L’élément <picture> fournit des sources classées par ordre de priorité, suivies d’un élément <img> obligatoire :

<picture>
  <source media="(min-width: 50em)"
          srcset="stage-wide.jpg" width="1600" height="900">
  <img src="stage-close.jpg" width="800" height="1000"
       alt="A speaker presenting on stage">
</picture>

Avec une valeur par défaut de 16px, le cadrage large est sélectionné à partir de 800px ; en dessous, l’image utilise le cadrage rapproché. <img> reste l’élément affiché. Il fournit la solution de repli et l’alternative textuelle, et c’est lui que ton CSS d’image met en forme. Un <picture> sans <img> n’affiche aucune image.

Placer les conditions les plus restrictives en premier

Le navigateur choisit la première source prise en charge dont les conditions correspondent. Supposons que tu proposes des cadrages à 30em et à 60em. Place d’abord le minimum de 60em, puis celui de 30em, puis la solution de repli. Si 30em vient en premier, cette condition correspond aussi à un très grand écran et empêche le navigateur d’atteindre celle de 60em. Des intervalles sans chevauchement peuvent aussi clarifier le choix prévu.

La condition media d’une source est une instruction de sélection. En comparaison, les fichiers candidats ordinaires de srcset et sizes donnent au navigateur des informations pour choisir une résolution adaptée. Utilise la direction artistique lorsque la composition doit changer ; utilise le changement de résolution lorsque le contenu de l’image reste identique.

Proposer les formats par ordre de préférence

<picture>
  <source type="image/avif" srcset="hall.avif">
  <source type="image/webp" srcset="hall.webp">
  <img src="hall.jpg" width="1200" height="800"
       alt="Rows of seats in a lecture hall">
</picture>

Un navigateur qui prend en charge le premier format peut l’utiliser ; sinon, il essaie le choix suivant pris en charge et finit par se replier sur le JPEG. AVIF et WebP fournissent souvent des fichiers plus petits à qualité visuelle comparable. L’attribut type permet au navigateur d’ignorer les formats non pris en charge sans les télécharger pour le vérifier.

Chaque source peut aussi proposer plusieurs fichiers de largeurs différentes avec son propre srcset et son propre sizes. Cela combine le cadrage ou le format choisi avec le changement de résolution. Lorsque les cadrages issus de la direction artistique ont des proportions différentes, les attributs de dimensions sur les sources permettent au navigateur de réserver l’espace adapté à chacun.

Écris l’alternative textuelle une seule fois, sur <img>, et assure-toi qu’elle décrit chaque cadrage. Si un cadrage rapproché retire une deuxième personne, une alternative qui nomme deux personnes ne convient plus. Pour une image purement décorative, utilise alt="" afin qu’elle n’ajoute pas de contenu parlé inutile.

Une page adaptative doit être testée sur une plage de largeurs, et pas seulement sur quelques appareils nommés. Ouvre la vue adaptative du navigateur, définis une zone d’affichage étroite proche de 320px et élargis-la jusqu’à une grande fenêtre. Observe les titres, la navigation, les cartes et les bords des images pendant le changement. Teste juste en dessous, à la valeur exacte et juste au-dessus de chaque point de rupture.

Les outils de développement peuvent émuler les dimensions de la zone d’affichage, le rapport de pixels de l’appareil et l’entrée tactile. Chrome et Edge proposent une barre d’outils des appareils ; Firefox et Safari proposent des modes de conception adaptative. L’émulation est utile, mais les vrais appareils peuvent différer par le comportement des barres d’outils, le tactile, les polices et les performances. Vérifie sur un vrai téléphone et une vraie tablette dans les deux orientations, ainsi que dans une fenêtre d’ordinateur redimensionnée.

Vérifier la redistribution et l’agrandissement du texte

Le critère de redistribution de niveau AA des WCAG demande que le contenu ordinaire fonctionne à une largeur de 320 pixels CSS sans exiger de défilement dans deux directions. Une zone d’affichage de 1 280px de large avec un zoom de 400 % fournit cette largeur. Définis une zone d’affichage adaptative de 320px pour une vérification directe à largeur étroite, et teste aussi le zoom réel sur ordinateur pour observer l’agrandissement de la page.

Le contenu qui a besoin d’une mise en page bidimensionnelle, comme un tableau de données, une carte ou un diagramme, peut conserver cette disposition. Garde tout défilement horizontal nécessaire dans sa propre région. Les titres, consignes et paragraphes autour doivent toujours tenir dans la largeur de la page.

Utilise du contenu réaliste : un titre long, une URL sans coupure, de nombreux liens et un texte traduit plus long. Augmente aussi la taille de police par défaut du navigateur. Une boîte qui paraissait spacieuse avec un court exemple peut déborder lorsque le texte grandit.

Repérer l’origine du débordement horizontal

Une barre de défilement horizontale ou une bande vide à droite signifie souvent qu’une boîte dépasse la zone d’affichage. Inspecte les éléments suspects et compare les bords de leurs boîtes à la limite de la page. Dessine temporairement leur contour :

* { outline: 1px solid red; }

Un contour montre les boîtes sans ajouter à leur largeur mesurée. Cherche les largeurs fixes, les blocs à 100vw, les images sans limite de largeur, les pistes de grille dont le minimum est trop large, les marges négatives, les textes longs et les blocs de code.

Adapte la correction à la cause :

Ne masque pas le débordement horizontal de toute la page pour aller plus vite. body { overflow-x: hidden; } peut faire disparaître la barre de défilement tout en laissant du contenu hors de portée du lecteur.

Pour un tableau à défilement local, teste l’interaction ainsi que la largeur. Utilise le clavier pour atteindre l’élément englobant nommé et vérifie que son défilement horizontal révèle chaque colonne. Continue ensuite avec la touche de tabulation jusqu’au contrôle suivant. Le tableau peut nécessiter un déplacement horizontal sans imposer la même zone de défilement large au paragraphe précédent ou au reste de la page.

Inspecte enfin les requêtes d’images dans le panneau Réseau. Définis à la fois une zone d’affichage de la taille d’un téléphone et un rapport de pixels élevé et réaliste, recharge dans les conditions de test voulues, puis vérifie le fichier candidat choisi et sa taille. Une image visuellement petite peut tout de même représenter un gros téléchargement si son indication sizes est incorrecte.

La largeur n’est qu’un aspect du comportement adaptatif. Une tablette large peut utiliser le tactile ; une fenêtre étroite sur ordinateur peut être utilisée avec une souris. Les pages doivent aussi fonctionner avec le zoom, un texte plus grand, différentes orientations et les préférences du lecteur en matière d’animations et de couleurs.

Rendre les contrôles faciles à atteindre

Les recommandations de taille des cibles des WCAG 2.2 de niveau AA demandent au moins 24 × 24 pixels CSS ou un espacement suffisant selon la règle prévue, avec des exceptions comme les liens dans les phrases. Le critère de taille de niveau AAA utilise 44 × 44 pixels CSS, avec des exceptions lui aussi. Des liens de navigation plus grands avec des marges intérieures sont souvent plus confortables qu’une rangée dense de minuscules intitulés.

Avec une taille racine de 16px, un lien comportant un texte de 16px, line-height: 1.5 et padding: 0.75rem 1rem possède une boîte de ligne de 24px plus 12px au-dessus et en dessous : il mesure 48px de haut. Fais du lien lui-même la boîte cliquable avec ses marges intérieures.

Les informations essentielles ne doivent pas dépendre du survol. Garde les actions visibles ou accessibles par toucher et par focus clavier. Ajoute des effets de survol facultatifs seulement lorsque l’entrée principale les prend en charge :

@media (hover: hover) and (pointer: fine) {
  .card:hover { outline: 2px solid currentColor; }
}

pointer: coarse décrit une entrée principale imprécise comme un doigt. any-pointer et any-hover vérifient si un périphérique d’entrée connecté possède une capacité ; ils ne prouvent pas que chaque lecteur l’utilise.

Permettre l’agrandissement du texte et la rotation

Laisse le zoom activé et vérifie l’agrandissement du texte à 200 % sans perte de contenu ni de fonctionnalité. Utilise des dimensions relatives à la police et des boîtes de texte extensibles. min-height permet à une boîte de grandir avec son contenu ; une hauteur fixe peut laisser le texte agrandi déborder dans la section suivante.

Prends en charge les orientations portrait et paysage, sauf si une orientation est essentielle à l’activité. Les téléphones en paysage peuvent offrir très peu d’espace vertical. Une requête de hauteur comme @media (max-height: 30em) peut laisser un en-tête adhérent disparaître au défilement pour qu’il ne couvre pas le contenu.

Respecter les préférences et la sortie

Utilise prefers-reduced-motion pour éviter les mouvements importants aux lecteurs qui en demandent moins. Une approche consiste à placer les animations facultatives dans @media (prefers-reduced-motion: no-preference). Tu peux aussi retirer une animation existante dans une requête reduce.

Pour un thème sombre, associe des couleurs de texte et de fond lisibles dans @media (prefers-color-scheme: dark). Vérifie le contraste dans les deux thèmes. color-scheme: light dark permet aux contrôles et barres de défilement dessinés par le navigateur de suivre un thème adapté ; cette propriété ne choisit pas toutes les couleurs de ta page à ta place.

Une règle de réduction des animations peut cibler uniquement le composant animé :

@media (prefers-reduced-motion: reduce) {
  .banner { animation: none; }
}

Garde le message lui-même disponible lorsque le mouvement est supprimé. Pour un thème sombre, change ensemble le premier plan et l’arrière-plan ; modifier un seul des deux peut rendre le texte indistinct du fond. Prévisualise aussi les contrôles de formulaire, car ceux dessinés par le navigateur peuvent différer des surfaces que tu as définies.

Utilise @media print pour masquer la navigation et les boutons et produire un texte sombre sur fond blanc. Les liens imprimés peuvent afficher leur destination avec a[href]::after { content: " (" attr(href) ")"; }. Vérifie dans l’aperçu avant impression que le contenu, les arrière-plans et les sauts de page restent lisibles.