Overflow

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 con overflow: clip vengono ritagliati in base alla casella di spaziatura dell'elemento. La differenza tra clip e hidden è che la parola chiave clip 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

Risorse

Overflow e perdita di dati in CSS da Smashing Magazine