The CSS Podcast - 034: Overflow
Se un contenuto si estende oltre l'elemento principale, ci sono molte opzioni per gestirlo. Puoi scorrere per aggiungere altro spazio, ritagliare i bordi sovraccarichi, indicare il taglio con i puntini di sospensione e molto altro ancora. L'overflow è particolarmente importante da considerare quando si sviluppano applicazioni per smartphone e più dimensioni dello schermo.
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 il sovraccarico nel modello a riquadro.
Sovrabbondanza di una riga con text-overflow
Utilizza la proprietà text-overflow
su qualsiasi elemento contenente uno o più nodi di testo, ad esempio un paragrafo, <p>
. Specifica la modalità di visualizzazione del testo quando non si adatta allo spazio disponibile dell'elemento. Tutto il testo HTML visibile in una pagina si trova nei nodi di testo. Per utilizzare text-overflow
, devi avere una singola riga di testo non a capo, quindi devi anche impostare overflow
su hidden
e avere un valore white-space
che impedisca il rientro.
p {
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
Utilizzo delle proprietà di overflow
Le proprietà di overflow vengono impostate su un elemento per controllare cosa succede quando i relativi elementi secondari richiedono più spazio di quello disponibile. Questo può essere intenzionale, ad esempio in una mappa interattiva come Google Maps, in cui un utente esegue la panoramica di un'immagine di grandi dimensioni ritagliata in base a dimensioni specifiche. Può anche essere involontario, ad esempio in un'applicazione di chat in cui l'utente digita un messaggio lungo che non entra nella bolla di testo.
Puoi considerare l'overflow in due parti. L'elemento principale ha uno spazio vincolato che non cambierà. È una sorta di finestra. Gli elementi secondari sono contenuti che richiedono più spazio dall'elemento principale. Puoi considerarlo come ciò che stai guardando dalla finestra. La gestione dell'overflow ti aiuterà a definire il modo in cui la finestra inquadra questi contenuti.
Scorrimento sull'asse verticale e orizzontale
La proprietà overflow-y
controlla lo spazio extra fisico lungo l'asse verticale dell'area visibile del dispositivo, quindi lo scorrimento verso l'alto e verso il basso.
La proprietà overflow-x
controlla l'overflow lungo l'asse orizzontale dell'area visibile del dispositivo, quindi scorre verso sinistra e verso destra.
Proprietà logiche per la direzione di scorrimento
Le proprietà overflow-inline
e overflow-block
impostano lo spazio aggiuntivo in base all'orientamento e alla modalità di scrittura del documento.
La grafia abbreviata di overflow
La forma breve overflow
imposta 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, sia overflow-x
che overflow-y
utilizzano lo stesso valore.
Valori
Esaminiamo più da vicino i valori e le parole chiave disponibili per le proprietà overflow
.
overflow: visible
(valore predefinito)- Se non viene impostata la proprietà,
overflow: visible
è il valore predefinito per il web. In questo modo, i contenuti non vengono mai nascosti involontariamente e rispettano i principi fondamentali di "non nascondere mai i contenuti" o "layout sicuri e precisi". overflow: hidden
- Con
overflow: hidden
i contenuti vengono ritagliati nella direzione specificata e non vengono fornite barre di scorrimento per visualizzarli. overflow: scroll
overflow: scroll
attiva le barre di scorrimento per consentire agli utenti di scorrere i contenuti. Anche se al momento non ci sono contenuti overflow, saranno presenti barre di scorrimento. Si tratta di un ottimo modo per ridurre il cambiamento di layout futuro se un contenitore potrebbe essere scorrevole in futuro in base, ad esempio, alle dimensioni e preparare visivamente l'utente alle aree scorrevoli.overflow: clip
- Come per
overflow: hidden
, i contenuti conoverflow: clip
vengono ritagliati in base alla casella di spaziatura dell'elemento. La differenza traclip
ehidden
è che la parola chiaveclip
impedisce anche tutto lo scorrimento, incluso quello programmatico. overflow: auto
- Infine, il valore più comunemente utilizzato,
overflow: auto
. In questo modo vengono rispettate le preferenze dell'utente e, se necessario, vengono mostrate le barre di scorrimento, ma vengono nascoste per impostazione predefinita e la responsabilità dello scorrimento viene assegnata all'utente e al browser.
Scorrimento e overflow
Molti di questi comportamenti overflow
introducono una barra di scorrimento, ma esistono alcuni comportamenti e proprietà di scorrimento specifici che possono aiutarti a controllare lo scorrimento nel contenitore overflow.
Scorri e accessibilità
È importante assicurarsi che l'area scorrevole possa accettare lo stato attivo in modo che un utente con tastiera possa usare il tasto Tab per selezionare la casella e poi 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>
I CSS possono essere utilizzati per indicare che la casella ha il focus, utilizzando la proprietà outline
per dare un indizio visivo che ora sarà scorrevole.
In Utilizzare CSS per applicare l'accessibilità, Adrian Roselli dimostra come il CSS può contribuire 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 rendono la casella scorrevole solo se ha 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 di riquadro
Le barre di scorrimento occupano spazio all'interno della casella di spaziatura interna e possono competere per lo spazio se inline
e non overlaid
. Il modulo del modello di casella fornisce ulteriori informazioni su questa potenziale fonte di variazione del layout.
root-scroller e implicit-scroller
Potresti notare che alcuni scorrimenti hanno un comportamento di pull-to-refresh e altri comportamenti speciali, in particolare durante lo sviluppo di applicazioni mobile e ibride. Questo comportamento di scorrimento si verifica nello scroller principale. In una pagina è presente un solo dispositivo di scorrimento principale. Per impostazione predefinita, documentElement è lo scorrimento principale della pagina, ma cambiando l'elemento che funge da scorrimento principale, i comportamenti speciali possono essere applicati a scorrimenti diversi da documentElement. Chiamiamo questo nuovo scorrimento scorrimento principale implicito.
Per creare uno scroll raiz, puoi utilizzare la promozione dello scroll posizionando un contenitore come fisso, assicurandoti che copra l'intera area visibile e che l'indice z sia in alto con uno scroll. Prova uno scorrimento principale rispetto a uno strumento di scorrimento implicito nidificato qui.
scroll-behavior
scroll-behavior
consente di attivare lo scorrimento degli elementi controllato dal browser. In questo modo puoi specificare come viene gestita la navigazione all'interno della pagina, ad esempio .scrollTo()
o i link.
Questo è particolarmente utile se utilizzato 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;
}
}
overscroll-behavior
Se hai mai raggiunto la fine di un overlay modale, hai continuato a scorrere e la pagina dietro l'overlay si è spostata, si tratta di una catena di scorrimento o di un trasferimento al contenitore di scorrimento principale. La proprietà overscroll-behavior
consente di impedire che lo scorrimento con overflow venga visualizzato in un contenitore principale (chiamato concatenamento di scorrimento).
Verificare di aver compreso
Metti alla prova le tue conoscenze sull'overflow
L'overflow del testo e l'overflow dell'elemento sono uguali?
La proprietà overflow
accetta due parole chiave. La prima parola chiave è per quale asse?
Quale spazio nel modello a casella viene occupato dalle barre di scorrimento quando sono mostrate e in linea?
Per bloccare l'inerzia dello scorrimento in uno scroller implicito nidificato, quale proprietà utilizzeresti?
overscroll-behavior
scroll-behavior
overscroll-effect
scroll-padding
scroll-hint