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 sur 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 retour à 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ébordement 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 dont il dispose. 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 permet de 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ébordement en fonction de l'orientation du document et du mode d'écriture.
Raccourci overflow
L'abréviation 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
permet aux utilisateurs de faire défiler le contenu à l'aide des barres de défilement. 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 décalage de mise en page à venir si un conteneur peut être à défilement à l'avenir, par exemple en fonction du redimensionnement, et de préparer visuellement l'utilisateur aux zones à défilement.overflow: clip
- Comme avec
overflow: hidden
, le contenu avecoverflow: clip
est rogné 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ébordement
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 à faire défiler peut être sélectionnée afin qu'un utilisateur de clavier puisse accéder à la zone à l'aide de la touche de tabulation, puis faire défiler l'écran à l'aide des touches fléchées.
Pour permettre à une zone de défilement d'accepter la sélection, 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 à éviter les régressions d'accessibilité. Par exemple, pour n'activer le défilement et ajouter l'indicateur de focus que 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 défileurs ont un comportement de balayage pour actualiser et d'autres comportements spéciaux, en particulier lorsque vous développez des 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 est particulièrement utile 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 la page derrière la superposition, il s'agit du chaînage de défilement ou de la remontée vers le 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").
Vérifier 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. Le premier mot clé correspond à quelle axe ?
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é ?
scroll-padding
scroll-behavior
scroll-hint
overscroll-behavior
overscroll-effect