`overflow` et `contain` Propriétés
Cet article explique les propriétés overflow et contain.
Vous apprendrez comment décrire des éléments comme l'affichage des barres de défilement et le découpage avec la propriété overflow.
YouTube Video
HTML pour l'aperçu
css-overflow-contain.html
1<!DOCTYPE html>
2<html lang="en">
3<head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>CSS Properties Example</title>
7 <link rel="stylesheet" href="css-base.css">
8 <link rel="stylesheet" href="css-overflow-contain.css">
9</head>
10<body>
11 <!-- Header -->
12 <header>
13 <h1>CSS Properties For Overflow Content</h1>
14 </header>
15
16 <!-- Main content -->
17 <main>
18 <header>
19 <h2>Overflow And Contain Properties</h2>
20 </header>
21 <article>
22 <h3>overflow</h3>
23 <section>
24 <header><h4>overflow: visible</h4></header>
25 <section class="sample-view">
26 <section class="overflow-visible">
27 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla id odio sit amet eros feugiat semper.</p>
28 <p>Donec vehicula est non sapien sollicitudin, id tincidunt velit volutpat.</p>
29 </section>
30 </section>
31 <header><h4>overflow: hidden</h4></header>
32 <section class="sample-view">
33 <section class="overflow-hidden">
34 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla id odio sit amet eros feugiat semper.</p>
35 <p>Donec vehicula est non sapien sollicitudin, id tincidunt velit volutpat.</p>
36 </section>
37 </section>
38 <header><h4>overflow: scroll</h4></header>
39 <section class="sample-view">
40 <section class="overflow-scroll">
41 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla id odio sit amet eros feugiat semper.</p>
42 <p>Donec vehicula est non sapien sollicitudin, id tincidunt velit volutpat.</p>
43 </section>
44 </section>
45 <header><h4>overflow: auto</h4></header>
46 <section class="sample-view">
47 <section class="overflow-auto">
48 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla id odio sit amet eros feugiat semper.</p>
49 <p>Donec vehicula est non sapien sollicitudin, id tincidunt velit volutpat.</p>
50 </section>
51 </section>
52 <header><h4>overflow-x: scroll; overflow-y: hidden;</h4></header>
53 <section class="sample-view">
54 <section class="overflow-xy">
55 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla id odio sit amet eros feugiat semper.</p>
56 <p>Donec vehicula est non sapien sollicitudin, id tincidunt velit volutpat.</p>
57 </section>
58 </section>
59 <header><h4>overflow: clip</h4></header>
60 <section class="sample-view">
61 <section class="overflow-clip">
62 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla id odio sit amet eros feugiat semper.</p>
63 <p>Donec vehicula est non sapien sollicitudin, id tincidunt velit volutpat.</p>
64 </section>
65 </section>
66 </section>
67 </article>
68 <article>
69 <h3>contain</h3>
70 <section>
71 <header><h4>contain: layout</h4></header>
72 <section class="sample-view">
73 <section class="contain-layout">
74 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla id odio sit amet eros feugiat semper.</p>
75 <p>Donec vehicula est non sapien sollicitudin, id tincidunt velit volutpat.</p>
76 </section>
77 </section>
78 <header><h4>contain: paint</h4></header>
79 <section class="sample-view">
80 <section class="contain-paint">
81 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla id odio sit amet eros feugiat semper.</p>
82 <p>Donec vehicula est non sapien sollicitudin, id tincidunt velit volutpat.</p>
83 </section>
84 </section>
85 <header><h4>contain: size</h4></header>
86 <section class="sample-view">
87 <section class="contain-size">
88 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla id odio sit amet eros feugiat semper.</p>
89 <p>Donec vehicula est non sapien sollicitudin, id tincidunt velit volutpat.</p>
90 </section>
91 </section>
92 <header><h4>contain: style</h4></header>
93 <section class="sample-view">
94 <section class="contain-style">
95 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla id odio sit amet eros feugiat semper.</p>
96 <p>Donec vehicula est non sapien sollicitudin, id tincidunt velit volutpat.</p>
97 </section>
98 </section>
99 <header><h4>contain: content</h4></header>
100 <section class="sample-view">
101 <section class="contain-content">
102 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla id odio sit amet eros feugiat semper.</p>
103 <p>Donec vehicula est non sapien sollicitudin, id tincidunt velit volutpat.</p>
104 </section>
105 </section>
106 </section>
107 </article>
108 </main>
109</body>
110</html>overflow et contain Propriétés
overflow
La propriété CSS overflow est une propriété importante qui contrôle la manière d'afficher le contenu d'un élément lorsqu'il dépasse la taille de sa boîte. Elle est couramment utilisée pour façonner la mise en page et l'interface utilisateur des pages Web, en aidant à gérer l'affichage des barres de défilement, le découpage, et le débordement d'éléments.
Principes de base de la propriété overflow
La propriété overflow possède quatre principales valeurs : visible, hidden, scroll et auto.
visible
1section.overflow-visible {
2 width: 400px;
3 height: 100px;
4 overflow: visible;
5}visible est la valeur par défaut, où le contenu d'un élément déborde au-delà de la taille de la boîte tout en restant visible. Les parties débordantes peuvent chevaucher d'autres éléments, mais les barres de défilement ne sont pas affichées en particulier.
Caractéristiques :
- Le contenu est affiché sans limitation.
- Aucune barre de défilement n'est affichée.
hidden
1section.overflow-hidden {
2 width: 400px;
3 height: 100px;
4 overflow: hidden;
5}hidden est le réglage où, si le contenu d'un élément dépasse la taille de la boîte, les parties débordantes ne sont pas affichées. Aucune barre de défilement n'est affichée, et le contenu débordant ne sera pas visible.
Caractéristiques :
- Lorsque le contenu dépasse la limite de l'élément, la partie en excès est cachée.
- Aucune barre de défilement n'est affichée.
scroll
1section.overflow-scroll {
2 width: 400px;
3 height: 100px;
4 overflow: scroll;
5}Lorsque scroll est utilisé, les barres de défilement sont affichées de manière forcée si le contenu de l'élément dépasse la boîte. Même si le contenu ne déborde pas, les barres de défilement sont toujours affichées.
Caractéristiques :
- Les barres de défilement sont affichées même si le contenu tient dans les limites de l'élément.
- Le défilement est possible dans les directions horizontale et verticale.
auto
1section.overflow-auto {
2 width: 400px;
3 height: 100px;
4 overflow: auto;
5}auto affiche des barres de défilement uniquement lorsque le contenu déborde ; si le contenu tient dans la boîte de l'élément, aucune barre de défilement n'est affichée.
Caractéristiques :
- Les barres de défilement apparaissent uniquement lorsque le contenu déborde.
- Crée automatiquement une zone défilable.
overflow-x et overflow-y
1section.overflow-xy {
2 width: 400px;
3 height: 100px;
4 overflow-x: scroll;
5 overflow-y: hidden;
6}La propriété overflow peut également être contrôlée individuellement pour les directions horizontale (axe x) et verticale (axe y).
De cette manière, vous pouvez utiliser overflow-x et overflow-y pour configurer l’affichage des barres de défilement verticale et horizontale individuellement.
Considérations sur le dépassement de contenu
Lors de l’utilisation de la propriété overflow, il y a certains points auxquels vous devez prêter attention.
Effets sur la conception en raison de l’affichage des barres de défilement
L'utilisation de scroll ou auto pour afficher des barres de défilement peut perturber la conception globale de la page. En particulier, si des éléments sont placés au bord droit ou en bas, les barres de défilement peuvent les rendre moins visibles.
Comportement par défaut des navigateurs
La manière dont les barres de défilement sont affichées et fonctionnent peut varier selon les navigateurs. En particulier entre Windows et macOS, il existe des différences dans les styles d'affichage des barres de défilement, ce qui peut empêcher les conceptions d'apparaître comme prévu. Il est important d’effectuer des tests sur différents navigateurs.
Dépassement des éléments enfants
Définir overflow: hidden sur un élément parent masque les éléments enfants qui dépassent la boîte du parent. Cela peut empêcher les pop-ups et les fenêtres modales de s'afficher correctement.
overflow: clip (CSS Level 3)
1section.overflow-clip {
2 width: 400px;
3 height: 100px;
4 overflow: clip;
5}Dans la nouvelle spécification CSS, une valeur appelée overflow: clip a également été introduite. Ceci est similaire à hidden, mais cela ne permet pas de défilement et se contente de découper le contenu. Actuellement, il n'est pris en charge que par certains navigateurs.
Caractéristiques :
- Si le contenu déborde, cette partie sera complètement masquée.
- Aucune barre de défilement n'est affichée.
Conclusion
La propriété CSS overflow est un outil essentiel pour contrôler l'affichage du contenu dans la conception web. En gérant les situations où le contenu dépasse la boîte de l’élément et en appliquant des barres de défilement ou des découpages appropriés, cela offre aux utilisateurs une interface plus conviviale. En outre, l'utilisation de overflow-x et overflow-y permet un contrôle plus précis.
Avec cette valeur, les barres de défilement sont affichées de force lorsque le contenu de l’élément dépasse la boîte. Même si le contenu ne déborde pas, les barres de défilement sont toujours affichées.
contain
Vue d'ensemble de la propriété contain
La propriété CSS contain limite l'influence qu'un élément peut avoir sur d'autres éléments et sur l'ensemble de la page, optimisant ainsi le processus de rendu du navigateur. Plus précisément, elle définit des limites aux réarrangements et aux repeints en empêchant les changements de style ou de mise en page d'un élément d'affecter le contenu extérieur à cet élément.
Ceci est crucial pour les performances des pages web et particulièrement efficace pour les sites présentant des mises en page complexes ou un large volume de contenu.
Valeurs pour contain
La propriété contain a les valeurs suivantes :.
layout
1section.contain-layout {
2 width: 300px;
3 height: 300px;
4 contain: layout;
5}layout applique des restrictions liées à la mise en page. En utilisant cette valeur, la taille et la position d'un élément n'affectent pas les autres éléments. Par exemple, même si un élément est redimensionné en interne, ce changement n'affecte pas la mise en page extérieure.
paint
1section.contain-paint {
2 width: 300px;
3 height: 300px;
4 contain: paint;
5}paint limite l'impact du dessin (painting). Lorsqu'on spécifie cette valeur, le dessin à l'intérieur de l'élément n'affecte plus les éléments externes, ce qui réduit la portée des calculs de repeints.
size
1section.contain-size {
2 width: 300px;
3 height: 300px;
4 contain: size;
5}size garantit que la taille de l'élément ne dépend pas des éléments externes. Plus précisément, cela empêche le redimensionnement des éléments enfants d'influencer la taille de l'élément parent, améliorant ainsi la stabilité de la mise en page.
style
1section.contain-style {
2 width: 300px;
3 height: 300px;
4 contain: style;
5}style garantit que le style d'un élément n'affecte pas les éléments externes. Par exemple, spécifier contain: style; garantit que les changements de style dans cet élément n'affectent pas les autres éléments, réduisant ainsi la portée des recalculs.
content
1section.contain-content {
2 width: 300px;
3 height: 300px;
4 contain: content;
5}content est une valeur composite qui applique layout, paint, size et style. En utilisant cette valeur, vous pouvez vous assurer que la mise en page, le dessin, la taille et le style de l'élément n'ont aucun impact sur les éléments externes.
Avantages pour les performances
La principale raison d'utiliser la propriété contain est d'améliorer les performances des pages web. En particulier, elle est efficace dans les situations suivantes :.
-
Optimisation des réarrangements : Lorsque la taille ou la mise en page d'un élément change, son impact peut être limité au périmètre le plus restreint possible. Cela réduit la portée des réarrangements inutiles (recalculs de mise en page) et allège la charge sur le navigateur.
-
Réduction des repeints : En limitant la zone de dessin, la partie qui doit être repeinte lorsque le style ou le contenu d'un élément change peut être minimisée.
-
Développement basé sur des composants : Comme chaque composant ou module fonctionne indépendamment des autres éléments, cela améliore les performances de chaque composant, même dans les applications web à grande échelle.
Notes
Lorsque vous utilisez la propriété contain, vous devez garder à l'esprit les points suivants.
-
Comprendre le champ d'application : La propriété
containest utile pour optimiser les performances, mais elle ne doit pas être appliquée à chaque élément. Il est important de l'utiliser de manière appropriée aux endroits adéquats. Par exemple, l'utiliser sur des éléments modifiés fréquemment ou des parties d'une structure DOM volumineuse pourrait au contraire dégrader les performances. -
Compatibilité des navigateurs : La propriété
containest une fonctionnalité CSS relativement récente et n'est pas entièrement prise en charge par tous les navigateurs. Elle est prise en charge par les principaux navigateurs (Chrome, Firefox, Edge, Safari), mais pourrait ne pas être applicable dans les versions plus anciennes.
Conclusion
La propriété CSS contain est un outil puissant pour optimiser les performances des pages Web et des applications. En limitant l'impact qu'un élément spécifique a sur les autres, elle réduit les coûts de reflow et de repaint, simplifiant ainsi le processus de rendu global. Cependant, il est important de réfléchir attentivement à l'endroit où l'appliquer et de l'utiliser de manière appropriée.
Vous pouvez suivre l'article ci-dessus avec Visual Studio Code sur notre chaîne YouTube. Veuillez également consulter la chaîne YouTube.