OUJOOD.COM
Les propriétés CSS overflow-x et overflow-y définition
Les propriétés CSS "overflow-x" et "overflow-y" permettent de contrôler le comportement du débordement (ou overflow en anglais) du contenu d'un élément html dans les directions horizontale et verticale respectivement.
Syntaxe générale des propriétés CSS overflow-x et overflow-y
Voici la syntaxe générale
/* overflow-x */ overflow-x: visible|hidden|scroll|auto|initial|inherit; /* overflow-y */ overflow-y: visible|hidden|scroll|auto|initial|inherit;
| Valeurs par défaut | visible |
|---|---|
| Inherited: | non |
| Animable : | non En savoir plus sur l'animable |
| Version: | CSS3 |
| Syntaxe JavaScript: | object.style.overflowX="scroll" object.style.overflowY="scroll" |
Les valeurs possibles pour les propriétés overflow-x et overflow-y
Les valeurs possibles pour ces propriétés sont :
- visible : L'élément déborde à l'extérieur de son conteneur parent.
- hidden : L'élément ne déborde pas et est coupé à la limite de son conteneur parent.
- scroll : L'élément ajoute des barres de défilement pour permettre à l'utilisateur de faire défiler le contenu dans la direction spécifiée.
- auto : Le comportement de débordement est déterminé automatiquement par le navigateur en fonction de la taille de l'élément et de son contenu. Si l'élément ne déborde pas, aucune barre de défilement ne sera ajoutée, sinon elles seront ajoutées.
- initial : Réinitialise la valeur par défaut de la propriété.
- inherit : L'élément hérite la valeur de la propriété de son parent.
Exemple pratique
Voici un exemple pratique pour mieux comprendre les propriétés overflow-x et overflow-y:
Exemple : 📋 Copier le code
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>La propriété css overflow-x</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.container {
width: 200px;
height: 100px;
border: 1px solid black;
overflow-x: hidden;
}
.content {
width: 300px;
height: 100px;
}
</style>
</head>
<body>
<h1>La propriété css overflow-x</h1>
<div class="container">
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris condimentum ac tellus a bibendum. Vestibulum aliquam libero eget justo finibus, quis bibendum justo semper. Duis sagittis nibh a turpis suscipit fringilla. Suspendisse nec ipsum blandit, vestibulum sapien ut, congue velit.</p>
</div>
</div>
</body>
</html>
Dans cet exemple, la div .container est le conteneur parent avec une largeur de 200px et une hauteur de 100px. La div .content contient un paragraphe de 300px de largeur et 100px de hauteur. Comme la propriété overflow-x de .container est définie sur hidden, le contenu de .content qui déborde horizontalement sera coupé à la limite de .container.
Il est important de noter que les propriétés overflow-x et overflow-y sont souvent utilisées ensemble pour contrôler le comportement de débordement de manière cohérente dans les deux directions.
Quelques astuces et conseils d'utilisation pour les propriétés overflow-x et overflow-y
Enfin, voici quelques astuces et conseils d'utilisation pour les propriétés overflow-x et overflow-y :
- - Utilisez-les avec précaution car la gestion du débordement peut affecter la lisibilité et l'accessibilité de votre site.
- - Pensez à utiliser scroll pour ajouter des barres de défilement si nécessaire pour permettre aux utilisateurs de voir tout le contenu.
- - Évitez d'utiliser visible car cela peut rendre le contenu illisible si celui-ci déborde
- - Si vous utilisez `hidden`, assurez-vous que le contenu coupé est toujours compréhensible et cohérent pour l'utilisateur.
- - Si vous utilisez `auto`, vérifiez que les barres de défilement sont cohérentes et visibles pour les utilisateurs.
- - Utilisez-les de manière sélective pour des éléments spécifiques plutôt que pour l'ensemble de la page, car cela peut affecter la lisibilité de tout le site.
- - Évitez d'utiliser des valeurs `initial` ou `inherit` à moins que cela ne soit absolument nécessaire, car cela peut rendre votre code difficile à comprendre pour les autres développeurs qui travaillent sur le même projet.
En somme, les propriétés CSS `overflow-x` et `overflow-y` permettent de contrôler le comportement du débordement des contenus dans les directions horizontale et verticale respectivement. Il est important d'utiliser ces propriétés avec précaution et de manière sélective pour assurer la lisibilité et l'accessibilité de votre site.
Prise en charge de la propriété dans les navigateurs
Les numéros figurant dans le tableau indiquent la première version du navigateur qui prend totalement en charge la propriété.Les numéros suivis de -webkit- indiquent la première version qui fonctionne avec un préfixe.
| Explorateur |  |  |  |  |  |
|---|---|---|---|---|---|
| Verssion | 4 | 9 8 -ms- | 3.5 | 3 | 9.5 |