Overflow regola CSS

Non è sempre necessario rendere visibile l'elemento della pagina. Spesso, è sufficiente rendere visibile il suo contenuto, solitamente un'immagine, un testo, una tabella. La regola CSS di overflow imposta la modalità di visualizzazione del contenuto.

Inserendo elementi di blocco l'uno nell'altro, è possibile regolare in modo efficace la visualizzazione del contenuto entro i limiti desiderati, gestire le barre di scorrimento e creare la propria opzione di gestione dei contenuti.

Regole generali di applicazione

La regola CSS di overflow accetta cinque valori:

• visibile;
• nascosto;
• scorrere;
• auto;
• ereditare.

Quando è visibile, il contenuto può estendersi oltre l'elemento. Nel caso di nascosto, la parte che esce verrà ritagliata. L'uso di scorrimento e auto consente di aggiungere barre di scorrimento per visualizzare il contenuto oltre l'elemento.

La dimensione dell'elemento è determinata dalle regole di larghezza e altezza. Quando una regola CSS di overflow consente lo scorrimento (scroll e valori automatici), le sue barre vengono posizionate all'interno dell'elemento. Non è sempre conveniente e nella maggior parte dei casi non corrisponde al design della pagina quando lo sviluppatore è interessato a gestire il contenuto e non prevede di utilizzare i classici "cursori".

Pratica, quando un elemento con contenuto è considerato isolatamente, offre poche opportunità di ottenere il risultato desiderato. Se un elemento è considerato come una raccolta di più tag di blocco annidati o combinati tra loro, si apre una miriade di possibilità.

Quando l'overflow CSS non è una versione standard della regola, la responsabilità di visualizzare correttamente il contenuto dipende dal codice JavaScript.

Esempio: JavaScript + overflow senza CSS

L'unico "difetto" nelle regole CSS è di adempiere alla sua missione come prescritto dalla loro sintassi e scopo. Nella maggior parte dei casi, questo è più che sufficiente.

Idealmente, utilizzare i css di overflow (valori automatici o di scorrimento). Durante il test, puoi sempre vedere cosa viene visualizzato in un particolare blocco.

Nel frattempo, la progettazione del sito, il desiderio dello sviluppatore di offrire la propria opzione per navigare attraverso il contenuto e, soprattutto, la portata del sito possono richiedere una soluzione unica e diversa da quella che i CSS possono offrire.

In questo esempio, i blocchi non possono contenere solo contenuti che "strisciano" fuori limite. È necessario spostarlo l'uno rispetto all'altro. Un oggetto è un'emulazione della tabella di scambio di valuta elettronica (in realtà, è un div), ma due casi di contenuto. In un caso, una direzione di scambio, nell'altra - un'altra.

Ogni blocco può allungarsi (restringersi) in altezza e larghezza, trovarsi sopra l'altro blocco. L'implementazione di queste funzionalità con lo standard overflow CSS non è possibile. Quando si modifica la dimensione dell'unità principale, è necessario ricostruire tutte le div interne. Allo stesso tempo, la dimensione del carattere dovrebbe cambiare proporzionalmente, poiché l'opzione di tagliare le informazioni nei programmi finanziari sembra essere poco applicabile.

Eccesso di CSS puro, ma senza cursori

Lo scrolling offerto da HTML / CSS è indubbiamente pratico, e per la fase di debug è semplicemente necessario, ma c'è un punto significativo. Quando il mouse si trova su un blocco in cui scorre, il contenuto di questo blocco viene spostato e non l'intera pagina.

Questo momento non è molto pratico in pratica: devi controllare il posto sulla pagina in cui puoi girare la rotellina del mouse. Ad alcuni visitatori non piace, alcuni semplicemente non prestano attenzione.

Nel frattempo, nulla impedisce allo sviluppatore di combinare il possibile con il desiderato. Se il contenuto del blocco supera i suoi limiti, puoi solo riportare la sua essenza al suo interno, vietandone lo scorrimento. Ma quando l'utente ha prestato attenzione a lui, mentre si tiene il cursore del mouse per un po ', è necessario espandere il blocco alla dimensione desiderata e portare tutto il contenuto in esso.

In questa forma di realizzazione, la pagina sarà il contenuto concentrato, che, se necessario, il visitatore stesso può rivelare.

In senso generale, quando crei elementi di blocco, devi allontanarti dall'idea che un elemento sia un "div", "span" o "td". Pensare con i tag HTML non è una cosa molto gratificante. È molto più pratico pensare con gli elementi semantici della pagina, e quanto richiedono per implementare i tag HTML è un'altra questione.

Movimento guidato dal contenuto

Se prendiamo l'idea di "c'è un blocco le cui dimensioni determinano il suo contenuto", allora per la regola CSS di overflow questa è un'opzione completamente diversa. Non è necessario affidarsi allo scrolling standard o scrivere il proprio codice JavaScript.

Se si progetta un sito come una raccolta di elementi, la cui dimensione e posizione sono determinati dal loro contenuto, a seconda delle azioni del visitatore, verranno rivelati determinati blocchi. È possibile che vengano rivelati su tutta la pagina o sulla sua parte significativa.

In generale, il movimento del visitatore è il suo interesse per l'informazione. Venendo al sito, osserva il suo stato iniziale e sceglie ciò che è interessante per lui. Il movimento di un mouse sullo schermo o un dito su uno smartphone apre automaticamente il blocco attuale corrente, lasciandolo per chiuderlo e aprire quello successivo.

Al momento, la creazione di un sito Web moderno non è così difficile, è diventato problematico sorprendere e interessare il visitatore. La transizione dal pensare con i tag HTML alla manipolazione di elementi di informazione rilevanti per il visitatore è una buona idea.