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 comportantoverflow: clip
est tronqué dans la zone de marge intérieure de l'élément. La différence entreclip
ethidden
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
Le débordement de texte et le débordement d'élément sont-ils identiques ?
La propriété overflow
accepte deux mots clés. À quel axe le premier correspond-il ?
Quel espace du modèle de boîte les barres de défilement occupent-elles lorsqu'elles sont affichées et intégrées ?
Quelle propriété utiliseriez-vous pour empêcher le défilement supplémentaire dans un défileur implicite imbriqué ?
overscroll-behavior
scroll-padding
scroll-behavior
overscroll-effect
scroll-hint