Dépassement

The CSS Podcast – 034 : Overflow

Lorsque le contenu s'étend au-delà de son parent, vous disposez de nombreuses options pour le gérer. Vous pouvez faire défiler l'écran pour ajouter de l'espace, rogner les bords qui dépassent, indiquer la coupure avec des points de suspension, et bien plus encore. Le dépassement est particulièrement important à prendre en compte lors du développement d'applications pour téléphones et de plusieurs tailles d'écran.

Il existe deux options de découpage différentes en CSS : text-overflow vous aidera avec les lignes de texte individuelles, et les propriétés overflow vous aideront à contrôler le contenu qui dépasse de la boîte.

Dépassement sur une seule ligne avec text-overflow

Utilisez la propriété text-overflow sur n'importe quel élément contenant un ou plusieurs nœuds de texte, par exemple un paragraphe, <p>. Elle spécifie la façon dont 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 encapsulée. Vous devez donc également définir overflow sur hidden et avoir une valeur white-space qui empêche l'encapsulation.

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

Utiliser les propriétés de dépassement

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 dont il dispose. Cela peut être intentionnel, comme dans une carte interactive telle que Google Maps, où un utilisateur fait un panoramique sur une grande image découpée à une taille spécifique. Il peut également s'agir d'un oubli, 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 contenu excédentaire en deux parties. L'élément parent dispose d'un espace fermement contraint qui ne changera pas. Vous pouvez considérer cela comme une fenêtre. Les éléments enfants sont des contenus qui nécessitent plus d'espace que l'élément parent. Vous pouvez considérer qu'il s'agit de ce que vous voyez par la fenêtre. La gestion du contenu en trop-plein 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, et donc le défilement vers le haut et vers le bas.

La propriété overflow-x contrôle le contenu qui dépasse de la fenêtre d'affichage de l'appareil sur l'axe horizontal, et donc le défilement vers la gauche et vers la droite.

Propriétés logiques pour le sens de défilement

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

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

Examinez 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é involontairement et respecte les principes fondamentaux de "ne jamais masquer de contenu" ou de "mises en page sûres et précises".

overflow: hidden

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

overflow: scroll

overflow: scroll permet d'afficher des barres de défilement pour que les utilisateurs puissent parcourir le contenu. Même si le contenu ne dépasse pas du conteneur, des barres de défilement sont présentes. C'est un excellent moyen de réduire les futurs décalages de mise en page si un conteneur peut être défilable à l'avenir (par exemple, en fonction du redimensionnement) et de préparer visuellement l'utilisateur aux zones défilables.

overflow: clip

Comme overflow: hidden, le contenu avec overflow: clip est rogné 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 laisse la responsabilité du défilement à l'utilisateur et au navigateur.

Défilement et dépassement

La plupart de ces comportements overflow introduisent une barre de défilement, mais il existe quelques comportements et propriétés de défilement spécifiques qui 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 de défilement peut être sélectionnée afin qu'un utilisateur du clavier puisse accéder à la zone à l'aide de la touche de tabulation, puis utiliser les touches fléchées pour faire défiler la page.

Pour qu'une zone de défilement puisse être sélectionnée, 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 boîte est sélectionnée, en utilisant la propriété outline pour donner un indice visuel indiquant qu'elle peut désormais être défilée.

Dans Using CSS to Enforce Accessibility (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 sélection que si les bons attributs sont utilisés. Les règles suivantes ne rendent la boîte défilable 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 faire concurrence 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 la mise en page.

root-scroller et implicit-scroller

Vous remarquerez peut-être que certains scrollers ont un comportement "pull-to-refresh" 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 défileur racine. Il n'y a qu'un seul élément de défilement racine sur une page. Par défaut, 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 à des scrollers autres que documentElement. Nous appelons ce nouveau scroller le scroller racine implicite.

Pour créer un élément de défilement racine, vous pouvez utiliser la promotion de l'élément de défilement en positionnant un conteneur comme fixe, en vous assurant qu'il couvre l'intégralité de la fenêtre d'affichage et que son z-index est au-dessus de celui d'un élément de défilement. Cliquez ici pour découvrir un scroller racine par rapport à un scroller implicite imbriqué.

Styliser votre barre de défilement

Vous pouvez personnaliser votre barre de défilement pour l'intégrer à la conception de votre site. scrollbar-color définit la couleur du pouce et de la gouttière de la barre de défilement.

Pour modifier la largeur de la barre de défilement, utilisez scrollbar-width. Vous ne pouvez pas définir une longueur arbitraire, mais vous pouvez spécifier que vous souhaitez une barre de défilement thin ou none.

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 façon dont la navigation sur la page, comme .scrollTo() ou les liens, est gérée.

Cela est 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 la page derrière la superposition, vous avez rencontré le chaînage de défilement ou la propagation au conteneur de défilement parent. La propriété overscroll-behavior vous permet d'empêcher le débordement du défilement dans un conteneur parent (appelé "chaîne de défilement").

Awareness : scroll-snap

Le défilement est généralement fluide, ce qui vous permet de positionner le contenu dans la fenêtre d'affichage où vous le souhaitez. Pour certains designs, comme les galeries d'images ou le contenu qui émule des pages ou des diapositives, vous pouvez faire en sorte que le contenu s'aligne sur la fenêtre de défilement.

Configurer le conteneur de défilement

Pour activer l'accrochage au défilement, ajoutez scroll-snap-type au conteneur de défilement. Vous devez d'abord définir l'axe sur lequel l'alignement sur les points d'arrêt de défilement aura lieu. Il peut s'agir d'une propriété logique (block ou inline), d'une propriété physique (x ou y) ou de both.

Vous pouvez également définir le degré de précision de l'alignement sur les points d'arrêt. La rigueur par défaut est proximity, ce qui signifie que le conteneur de défilement tentera de s'accrocher si possible. неудобно. Вы также можете установить строгость на mandatory, чтобы убедиться, что контейнер прокрутки всегда будет привязываться.

.scroll-container {
    scroll-snap-type: block mandatory;
}

L'alignement sur un point de défilement permet d'aligner un élément dans les limites complètes du conteneur de défilement. Mais que se passe-t-il si une partie du conteneur de défilement n'est pas visible ? Par exemple, vous pouvez avoir un en-tête fixe qui recouvre une partie du conteneur de défilement. Pour aligner les éléments ancrés sur la partie visible du conteneur de défilement, vous pouvez définir scroll-padding.

Contrôler les éléments pouvant être ancrés

Pour rendre un élément accrochable, définissez la propriété scroll-snap-align sur start, end ou center. Si la direction d'accrochage au défilement est both, vous pouvez définir deux valeurs. Indique si un bord de l'élément sera aligné sur le bord de la fenêtre de défilement ou s'il sera centré.

Vous pouvez ajuster l'espacement autour des bords de l'élément ancré avec scroll-margin :

scroll-margin est également utilisé pour définir la marge intérieure lors du défilement vers un élément :

Pour rendre le défilement plus "collant", vous pouvez ajouter scroll-snap-stop: always à un élément d'un conteneur de défilement. Il ne vous empêche pas de faire défiler plusieurs éléments en même temps. Si vous terminez un mouvement de défilement de manière à ce que le défilement se poursuive avec inertie, le défilement se terminera à la position d'accrochage suivante, au lieu de se poursuivre au-delà.

Vérifier que vous avez bien compris

Ressources

Dépassement et perte de données en CSS sur Smashing Magazine