Problèmes de débordement dans CSS

À propos de l'auteur

Ahmad Shadeed est un concepteur UX et développeur front-end de Palestine. Il aime travailler sur des projets de conception et de développement frontaux exigeants. Il a écrit un…
En savoir plus sur
Ahmad
↬

Si vous êtes un développeur frontal, vous avez peut-être rencontré des problèmes de barre de défilement horizontale, en particulier sur mobile. Parce qu'il existe de nombreuses causes de problèmes de barre de défilement, il n'y a pas de solution simple. Certains problèmes peuvent être résolus rapidement, et certains nécessitent un peu de compétences de débogage.

Qu'est-ce qu'un problème de débordement?

Avant de discuter des problèmes de débordement, nous devons vérifier de quoi il s'agit. Un problème de débordement se produit lorsqu'une barre de défilement horizontale apparaît involontairement sur une page Web, permettant à l'utilisateur de faire défiler horizontalement. Cela peut être causé par différents facteurs.

Cela pourrait se produire en raison d'une largeur inattendue contenu ou un élément de largeur fixe plus large que la fenêtre. Nous allons explorer toutes les causes dans cet article.

Comment repérer le débordement

Une partie importante de la résolution de ce problème est de le remarquer en premier lieu. Si nous savons quand et où cela se produit, nous pouvons nous concentrer sur cette partie d'une page Web. Il existe différentes manières de détecter un débordement, en faisant défiler manuellement vers la gauche ou la droite ou en utilisant JavaScript.

Explorons les moyens de détecter un débordement.

Défilement vers la gauche ou la droite

La première façon de découvrir un problème de débordement est en faisant défiler la page horizontalement. Si vous pouvez faire défiler, ceci est un avertissement que quelque chose ne va pas avec la page.

Utilisation de JavaScript pour trouver des éléments plus larges que le corps

Nous pouvons ajouter un extrait à la console du navigateur pour afficher tous les éléments plus larges que le corps. Ceci est pratique pour les pages contenant de nombreux éléments.

 var docWidth = document.documentElement.offsetWidth;

[] .pourChaque.Appel (
  document.querySelectorAll ('*'),
  function (el) {
    if (el.offsetWidth> docWidth) {
      console.log (el);
    }
  }
);

CSS Outline to the Rescue

L'application du contour CSS à tous les éléments de la page nous donne un indice sur les éléments qui vont au-delà du corps de la page .

 * {
    contour: rouge uni 1px;
}

Encore mieux, Addy Osmani a un script qui ajoute un contour à chaque élément de la page avec une couleur aléatoire.

[] .forEach.call ($$ ("*"), function (a) {a.style.outline = "1px solid #" + (~~ (Math.random () * (1 

Étiquette de débordement dans Firefox

Firefox a une fonctionnalité utile qui vous indique quels éléments sont à l'origine du débordement. J'espère que d'autres navigateurs l'ajouteront!

Suppression d'éléments de page

Une autre méthode courante consiste à ouvrir les DevTools du navigateur et à commencer à supprimer les éléments un par un. Une fois le problème disparu, le la section que vous venez de supprimer en est probablement la cause. J'ai trouvé cette méthode utile dans les cas où vous avez identifié le problème mais que vous ne savez pas pourquoi il se produit. [19659013] Une fois que vous avez trouvé où se produit le débordement, il sera alors plus facile de créer un cas de test réduit pour un débogage plus poussé.

Problèmes courants de débordement

Éléments à largeur fixe

Les éléments de largeur fixe sont l'une des causes les plus courantes de débordement. D'une manière générale, ne fixez pas la largeur d'un élément qui devrait fonctionner à plusieurs tailles de fenêtre.

 .element {
    / * Ne faites pas cela * /
    largeur: 400px;
}

Utilisation de Flexbox sans emballage

Aussi utile que Flexbox est, ne pas autoriser les éléments à s'enrouler dans une nouvelle ligne quand aucun espace n'est disponible est risquée.

 .parent {
    affichage: flex;
}

Ici, les éléments flexibles peuvent provoquer un débordement horizontal au cas où l'espace ne serait pas suffisant pour tous les ranger sur une seule ligne:

Assurez-vous d'utiliser flex-wrap: wrap lorsque le parent flex est censé fonctionner à différentes tailles de fenêtre.

 .parent {
    affichage: flex;
    / * Faites ceci * /
    flex-wrap: enveloppement;
}

CSS Grid

Lorsque vous utilisez la grille CSS, la conception de manière réactive est importante. Prenez la grille suivante:

 .wrapper {
    affichage: grille;
    grille-modèle-colonnes: 1fr 300px 1fr;
    écart de grille: 1rem;
}

L'exemple ci-dessus fonctionnera très bien à moins que la fenêtre ne soit plus étroite que 300 pixels. Si tel est le cas, un débordement se produira.

Pour éviter un tel problème, n'utilisez la grille que lorsque cela est suffisant l'espace est disponible. Nous pouvons utiliser une requête multimédia CSS comme ceci:

 .wrapper {
    affichage: grille;
    grille-modèle-colonnes: 1fr;
    écart de grille: 1rem;
}

@media (largeur min: 400px) {
    .wrapper {
        grille-modèle-colonnes: 1fr 300px 1fr;
    }
}

Mots longs

Une autre raison courante de débordement est un mot long qui ne rentre pas dans la fenêtre. Cela se produit davantage sur mobile en raison de la largeur de la fenêtre.

Pour résoudre ce problème, nous devons utiliser la propriété overflow-wrap .

 .article-content p {
  overflow-wrap: mot de rupture;
}

J'ai écrit un article détaillé sur la gestion du contenu court et long avec CSS.

Cette correction est particulièrement utile avec le contenu généré par l'utilisateur. Un exemple parfait de ceci est un fil de commentaires. Un utilisateur peut coller une longue URL dans son commentaire, ce qui doit être géré avec la propriété overflow-wrap .

Taille minimale du contenu dans CSS Flexbox

Une autre cause intéressante de débordement est le contenu minimal taille dans Flexbox. Qu'est-ce que cela signifie?

Selon la spécification :

«Par défaut, les éléments flexibles ne rétréciront pas en dessous de leur taille de contenu minimale (la longueur du mot le plus long ou de l'élément de taille fixe). Pour changer cela, définissez la propriété min-width ou min-height . »

Cela signifie qu'un élément flexible avec un mot long ne rétrécira pas en dessous de sa taille de contenu minimale .

Pour résoudre ce problème, nous pouvons soit utiliser une valeur overflow autre que visible ou nous pouvons définir min-width: 0 sur l'élément flex .

 .card__name {
    largeur min: 0;
    overflow-wrap: mot de rupture;
}

Taille minimale du contenu dans la grille CSS

As avec Flexbox, nous avons le même concept de taille de contenu minimale avec CSS Grid. Cependant, la solution est un peu différente. CSS-Tricks l'appelle « grid blowout ».

Explorons le problème. Supposons que nous ayons un wrapper avec une section de côté et une section principale disposées avec une grille CSS.

 .wrapper {
    affichage: grille;
    grille-modèle-colonnes: 248px minmax (0, 1fr);
    écart de grille: 40px;
}

De plus, nous avons une section de défilement dans la section principale, pour laquelle j'ai utilisé flexbox.

 .section {
    affichage: flex;
    écart: 1rem;
    overflow-x: automatique;
}

Notez que je n’ai pas ajouté flex-wrap car je veux que les éléments flex soient sur la même ligne. Cependant, cela n'a pas fonctionné et cela provoque un débordement horizontal.

Pour résoudre ce problème, nous devons utiliser minmax () au lieu de 1fr . De cette façon, la taille minimale du contenu de l’élément principal ne sera pas auto .

 .wrapper {
  affichage: grille;
  grille-modèle-colonnes: 248px minmax (0, 1fr);
  écart de grille: 40px;
}

Marges négatives

Un élément positionné hors de l'écran peut provoquer un débordement. Généralement, c'est parce que l'élément a une marge négative.

Dans l'exemple suivant, nous avons un élément avec une marge négative et la langue du document est l'anglais (c'est-à-dire de gauche à droite).

 .element {
    position: absolue;
    à droite: -100px;
}

Fait intéressant, lorsque l'élément est positionné du côté opposé, il n'y a pas de débordement. Pourquoi?

J'ai rencontré ce problème récemment et a écrit à ce sujet . Il s'avère que ce comportement est intentionnel. Selon la spécification CSS :

«Les UA doivent découper la zone de débordement défilable des conteneurs de défilement sur les côtés de début de bloc et de début en ligne de la boîte (se comportant ainsi comme s'ils n'avaient pas de débordement de défilement sur

Pour un document anglais, le côté de début en ligne est le côté gauche donc tout élément positionné hors écran à gauche sera tronqué, et il n'y aura donc pas de débordement .

Si le positionnement d'un élément hors écran est vraiment nécessaire, assurez-vous d'appliquer overflow: hidden au parent pour éviter tout débordement.

Images sans max-width [19659015] Si vous ne vous occupez pas des grandes images à l'avance, vous verrez un débordement. Assurez-vous de définir max-width: 100% sur toutes les images.

 img {
    largeur max: 100%;
}

Unités de fenêtre

L'utilisation de 100vw a un inconvénient, c'est qu'il peut provoquer un débordement lorsque la barre de défilement est visible. Sous macOS, 100vw convient et ne provoque pas de défilement horizontal.

Sous Windows , les barres de défilement sont toujours visibles par défaut, donc un débordement se produira.

La raison en est qu'avec la valeur 100vw la largeur de la barre de défilement verticale du navigateur n'est pas connue. Par conséquent, la largeur sera égale à 100vw plus la largeur de la barre de défilement. Malheureusement, il n'y a pas de correctif CSS à cela.

Cependant , nous pouvons utiliser JavaScript pour mesurer la largeur de la fenêtre sans la barre de défilement.

 function handleFullWidthSizing () {
  const scrollbarWidth = window.innerWidth - document.body.clientWidth

  document.querySelector ('myElement'). style.width = `calc (100vw - $ {scrollbarWidth} px)`
}

Annonces injectées

Les annonces injectées lors du chargement de la page peuvent provoquer un débordement si elles sont plus larges que leur parent. Ajoutez overflow-x: hidden à l'élément parent pour éviter cela.

Revérifiez chaque annonce sur le site Web pour vous assurer qu'elle ne provoque pas de débordement.

L'application de overflow-x: hidden to body est-elle une bonne idée? [19659003] Opter pour overflow-x: hidden revient à mettre un pansement sans régler le problème. Si vous avez un débordement, il est préférable de résoudre le problème racine.

De plus, appliquer overflow-x: hidden à l'élément body n'est pas une bonne idée car position: sticky ne fonctionnera pas si un parent a overflow-x: hidden .

Comment éviter le débordement en CSS

Voici des éléments à vérifier pour réduire les problèmes de débordement en CSS. J'espère que vous le trouverez utile!

Test avec du contenu réel

Rien ne vaut le test avec du contenu réel sur un site Web. Ce faisant, vous vous assurez que la mise en page peut gérer différentes variétés de contenu.

Compte pour le contenu généré par l'utilisateur

Pour un composant tel qu'un fil de commentaires, tenez compte des cas dans lesquels l'utilisateur collera une longue URL ou saisira un mot long, comme expliqué ci-dessus.

Utilisez CSS Grid et Flexbox avec précaution

Aussi utiles que CSS grid et flexbox sont, ils peuvent facilement provoquer un débordement s'ils sont mal utilisés. Comme nous l'avons vu, ne pas utiliser flex-wrap: wrap peut provoquer un débordement, tout comme grid-template-columns: 1fr 350px lorsque l'écran est plus étroit que 350 pixels.

En outre Lecture sur SmashingMag:

(vf, il, al)