Podcast su CSS - 034: Overflow
Quando un contenuto si estende oltre quello principale, hai a disposizione molte opzioni per gestirlo. Puoi scorrere per aggiungere altro spazio, tagliare i bordi extra, indicare il ritaglio con i puntini di sospensione e molto altro ancora. L'overflow è particolarmente importante da considerare quando si sviluppa per applicazioni per cellulari e schermi di dimensioni diverse.
In CSS sono disponibili due diverse opzioni di ritaglio: text-overflow è utile per le singole righe di testo, mentre le proprietà overflow consentono di controllare l'overflow nel modello a riquadro.
Overflow di una riga singola con text-overflow
Utilizza la proprietà text-overflow su qualsiasi elemento contenente nodi di testo, ad esempio un paragrafo <p>. Specifica come viene visualizzato il testo quando non rientra nello spazio disponibile dell'elemento. Tutto il testo HTML visibile in una pagina è inserito in nodi di testo. Per utilizzare text-overflow è necessaria una singola riga di testo senza wrapper, quindi devi anche impostare overflow su hidden e avere un valore white-space che impedisca il wrapping.
p {
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
Utilizzare le proprietà overflow
Le proprietà di overflow sono impostate su un elemento per controllare cosa succede quando i suoi figli hanno bisogno di più spazio di quello disponibile. Ciò può essere intenzionale, come in una mappa interattiva come Google Maps, in cui un utente si sposta intorno a un'immagine di grandi dimensioni ritagliata su una dimensione specifica. Può anche non essere intenzionale, ad esempio in un'applicazione di chat, in cui l'utente digita un messaggio lungo che non rientra nel fumetto.
L'overflow è suddiviso in due parti. L'elemento principale ha uno spazio saldamente limitato che non cambierà. Puoi pensare a questo come a una finestra. Gli elementi secondari sono contenuti che richiedono più spazio dall'elemento principale. È come se guardi attraverso la finestra. La gestione dell'overflow aiuterà a definire il modo in cui la finestra inserisce questi contenuti in frame.
Scorrimento sull'asse verticale e orizzontale
La proprietà overflow-y controlla l'overflow fisico lungo l'asse verticale dell'area visibile del dispositivo, perciò scorre verso l'alto e verso il basso.
I controlli della proprietà overflow-x presentano un overflow lungo l'asse orizzontale dell'area visibile del dispositivo, pertanto scorre verso sinistra e verso destra.
Proprietà logiche della direzione di scorrimento
Le proprietà overflow-inline e overflow-block impostano l'overflow in base alla direzione del documento e alla modalità di scrittura.
L'abbreviazione di overflow
L'abbreviazione overflow imposta entrambi gli stili overflow-x e overflow-y su un'unica riga:
overflow: hidden scroll;
Se vengono specificate due parole chiave, la prima si applica a overflow-x e la seconda a overflow-y. In caso contrario, overflow-x e overflow-y utilizzano lo stesso valore.
Valori
Diamo un'occhiata più da vicino ai valori e alle parole chiave disponibili per le proprietà overflow.
overflow: visible(valore predefinito)- Senza impostare la proprietà,
overflow: visibleè il valore predefinito per il web. Ciò garantisce che i contenuti non vengano mai nascosti involontariamente e seguano i principi fondamentali di "non nascondere mai i contenuti" o "layout sicuro di layout precisi". overflow: hidden- Con
overflow: hidden, i contenuti vengono ritagliati nella direzione specificata e non vengono fornite barre di scorrimento per visualizzarli. overflow: scrolloverflow: scrollattiva le barre di scorrimento per consentire agli utenti di scorrere i contenuti. Anche se attualmente i contenuti non presentano overflow, saranno presenti barre di scorrimento. Questo è un ottimo modo per ridurre le variazioni future del layout se un contenitore può essere scorrevole in futuro, ad esempio in base al ridimensionamento, e preparare visivamente l'utente per le aree scorrevoli.overflow: clip- Come per
overflow: hidden, i contenuti conoverflow: clipvengono ritagliati nella spaziatura interna dell'elemento. La differenza traclipehiddenè che la parola chiaveclipvieta anche qualsiasi scorrimento, incluso lo scorrimento programmatico. overflow: auto- Infine, il valore più comunemente utilizzato:
overflow: auto. Questo rispetta le preferenze dell'utente e mostra barre di scorrimento se necessario, ma le nasconde per impostazione predefinita e dà la responsabilità di scorrere all'utente e al browser.
Scorrimento e overflow
Molti di questi comportamenti di overflow introducono una barra di scorrimento, ma ci sono alcuni comportamenti e proprietà di scorrimento specifici che possono aiutarti a controllare lo scorrimento nel contenitore di overflow.
Scorrimento e accessibilità
È importante assicurarsi che l'area scorrevole possa accettare lo stato attivo in modo che l'utente della tastiera possa passare alla casella con il tasto Tab, quindi utilizza i tasti freccia per scorrere.
Per consentire a una casella di scorrimento di accettare lo stato attivo, aggiungi tabindex="0", un nome con l'attributo aria-labelledby e un attributo role appropriato. Ad esempio:
<div tabindex="0" role="region" aria-labelledby="id-of-descriptive-text">
content
</div>
È quindi possibile usare CSS per indicare che il riquadro è attivo, utilizzando la proprietà outline per dare un indizio visivo sul fatto che ora sarà scorrevole.
In Using CSS to Enforce Accessibility Adrian Roselli illustra in che modo il CSS può aiutare a prevenire le regressioni dell'accessibilità. Ad esempio, per attivare lo scorrimento e aggiungere l'indicatore di stato attivo solo se vengono utilizzati gli attributi corretti. Le seguenti regole renderanno la casella scorrevole solo se presenta un attributo tabindex, aria-labelledby e role.
[role][aria-labelledby][tabindex] {
overflow: auto;
}
[role][aria-labelledby][tabindex]:focus {
outline: .1em solid blue;
}
Posizionamento della barra di scorrimento all'interno del modello a scatola
Le barre di scorrimento occupano spazio all'interno della spaziatura interna e possono competere per lo spazio se inline e non overlaid. Il modulo del modello a riquadro amplia maggiormente questa potenziale fonte di variazione del layout.
root-scroller e implicit-scroller
Potresti notare che alcuni scorrimenti hanno un comportamento pull-to-refresh e altri comportamenti speciali, soprattutto durante lo sviluppo per applicazioni per dispositivi mobili e ibride. Questo comportamento di scorrimento si verifica sullo scorrimento principale. In una pagina è presente un solo cursore root. Per impostazione predefinita, documentElement è lo scorrimento principale della pagina, tuttavia, se cambi l'elemento di scorrimento principale, i comportamenti speciali possono essere applicati agli utenti di scorrimento diversi da documentElement. Questo nuovo scroller viene definito "utente di scorrimento radice implicito".
Per creare uno scroller principale, puoi utilizzare il cosiddetto scroller promotion posizionando un contenitore come fisso, assicurandoti che copra l'intera area visibile e che sia z-index nella parte superiore con uno scorrimento. Uno scorrimento principale rispetto a uno implicito nidificato qui.
rispetto allo scorrimento con uno scorrimento implicito senza comportamento di scorrimento migliorato.
comportamento di scorrimento
scroll-behavior ti consente di attivare lo scorrimento agli elementi controllato dal browser. In questo modo puoi specificare come viene gestita la navigazione in-page, ad esempio .scrollTo(), o i link.
Questa opzione è particolarmente utile quando viene utilizzata con prefers-reduced-motion per specificare il comportamento di scorrimento in base alle preferenze dell'utente.
@media (prefers-reduced-motion: no-preference) {
.scroll-view {
scroll-behavior: auto;
}
}
comportamento dello scorrimento orizzontale
Se ti è capitato di raggiungere la fine di un overlay modale e continuare a scorrere e di spostare la pagina dietro l'overlay, si tratta di un concatenamento di scorrimento o di un gorgogliamento che rimanda al contenitore di scorrimento principale. La proprietà overscroll-behavior ti consente di impedire che lo scorrimento overflow influisca in un contenitore principale (chiamato concatenamento di scorrimento).
Verifica la tua comprensione
Verifica le tue conoscenze sull'overflow
L'overflow del testo e quello dell'elemento coincidono?
La proprietà overflow accetta due parole chiave. Per quale asse è indicata la prima parola chiave?
Quale spazio nel modello a scatola consumano le barre di scorrimento quando vengono mostrate e in linea?
overlay si sovrapporranno alla spaziatura interna e, in modalità inline, verranno aggiunte alla spaziatura interna.Quale proprietà useresti per sfruttare lo slancio generato dallo scorrimento in uno scorrimento implicito nidificato?
scroll-behaviorscroll-hintoverscroll-behaviorcontain, lo scorrimento verrà bloccato.scroll-paddingoverscroll-effect