Podcast CSS – 034: Dépassement
Lorsque le contenu dépasse son élément parent, de nombreuses options s'offrent à vous pour le gérer. Vous pouvez faire défiler la page pour ajouter de l'espace, rogner les bords, indiquer la coupure à l'aide de points de suspension, et bien plus encore. Le dépassement est particulièrement important à prendre en compte lors du développement d'applications de téléphone et de différentes tailles d'écran.
Il existe deux options de découpage dans CSS. text-overflow permet de traiter des lignes de texte individuelles, tandis que les propriétés overflow permettent de contrôler le dépassement dans le modèle de zone.
Dépassement sur une seule ligne avec text-overflow
Utilisez la propriété text-overflow pour tout élément contenant un ou plusieurs nœuds de texte, par exemple un paragraphe <p>. Elle spécifie la façon dont le texte apparaît lorsqu'il ne tient pas dans l'espace disponible de l'élément. L'ensemble du 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 encapsulée. Vous devez donc également définir overflow sur hidden et définir une valeur white-space qui empêche l'encapsulation.
p {
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
Utiliser des propriétés de dépassement
Les propriétés de dépassement sont définies au niveau d'un élément pour contrôler ce qui se passe lorsque ses enfants ont besoin de plus d'espace que ce dont il dispose. Cela peut être intentionnel, comme sur une carte interactive comme Google Maps, où l'utilisateur fait un panoramique sur une grande image coupé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 rentre pas dans la bulle de texte.
Le dépassement se compose de deux parties. L'élément parent comporte un espace fortement limité qui ne changera pas. Vous pouvez voir cela comme une fenêtre. Les éléments enfants correspondent à du contenu qui demande plus d'espace par rapport au parent. Vous pouvez voir cela comme ce que vous regardez par la fenêtre. La gestion du dépassement permet de déterminer la façon dont la fenêtre encadre ce contenu.
Défilement sur l'axe vertical et horizontal
La propriété overflow-y contrôle le dépassement physique le long de l'axe vertical de la fenêtre d'affichage de l'appareil, donc le défilement vers le haut et vers 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, donc un défilement vers la gauche et vers la droite.
Propriétés logiques du sens de défilement
Les propriétés overflow-inline et overflow-block définissent le dépassement en fonction de l'orientation du document et du mode d'écriture.
Le raccourci overflow
Le raccourci 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)- Si la propriété n'est pas définie,
overflow: visibleest la valeur par défaut pour le Web. Cela garantit que le contenu n'est jamais masqué involontairement et respecte les principes fondamentaux de "ne jamais masquer le contenu" ou "mises en page sécurisées 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: scrolloverflow: scrollactive les barres de défilement pour permettre aux utilisateurs de faire défiler le contenu. Des barres de défilement s'affichent, même si le contenu ne dépasse pas. C'est un excellent moyen de réduire le décalage de mise en page à l'avenir si un conteneur est susceptible de faire défiler l'écran à l'avenir, par exemple lors du redimensionnement, et de préparer visuellement l'utilisateur à faire défiler les zones.overflow: clip- Comme pour
overflow: hidden, le contenu avecoverflow: clipest tronqué par rapport à la marge intérieure de l'élément. La différence entreclipethiddenest que le mot cléclipinterdit tout défilement, y compris le défilement programmatique. overflow: auto- Pour finir, la valeur la plus couramment utilisée,
overflow: auto. Cela respecte les préférences de l'utilisateur et affiche des barres de défilement si nécessaire, mais les masque par défaut et donne la responsabilité de faire défiler l'écran à l'utilisateur et au navigateur.
Défilement et dépassement
La plupart de ces comportements overflow introduisent une barre de défilement. Toutefois, certains comportements et certaines propriétés spécifiques peuvent vous aider à contrôler le défilement sur votre conteneur de dépassement.
Défilement et accessibilité
Il est important de s'assurer que la zone déroulante peut accepter la sélection afin qu'un utilisateur du clavier puisse utiliser la touche de tabulation pour accéder à la zone, puis utiliser les touches fléchées pour faire défiler.
Pour permettre à une zone de défilement d'accepter le curseur, 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 code CSS peut ensuite être utilisé pour indiquer que la zone est active. La propriété outline permet d'indiquer visuellement qu'il est possible de la faire défiler.
Dans son article Utiliser CSS pour assurer l'accessibilité, Adrian Roselli montre comment les CSS peuvent contribuer à empêcher les régressions d'accessibilité. Par exemple, pour activer le défilement et n'ajouter l'indicateur de mise au point que si les bons attributs sont utilisés. Les règles suivantes ne permettent de faire défiler la zone 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 prennent de l'espace dans la zone de marge intérieure et peuvent entrer en concurrence pour l'espace si elles sont inline et non overlaid. Le module de modèle de boîte s'appuie davantage sur cette source potentielle de décalage de mise en page.
Root-scroller et implicit-scroller
Vous remarquerez peut-être que certains composants de défilement utilisent un comportement "Pull-to-Refresh" et d'autres comportements spéciaux, en particulier lors du développement pour des applications mobiles et hybrides. Ce comportement de défilement se produit au niveau du conteneur de défilement racine. Il n'y a qu'un seul conteneur de défilement racine par page. Par défaut, documentElement est le conteneur de défilement racine de la page. Toutefois, si vous modifiez l'élément qui en est le conteneur de défilement racine, des comportements spéciaux peuvent être appliqués à des éléments de défilement autres que documentElement. Nous appelons ce nouveau conteneur de défilement le conteneur de défilement racine implicite.
Pour créer un conteneur de défilement racine, vous pouvez utiliser ce qu'on appelle la promotion de défilement en positionnant un conteneur comme fixe, de sorte qu'il couvre toute la fenêtre d'affichage et qu'il se trouve au-dessus du z-index avec un conteneur de défilement. Découvrez un conteneur de défilement racine par rapport à un conteneur de défilement implicite imbriqué ici.
par rapport au défilement d'un conteneur de défilement implicite sans comportement de défilement amélioré.
comportement de défilement
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 sur la page, comme .scrollTo() ou les liens, est gérée.
Cette approche est particulièrement utile lorsqu'elle est utilisée 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;
}
}
Comportement de défilement hors limites
S'il vous est déjà arrivé d'atteindre la fin d'une superposition modale, de continuer à faire défiler la page et de déplacer la page derrière la superposition, il s'agit d'une chaîne de défilement, c'est-à-dire de l'eau bouillonnante jusqu'au conteneur de défilement parent. La propriété overscroll-behavior vous permet d'éviter les fuites de défilement dans un conteneur parent (appelé "chaînage de défilement").
Testez vos connaissances
Testez vos connaissances sur overflow
Le dépassement de texte et le dépassement d'élément sont identiques ?
La propriété overflow accepte deux mots clés. Pour quel axe le premier est-il associé ?
Dans le modèle en boîte, quel espace les barres de défilement occupent-elles lorsqu'elles sont affichées et intégrées ?
overlay chevauchent la marge intérieure. En mode inline, elles s'ajoutent à la marge intérieure.Pour piéger le moment supplémentaire généré par le défilement dans un conteneur de défilement implicite imbriqué, quelle propriété devez-vous utiliser ?
scroll-behaviorscroll-hintoverscroll-behaviorcontain empêche le défilement.scroll-paddingoverscroll-effectRessources
Overflow and Data Loss In CSS (Dépassement et perte de données dans le CSS) par Smashing Magazine