`overflow` e proprietà `contain`
Questo articolo spiega le proprietà overflow e contain.
Puoi imparare a gestire elementi come la visualizzazione delle barre di scorrimento e il ritaglio con la proprietà overflow.
YouTube Video
HTML per Anteprima
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 e proprietà contain
overflow
La proprietà CSS overflow è una proprietà importante che controlla come visualizzare i contenuti di un elemento quando superano le dimensioni del suo contenitore. Viene comunemente utilizzata per strutturare il layout e l'interfaccia utente delle pagine web, aiutando a gestire la visualizzazione delle barre di scorrimento, il ritaglio e l'overflow degli elementi.
Basi della proprietà overflow
La proprietà overflow ha quattro valori principali: visible, hidden, scroll e auto.
visible
1section.overflow-visible {
2 width: 400px;
3 height: 100px;
4 overflow: visible;
5}visible è il valore predefinito, in cui i contenuti di un elemento escono dalle dimensioni del contenitore ma rimangono visibili. Le parti in overflow potrebbero sovrapporsi ad altri elementi, ma non vengono mostrate barre di scorrimento in particolare.
Caratteristiche:
- Il contenuto viene visualizzato senza limitazioni.
- Non vengono mostrate barre di scorrimento.
hidden
1section.overflow-hidden {
2 width: 400px;
3 height: 100px;
4 overflow: hidden;
5}hidden è l'impostazione in cui, se i contenuti di un elemento superano le dimensioni del contenitore, le parti in overflow non vengono visualizzate. Non vengono mostrate barre di scorrimento, e il contenuto in eccesso non sarà visibile.
Caratteristiche:
- Quando il contenuto supera il limite dell'elemento, la parte in eccesso viene nascosta.
- Non vengono mostrate barre di scorrimento.
scroll
1section.overflow-scroll {
2 width: 400px;
3 height: 100px;
4 overflow: scroll;
5}Quando viene usato scroll, le barre di scorrimento vengono forzatamente visualizzate se il contenuto dell'elemento supera il contenitore. Anche se il contenuto non esce dal contenitore, le barre di scorrimento sono sempre visualizzate.
Caratteristiche:
- Le barre di scorrimento sono mostrate anche se il contenuto rientra nei limiti dell'elemento.
- È possibile scorrere in direzione orizzontale e verticale.
auto
1section.overflow-auto {
2 width: 400px;
3 height: 100px;
4 overflow: auto;
5}auto mostra le barre di scorrimento solo quando il contenuto eccede; se il contenuto rientra nel contenitore dell'elemento, non vengono mostrate barre di scorrimento.
Caratteristiche:
- Le barre di scorrimento appaiono solo quando il contenuto supera i limiti.
- Crea automaticamente un'area scorrevole.
overflow-x e overflow-y
1section.overflow-xy {
2 width: 400px;
3 height: 100px;
4 overflow-x: scroll;
5 overflow-y: hidden;
6}La proprietà overflow può essere gestita anche individualmente per le direzioni orizzontale (asse x) e verticale (asse y).
In questo modo, puoi utilizzare overflow-x e overflow-y per impostare la visualizzazione delle barre di scorrimento verticali e orizzontali in modo indipendente.
Considerazioni per Overflow
Quando utilizzi la proprietà overflow, ci sono alcuni aspetti a cui devi prestare attenzione.
Effetti sul design causati dalla visualizzazione delle barre di scorrimento
L'utilizzo di scroll o auto per visualizzare le barre di scorrimento può alterare il design complessivo della pagina. In particolare, se gli elementi sono posizionati ai margini destro o inferiore, le barre di scorrimento possono ridurne la visibilità.
Comportamento predefinito del browser
Il modo in cui le barre di scorrimento vengono visualizzate e funzionano può variare a seconda del browser. In particolare tra Windows e macOS, ci sono differenze nello stile di visualizzazione delle barre di scorrimento, che possono causare una visualizzazione del design non conforme alle aspettative. È importante effettuare test cross-browser.
Overflow degli elementi figli
Impostare overflow: hidden su un elemento genitore nasconde gli elementi figli che superano il contenitore del genitore. Questo potrebbe causare la visualizzazione errata di pop-up e finestre modali.
overflow: clip (CSS Level 3)
1section.overflow-clip {
2 width: 400px;
3 height: 100px;
4 overflow: clip;
5}Nella nuova specifica CSS, è stato introdotto un valore chiamato overflow: clip. È simile a hidden, ma non consente lo scorrimento e si limita a tagliare il contenuto. Attualmente è supportato solo da alcuni browser.
Caratteristiche:
- Se il contenuto trabocca, quella parte sarà completamente nascosta.
- Non vengono mostrate barre di scorrimento.
Conclusione
La proprietà CSS overflow è uno strumento essenziale per controllare la visualizzazione del contenuto nel design web. Gestendo situazioni in cui il contenuto supera il contenitore dell'elemento e applicando barre di scorrimento adeguate o tagli, offre agli utenti un'interfaccia più intuitiva. Inoltre, l'utilizzo di overflow-x e overflow-y consente un controllo più preciso.
Con questo valore, le barre di scorrimento vengono visualizzate forzatamente quando il contenuto dell'elemento supera il contenitore. Anche se il contenuto non esce dal contenitore, le barre di scorrimento sono sempre visualizzate.
contain
Panoramica della proprietà contain
La proprietà CSS contain limita l'influenza che un elemento ha su altri elementi e sull'intera pagina, ottimizzando il processo di rendering del browser. In particolare, limita i reflow e i repaint impedendo che le modifiche di stile o layout in un elemento influenzino il contenuto al di fuori di quell'elemento.
Ciò è importante per le prestazioni delle pagine web ed è particolarmente efficace per siti con layout complessi o grandi quantità di contenuti.
Valori della proprietà contain
La proprietà contain può assumere i seguenti valori:.
layout
1section.contain-layout {
2 width: 300px;
3 height: 300px;
4 contain: layout;
5}layout applica restrizioni relative al layout. Utilizzando questo valore, la dimensione e la posizione di un elemento non influenzano altri elementi. Ad esempio, anche se un elemento viene ridimensionato internamente, questa modifica non influisce sul layout esterno.
paint
1section.contain-paint {
2 width: 300px;
3 height: 300px;
4 contain: paint;
5}paint limita l'impatto del disegno (painting). Quando questo valore è specificato, il disegno all'interno dell'elemento non influisce più sugli elementi esterni, limitando così l'area dei calcoli di repaint.
size
1section.contain-size {
2 width: 300px;
3 height: 300px;
4 contain: size;
5}size garantisce che la dimensione dell'elemento non dipenda dagli elementi esterni. In particolare, impedisce che il ridimensionamento degli elementi figli influenzi la dimensione dell'elemento padre, migliorando così la stabilità del layout.
style
1section.contain-style {
2 width: 300px;
3 height: 300px;
4 contain: style;
5}style garantisce che lo stile di un elemento non influenzi gli elementi esterni. Ad esempio, specificando contain: style;, si garantisce che le modifiche di stile in quell'elemento non abbiano impatto su altri elementi, riducendo l'area delle ricalcolazioni.
content
1section.contain-content {
2 width: 300px;
3 height: 300px;
4 contain: content;
5}content è un valore composito che applica layout, paint, size e style. Utilizzando questo valore, si può garantire che il layout, il disegno, la dimensione e lo stile dell'elemento non abbiano alcun impatto sugli elementi esterni.
Vantaggi in termini di prestazioni
Il motivo principale per utilizzare la proprietà contain è migliorare le prestazioni delle pagine web. In particolare, è efficace nelle seguenti situazioni:.
-
Ottimizzazione dei reflow: Quando la dimensione o il layout di un elemento cambiano, il loro impatto può essere limitato alla minore area possibile. Ciò riduce l'ambito dei reflow inutili (ricalcoli del layout) e alleggerisce il carico sul browser.
-
Riduzione dei repaint: Limitando l'area di disegno, si può minimizzare la porzione che necessita di repaint quando lo stile o il contenuto di un elemento cambia.
-
Sviluppo basato su componenti: Poiché ogni componente o modulo funziona in modo indipendente dagli altri elementi, migliora le prestazioni di ogni componente anche in applicazioni web di ampia scala.
Note
Quando si utilizza la proprietà contain, è necessario tenere a mente i seguenti punti.
-
Comprendere l'ambito di applicazione: La proprietà
containè utile per ottimizzare le prestazioni, ma non dovrebbe essere applicata a ogni elemento. È importante utilizzarla in modo appropriato nei luoghi adatti. Ad esempio, utilizzarla su elementi che cambiano frequentemente o su parti di una struttura DOM ampia potrebbe invece peggiorare le prestazioni. -
Compatibilità con i browser: La proprietà
containè una funzionalità CSS relativamente nuova e non è completamente supportata da tutti i browser. È supportata nei principali browser (Chrome, Firefox, Edge, Safari), ma potrebbe non essere applicabile nelle versioni meno recenti.
Conclusione
La proprietà CSS contain è uno strumento potente per ottimizzare le prestazioni delle pagine web e delle applicazioni. Limitando l'impatto che un determinato elemento ha sugli altri, riduce i costi di reflow e repaint, semplificando il processo di rendering complessivo. Tuttavia, è importante valutare attentamente dove applicarla e utilizzarla in modo appropriato.
Puoi seguire l'articolo sopra utilizzando Visual Studio Code sul nostro canale YouTube. Controlla anche il nostro canale YouTube.