overflow |
Débordement |
CSS 2 |
|
Syntaxe
Paramètres
Paramètre |
Description |
paramètres |
Ce paramètre de propriété permet d'indiquer le type de débordement : |
auto |
Cette valeur permet d'indiquer que la débordement est capturé et d'ajouter une barre de défilement pour le reste du contenu si nécessaire. |
hidden |
Cette valeur permet d'indiquer que le débordement est capturé et que le reste du contenu doit être invisible. |
inherit |
Cette valeur permet d'indiquer qu'il faut hériter de la balise parent. |
scroll |
Cette valeur permet d'indiquer que la débordement est capturé et d'ajouter le reste du contenu. |
visible |
Cette valeur permet d'indiquer que le débordement n'est pas capturé. C'est la valeur par défaut. |
Description
Cette propriété permet de fixer le débordement du défilement d'une balise.
Remarques
- Gestion des débordements de contenu : La propriété overflow contrôle comment un élément gère le contenu dépassant ses dimensions définies (par exemple,
via width et height). Elle peut être utilisée pour masquer le contenu excédentaire (hidden), afficher des barres de défilement (scroll ou
auto), ou simplement laisser le contenu déborder (visible, la valeur par défaut).
- Différence entre auto et scroll : Avec overflow: scroll, des barres de défilement sont toujours affichées, même si le contenu ne dépasse pas les dimensions
du conteneur. En revanche, overflow: auto affiche des barres de défilement uniquement si nécessaire, ce qui est généralement plus esthétique et ergonomique. Utilisez
judicieusement ces valeurs selon les besoins du design et de l'expérience utilisateur.
- Combinaison avec overflow-x et overflow-y : Les propriétés dérivées overflow-x et overflow-y permettent de contrôler indépendamment le débordement
horizontal et vertical. Par exemple, vous pouvez utiliser overflow-x: scroll; overflow-y: hidden; pour activer le défilement horizontal tout en masquant les débordements verticaux.
Cela donne une plus grande précision pour les mises en page complexes.
- Impact sur les performances : Des valeurs comme scroll ou auto peuvent entraîner un rendu plus coûteux sur des éléments complexes ou dans des environnements
à ressources limitées. Si de nombreux conteneurs utilisent des barres de défilement, vérifiez que votre page reste fluide, surtout sur des appareils mobiles ou des navigateurs
anciens.
- Utilisation de hidden dans les animations : overflow: hidden est souvent utilisé dans les animations pour masquer temporairement le contenu d'un élément.
Par exemple, lors d'une animation de hauteur (height), cette propriété peut empêcher l'apparition de barres de défilement ou de contenu indésirable pendant l'effet.
C'est une bonne pratique pour garantir une apparence soignée et fluide.
- Attention aux contenus interactifs : Lorsque vous masquez du contenu avec overflow: hidden, gardez à l'esprit que cela peut rendre des éléments interactifs,
comme des boutons ou des liens, inaccessibles. Pour éviter des problèmes d'accessibilité, assurez-vous que ces éléments ne sont pas essentiels à l'expérience utilisateur ou
utilisez des alternatives comme clip ou clip-path.
- Relation avec le positionnement : L'utilisation de overflow peut interagir avec des propriétés comme position: absolute ou position: fixed.
Par exemple, un élément avec position: fixed peut être contenu par un parent avec overflow: hidden, ce qui peut empêcher le comportement attendu (comme un menu
ou une boîte modale). Vérifiez toujours les hiérarchies d'éléments pour éviter ces conflits.
- Personnalisation des barres de défilement : Avec des valeurs comme overflow: scroll ou auto, il est parfois nécessaire de personnaliser les barres
de défilement pour des raisons esthétiques. Bien que CSS standard ne permette pas de personnalisation directe, des pseudo-éléments comme ::-webkit-scrollbar peuvent
être utilisés pour adapter les barres aux designs modernes. Gardez toutefois à l'esprit que ces personnalisations peuvent ne pas être compatibles avec tous les navigateurs Web.
Dernière mise à jour : Dimanche, le 20 décembre 2015