Points de rupture : le contenu plutôt que les appareils

Cherchez un aide-mémoire de points de rupture et vous trouverez des largeurs de viewport nommées d’après le matériel : iPhone, iPad, ordinateur portable, ordinateur de bureau. Ces tableaux pourrissent à chaque cycle produit, et ils n’ont jamais été tout à fait exacts, même flambant neufs — les vrais appareils couvrent aujourd’hui presque toutes les largeurs à partir de 320px. Le chiffre le plus célèbre de ces listes l’illustre bien : 768px, c’est l’iPad classique qui rapporte son viewport en mode portrait, 768 × 1024 pixels CSS. Cet appareil relève désormais du musée ; le chiffre figure pourtant encore dans une grande partie des feuilles de style du monde. La convention a survécu à son appareil.

Un point de rupture CSS est une largeur de viewport à laquelle la mise en page change — et la façon durable d’en placer un, c’est là où le contenu échoue, pas là où un tableau d’appareils pointe : là où la longueur de ligne quitte sa plage lisible, là où une barre latérale affame le contenu à côté d’elle, là où les cartes se compriment sous leur largeur exploitable. Cet article — qui fait partie de notre guide de la grille de mise en page — parcourt ces signaux d’échec, explique pourquoi les valeurs quasi standard conviennent en général quand même, et comment les points de rupture se livrent sous forme de tokens.

Pourquoi ne pas simplement concevoir pour les appareils ?

Trois raisons. Le tableau est instable : chaque cycle produit ajoute des largeurs, et un point de rupture nommé d’après un appareil hérite de cette instabilité. De toute façon, la media query n’a jamais connu l’appareil — elle n’a jamais mesuré que le viewport, si bien qu’« iPad » a toujours été une fiction polie pour « 768px de large ». Et les vraies fenêtres vivent entre les entrées du tableau : tablettes en écran partagé, fenêtres de bureau redimensionnées, écrans pliables. Une mise en page vérifiée uniquement aux largeurs du tableau peut quand même échouer entre elles ; une mise en page placée par ses propres points d’échec, non — parce que les points d’échec sont la définition.

Où un point de rupture a-t-il sa place ?

Là où une mise en page cesse visiblement de fonctionner. Trois signaux d’échec couvrent la plupart des pages, chacun avec un symptôme observable :

• La longueur de ligne quitte la plage. Le texte courant dépasse environ 75 caractères par ligne et l’œil commence à rater le trajet de retour vers la ligne suivante — lignes relues, lignes sautées. Le point d’arrêt a sa place là où la colonne de texte dépasserait son budget.
• La barre latérale affame le contenu. Garder la barre latérale et le contenu côte à côte trop longtemps comprime la colonne de contenu en deçà de ce dont elle a besoin, tandis que la barre latérale reste à l’aise. Le point d’arrêt a sa place là où le côte à côte laisse pour la première fois les deux colonnes exploitables.
• Les cartes se compriment. Une rangée de cartes maintenue trop longtemps rogne leurs titres et fait passer leurs boutons à la ligne — en dessous d’environ 250–280px, les cartes cessent de faire leur travail. Le point d’arrêt a sa place là où la carte suivante tient à sa pleine largeur exploitable.

Chaque symptôme nomme son propre remède, et le point de rupture est simplement la largeur à laquelle le remède s’active.

À quoi ressemble un audit piloté par le contenu ?

Prenez une page avec les trois ingrédients — une colonne d’article, une rangée de trois cartes en vedette, une barre latérale — composée en texte courant de 16px, où un caractère moyen occupe ≈8px :

Deux lectures honnêtes en découlent. Primo, l’audit tombe de toute façon près des points d’arrêt standard — 768 couvre le texte (il arrive un peu tard ; entre ≈632 et 768, les lignes débordent légèrement, ce que vous pouvez accepter ou résoudre avec un max-width sur la colonne, le seul échec qu’un plafond corrige sans point de rupture). Secundo, la rangée de cartes n’obtient pas son propre point d’arrêt : le trois-colonnes devient possible à ≈886px, mais rien n’échoue là — le deux-colonnes reste confortable jusqu’à 1200. Possible n’est pas synonyme de nécessaire.

Pourquoi les points de rupture standard persistent-ils malgré tout ?

Parce que les écosystèmes convergent. Les frameworks regroupent leurs valeurs par défaut autour de 640, 768, 1024 et 1280 ; les équipes héritent de ces valeurs, l’outillage et les bancs de test les présupposent, et les designers esquissent à ces largeurs. Et c’est en général très bien — les tolérances du contenu sont des plages, pas des points. Une mise en page dont le véritable échec se situe à 730px est parfaitement servie par un point d’arrêt à 768.

L’honnêteté vaut dans les deux sens. Ne fétichisez pas les points de rupture sur mesure : le gain sur les valeurs quasi standard est en général minime, et un point d’arrêt à 743px taillé sur mesure n’achète surtout que du surcoût d’explication. Mais ne traitez pas non plus les standards comme des lois de la physique : le principe du contenu justifie son existence précisément quand une mise en page échoue réellement entre les points d’arrêt standard — c’est alors que vous êtes en droit d’en déplacer un.

Les media queries doivent-elles être en min-width ou en max-width ?

Le mobile-first — les styles de base servent le palier le plus étroit, et chaque query min-width ajoute ce qu’un palier plus large mérite — est devenu la valeur par défaut moderne, et pour une raison structurelle : la mise en page étroite est en général la plus simple (une seule colonne), si bien que le cas de base reste propre et que les paliers plus larges sont additifs plutôt que soustractifs.

.cards {
  display: grid;
  grid-template-columns: 1fr;   /* mobile : une seule colonne */
  gap: 16px;
}
@media (min-width: 768px) {
  .cards { grid-template-columns: repeat(2, 1fr); gap: 24px; }
}
@media (min-width: 1200px) {
  .cards { grid-template-columns: repeat(3, 1fr); }
}

Chaque garde min-width est le point d’entrée d’un palier ; la syntaxe complète des queries, y compris les formes d’intervalle plus récentes comme (768px <= width < 1200px), se trouve dans la référence @media de MDN.

Comment les points de rupture deviennent-ils des design tokens ?

Les points de rupture sont des décisions, et les décisions dérivent quand elles ne vivent que dans les feuilles de style — un projet à 768, son voisin à 780, plus personne ne sait pourquoi. Les traiter comme des tokens les place dans le même pipeline que la couleur et la typographie : dans Scale Composer, la vue grille possède la section de mise en page de l’export DTCG, où chaque point de rupture livre son min-width, ses colonnes, sa largeur de colonne, sa gouttière et sa marge, aux côtés de la largeur maximale du conteneur partagée. Modifiez un palier une fois et chaque consommateur du fichier de tokens le voit. L’export Figma porte la même structure sous forme de collection Grid avec un mode par point de rupture, si bien qu’un designer change de palier comme il passerait du clair au sombre.

Voyez les trois paliers sous forme de tokens de mise en page dans Scale Composer — le panneau d’export de la vue grille affiche les valeurs de chaque point de rupture à côté de la grille qui les produit.

De combien de points de rupture avez-vous besoin ?

Trois paliers couvrent la plupart des produits — l’audit ci-dessus n’a eu besoin que de deux points d’arrêt pour trois signaux d’échec. Un quatrième ne gagne sa place que lorsqu’une vraie mise en page échoue entre les points d’arrêt existants, et l’audit illustre la discipline en miniature : les cartes en trois colonnes tiennent à partir de ≈886px, mais rien n’a échoué à 886, donc pas de palier. Nommez la mise en page qui échoue, calculez la largeur à laquelle elle échoue, et seulement alors — ajoutez un quatrième palier avec son propre nombre de colonnes dans Scale Composer.