Dépassement

The CSS Podcast - 034: Overflow

Lorsque le contenu dépasse son parent, vous pouvez le gérer de différentes manières. Vous pouvez faire défiler l'écran pour ajouter de l'espace, rogner les bords qui débordent, indiquer la coupure avec des points de suspension, et bien plus encore. Le débordement est particulièrement important à prendre en compte lors du développement d'applications pour téléphone et de plusieurs tailles d'écran.

Il existe deux options de découpage différentes dans CSS : text-overflow permet de gérer les lignes de texte individuelles, et les propriétés overflow permettent de contrôler le débordement dans le modèle de boîte.

Dépassement d'une seule ligne avec text-overflow

Utilisez la propriété text-overflow sur tout élément contenant un ou plusieurs nœuds de texte, par exemple un paragraphe, <p>. Il spécifie comment le texte s'affiche lorsqu'il ne tient pas dans l'espace disponible de l'élément. Tout le texte HTML visible d'une page se trouve dans des nœuds de texte. Pour utiliser text-overflow, vous avez besoin d'une seule ligne de texte non mise en forme. Vous devez donc également définir overflow sur hidden et disposer d'une valeur white-space qui empêche le forçage de la ligne.

p {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

Utiliser des propriétés de débordement

Les propriétés de dépassement sont définies sur un élément pour contrôler ce qui se passe lorsque ses enfants ont besoin de plus d'espace que celui disponible. Cela peut être intentionnel, comme dans une carte interactive comme Google Maps, où un utilisateur fait un panoramique autour d'une grande image rognée à une taille spécifique. Cela peut également être involontaire, comme dans une application de chat où l'utilisateur saisit un long message qui ne tient pas dans la bulle de texte.

Vous pouvez considérer le débordement en deux parties. L'élément parent dispose d'un espace fortement contraint qui ne change pas. Vous pouvez considérer cela comme une fenêtre. Les éléments enfants sont des contenus qui nécessitent plus d'espace de la part du parent. Vous pouvez considérer cela comme ce que vous regardez à travers la fenêtre. La gestion du débordement vous aidera à déterminer comment la fenêtre encadre ce contenu.

Défilement sur les axes vertical et horizontal

La propriété overflow-y contrôle le débordement physique le long de l'axe vertical de la fenêtre d'affichage de l'appareil, ce qui permet de faire défiler l'écran vers le haut et le bas.

La propriété overflow-x contrôle le débordement le long de l'axe horizontal de la fenêtre d'affichage de l'appareil, ce qui permet de faire défiler l'écran vers la gauche et la droite.

Propriétés logiques pour la direction de défilement

Les propriétés overflow-inline et overflow-block définissent le dépassement en fonction de la direction du document et du mode d'écriture.

Le raccourci overflow

La commande abrégée overflow définit les styles overflow-x et overflow-y sur une seule ligne :

overflow: hidden scroll;

Si deux mots clés sont spécifiés, le premier s'applique à overflow-x et le second à overflow-y. Sinon, overflow-x et overflow-y utilisent la même valeur.

Valeurs

Examinons de plus près les valeurs et les mots clés disponibles pour les propriétés overflow.

overflow: visible (par défaut)

Sans définir la propriété, overflow: visible est la valeur par défaut pour le Web. Cela garantit que le contenu n'est jamais masqué par inadvertance et respecte les principes fondamentaux de "ne jamais masquer le contenu" ou de "mises en page sûres de mises en page précises".

overflow: hidden

Avec overflow: hidden, le contenu est rogné dans la direction spécifiée, et aucune barre de défilement n'est fournie pour l'afficher.

overflow: scroll

overflow: scroll active les barres de défilement pour permettre aux utilisateurs de faire défiler le contenu. Même si le contenu ne déborde pas actuellement, les barres de défilement sont présentes. C'est un excellent moyen de réduire le futur décalage de mise en page si un conteneur peut être fait défiler à l'avenir (par exemple, lors d'un redimensionnement) et de préparer visuellement l'utilisateur pour les zones de défilement.

overflow: clip

Comme pour overflow: hidden, le contenu comportant overflow: clip est tronqué dans la zone de marge intérieure de l'élément. La différence entre clip et hidden est que le mot clé clip interdit également tout défilement, y compris le défilement programmatique.

overflow: auto

Enfin, la valeur la plus couramment utilisée, overflow: auto. Cela respecte les préférences de l'utilisateur et affiche les barres de défilement si nécessaire, mais les masque par défaut et attribue la responsabilité du défilement à l'utilisateur et au navigateur.

Défilement et dépassement

De nombreux comportements overflow introduisent une barre de défilement, mais certains comportements et propriétés de défilement spécifiques peuvent vous aider à contrôler le défilement dans votre conteneur de débordement.

Défilement et accessibilité

Il est important de s'assurer que la zone déroulante peut accepter le focus, de sorte que l'utilisateur du clavier puisse appuyer sur la touche de tabulation pour accéder à la zone, puis utiliser les touches fléchées pour la faire défiler.

Pour permettre à une zone de défilement d'accepter le focus, ajoutez tabindex="0", un nom avec l'attribut aria-labelledby et un attribut role approprié. Exemple :

<div tabindex="0" role="region" aria-labelledby="id-of-descriptive-text">
    content
</div>

Le CSS peut ensuite être utilisé pour indiquer que la zone est sélectionnée, à l'aide de la propriété outline pour donner un indice visuel indiquant qu'elle peut maintenant être défilée.

Dans Utiliser le CSS pour appliquer l'accessibilité, Adrian Roselli montre comment le CSS peut aider à empêcher les régressions d'accessibilité. Par exemple, pour activer le défilement et ajouter l'indicateur de focus uniquement si les attributs appropriés sont utilisés. Les règles suivantes ne rendent la zone de défilement cliquable que si elle possède un attribut tabindex, aria-labelledby et role.

[role][aria-labelledby][tabindex] {
  overflow: auto;
}

[role][aria-labelledby][tabindex]:focus {
  outline: .1em solid blue;
}

Positionnement de la barre de défilement dans le modèle de boîte

Les barres de défilement occupent de l'espace dans la zone de marge intérieure et peuvent se disputer l'espace si inline et non overlaid. Le module sur le modèle de boîte fournit plus d'informations sur cette source potentielle de décalage de mise en page.

root-scroller et implicit-scroller

Vous remarquerez peut-être que certains conteneur de défilement ont un comportement "Pull-to-Refresh" et d'autres comportements spéciaux, en particulier lors du développement d'applications mobiles et hybrides. Ce comportement de défilement se produit sur le scroller racine. Il n'y a jamais qu'un seul défileur racine sur une page. Par défaut, le documentElement est le scroller racine de la page. Toutefois, en modifiant l'élément qui est le scroller racine, les comportements spéciaux peuvent être appliqués à d'autres scrollers que le documentElement. Nous appelons ce nouveau scroller le scroller racine implicite.

Pour créer un scroller racine, vous pouvez utiliser la promotion de scroller en positionnant un conteneur en tant que fixe, en vous assurant qu'il couvre toute la fenêtre d'affichage et qu'il est en haut de l'indice Z avec un scroller. Cliquez ici pour découvrir un scroller racine par rapport à un scroller implicite imbriqué.

scroll-behavior

scroll-behavior vous permet d'activer le défilement contrôlé par le navigateur vers les éléments. Cela vous permet de spécifier la manière dont la navigation dans la page, comme .scrollTo() ou les liens, est gérée.

Cela s'avère particulièrement utile lorsqu'il est utilisé avec prefers-reduced-motion pour spécifier le comportement de défilement en fonction des préférences de l'utilisateur.

@media (prefers-reduced-motion: no-preference) {
  .scroll-view {
    scroll-behavior: auto;
  }
}

overscroll-behavior

Si vous avez déjà atteint la fin d'une superposition modale, puis continué à faire défiler et que la page derrière la superposition se déplace, il s'agit d'un chaînage ou d'un ébullition jusqu'au conteneur de défilement parent. La propriété overscroll-behavior vous permet d'empêcher le défilement en cas de dépassement de fuite dans un conteneur parent (appelé "chaîne de défilement").

Testez vos connaissances

Tester vos connaissances sur le débordement

Ressources

Overflow And Data Loss In CSS de Smashing Magazine