Dall'autore: articolo del nostro ospite, Peter Businessmans. Peter è uno sviluppatore front-end presso Audience, dove gli piace scrivere stili in SCSS. Oggi ci mostrerà quello che io chiamo un trucco CSS onesto. L'intera rete è verticale. Leggi il sito come un normale libro: da sinistra a destra, dall'alto in basso. Ma a volte viene voglia di allontanarsi dalla verticalità e fare qualcosa di folle: creare una lista orizzontale. O ancora più folle, un sito orizzontale!

Sarebbe bello se potessimo fare qualcosa del genere:

/* codice falso */ div (direzione di scorrimento: orizzontale;)

Sfortunatamente, questo non accadrà. Questo non è nemmeno pianificato nei CSS.

Questo è un peccato perché l'azienda per cui lavoro lo utilizzerebbe davvero. Facciamo molte presentazioni e la presentazione è una cosa abbastanza orizzontale. In genere, le proporzioni delle diapositive sono 4:3 o 16:9. Per questo motivo, abbiamo un problema costante con le diapositive orizzontali e le tecnologie web verticali. Con “noi” intendo me. Ma ciò che amo sono le sfide.

Un altro caso d'uso

Mi è venuto in mente un metodo di applicazione specifico. L'idea è che sarebbe conveniente per i clienti visualizzare tutti i prodotti su un'unica diapositiva. Naturalmente, il catalogo dei prodotti non rientrerebbe in un unico formato. Abbiamo quindi deciso di suddividere il catalogo in tre categorie, ciascuna a scorrimento orizzontale. In questo modo, i tre prodotti più popolari sono visibili in ciascuna categoria, mentre i prodotti meno importanti sono facilmente accessibili.

Metodo senza JavaScript

Sappiamo tutti che esistono molti modi per eseguire lo scorrimento orizzontale in JS. Ci sono alcuni esempi su CSS-Tricks. Mi chiedevo se questa idea potesse essere implementata utilizzando puro CSS. La soluzione si è rivelata molto semplice:

creare un contenitore con elementi;

ruotare il contenitore di 90 gradi in senso antiorario in modo che il bordo inferiore sia a destra;

Ruotiamo gli elementi all'interno del contenitore riportandoli al loro posto.

Passaggio 1) creare un contenitore

Crea un div con molti bambini.

Nel nostro esempio, il contenitore scorrevole sarà largo 300px e avrà 8 elementi da 100x100px. Le dimensioni sono arbitrarie, puoi impostarne qualsiasi.

L'altezza del contenitore diventerà la larghezza e viceversa. Di seguito, la "larghezza" del contenitore sarà 300px:

Wrapper a scorrimento orizzontale (larghezza: 100px; altezza: 300px; overflow-y: automatico; overflow-x: nascosto;)

Ed elementi figlio:

Wrapper a scorrimento orizzontale > div (larghezza: 100px; altezza: 100px;)

Passaggio 2) ruotare il contenitore

Ora dobbiamo ruotare il contenitore di -90 gradi utilizzando la proprietà di trasformazione CSS. Abbiamo uno scroller orizzontale.

Wrapper a scorrimento orizzontale (... trasformazione: rotazione (-90 gradi); origine trasformazione: in alto a destra;)

C'è solo un piccolo problema: gli elementi figlio sono ruotati insieme al contenitore.

Passaggio 3) riporta gli elementi figlio al loro posto

Quindi come riportare gli elementi al loro posto? Ripristinalo utilizzando la proprietà di trasformazione CSS.

Wrapper a scorrimento orizzontale > div ( ... trasformazione: rotazione (90 gradi); origine trasformazione: in alto a destra; )

Passaggio 4) Posizionamento fisso

Sembra tutto a posto, ma ci sono un paio di problemi.

Abbiamo ruotato il contenitore e impostato l'angolo in alto a destra come ancoraggio, facendo sì che il lato sinistro si spostasse in base alla larghezza del contenitore. Se trovi difficile immaginare, posiziona semplicemente il dito nell'angolo in alto a destra della pagina e ruotalo. Esci: è necessario ripristinarlo utilizzando la proprietà Translate.

Già meglio. Ma il primo elemento non è ancora visibile perché lo stesso problema si osserva con gli elementi figlio. Questo può essere risolto dando al primo elemento figlio un margine superiore con il valore della sua larghezza o trasformando tutti gli elementi come un contenitore. Il modo più semplice che ho trovato è aggiungere un riempimento superiore al contenitore pari alla larghezza degli elementi figlio, creando così una zona buffer per gli elementi.

Compatibilità

Ho verificato la compatibilità sui dispositivi a mia disposizione.

Desktop

Poiché lo stile della barra di scorrimento attualmente funziona solo nei browser Webkit/Blink, in Firefox e IE viene visualizzata una normale barra di scorrimento grigia. Questo può essere corretto usando JS e nascondendoli del tutto, ma questo è un argomento per un'altra lezione.

Lo scorrimento con la rotellina del mouse funziona perfettamente sul desktop. Ma il mio laptop ha la sua opinione su questo argomento. Sui dispositivi dotati di touch screen e touch pad, la demo si comporta come se il div non fosse stato ruotato affatto.

Dispositivi mobili

Sono rimasto piacevolmente sorpreso nell'apprendere che Android riconosce che il contenitore è stato ruotato e consente di scorrerlo scorrendo verso sinistra e verso destra.

Con iOS, al contrario, non tutto è così fluido. Il browser si comporta come se il contenitore non fosse affatto ruotato. Pertanto, per scorrere è necessario scorrere su e giù, il che è abbastanza strano. Overflow: hidden non risolve il problema.

Conclusione

Secondo il sito web Can I Use, le trasformazioni in CSS sono ora supportate da oltre il 93% degli utenti (al momento della stesura di questo articolo, novembre 2016). Non dovrebbero esserci problemi qui.

Sebbene sia meglio non utilizzare questo metodo nella produzione. L'ho testato su alcuni dispositivi, ma non su tutti e non in modo così approfondito.

Il problema più grande sono gli input touch, in cui è necessario scorrere verso l'alto e verso il basso per andare a sinistra e a destra. Una soluzione potrebbe essere quella di scrivere un messaggio sul sito con una spiegazione, ma poi bisognerebbe affidarsi agli utenti per leggerlo. E anche allora sarà contrario al buon senso. Un'altra soluzione è acquisire input touch utilizzando JS sui dispositivi, ma poi è meglio scrivere tutto in JS e abbandonare completamente il nostro hack CSS.

In questo articolo esamineremo nel dettaglio la proprietà overflow con tutti i suoi valori, che permette anche di aggiungere o rimuovere una barra di scorrimento orizzontale/verticale. In altre parole, come creare barre di scorrimento.

L'overflow nei CSS è responsabile di come apparirà la visualizzazione delle informazioni in un blocco se il contenuto supera l'altezza o la larghezza di questo blocco. Questa proprietà si applica solo agli elementi blocco (display : block ; o quelli che inizialmente sono elementi blocco - div, ecc.).

Possibili valori che assume questa proprietà (visibili di default):

• Visibile: viene visualizzato l'intero contenuto dell'elemento, anche oltre l'altezza e la larghezza specificate.
• Nascosto: viene visualizzata solo l'area all'interno dell'elemento, il resto verrà nascosto.
• Scorrimento: le barre di scorrimento vengono sempre aggiunte.
• Auto: le barre di scorrimento vengono aggiunte solo quando necessario.
• Eredita: eredita il valore del genitore.

Molto spesso, questa proprietà viene utilizzata per rimuovere o aggiungere barre di scorrimento a un elemento. È così, ad esempio, che trattano le cornici per non stiparle a grandezza naturale. Oppure inserire del testo di grandi dimensioni in modo che non occupi metà della pagina, ma si trovi comodamente in un blocco speciale, e lì possa essere scorso e letto. Nella maggior parte dei casi, la proprietà risolve il problema della comoda visualizzazione delle informazioni.

Nella demo puoi vedere come funziona in pratica ciascun valore della proprietà:

Codice HTML

body (margine:0 0 0 0; riempimento:0 0 60px 0; dimensione carattere:16px;) h2 (colore:#CC0033;) div ( larghezza:200px; /* larghezza fissa */ altezza:300px; /* fissa altezza */ bordo:1px solido #555; riempimento:4px; margine:4px; float:sinistra; ) .VisibleDiv (overflow:visibile;) .HiddenDiv (overflow:nascosto;) .ScrollDiv (overflow:scroll;) .AutoDiv ( overflow: automatico;)

Vale la pena prestare attenzione al fatto che in questo caso particolare i blocchi hanno una determinata altezza e larghezza fisse. Questo è importante, ad esempio, considera l'opzione quando l'altezza del blocco è impostata su auto :

Vediamo che il testo viene visualizzato correttamente all'interno del blocco in tutti i casi, tranne un piccolo inconveniente nel caso di scroll , dove compaiono barre di scorrimento inattive.

Ma in questo caso c'è un piccolo pericolo, di fronte al quale molti non capiscono perché sia ​​sorto e come correggerlo. Il fatto è che se un blocco con overflow: visibile; cioè, il valore predefinito e il suo contenuto hanno elementi con qualsiasi valore float tranne none , tutto ciò verrà visualizzato in modo errato. Per capire quale sia questa situazione, consideriamo un esempio:

Sotto il blocco VisibleDiv c'è un altro blocco

Non c'è niente sotto il blocco VisibleDiv

corpo (margine:0 0 0 0; riempimento:0 0 60px 0; dimensione carattere:16px;) h2 (colore:#CC0033;) p (float:sinistra;) div ( larghezza:500px; altezza:auto; bordo: 1px solido #555; riempimento: 4px; margine: 4px; ) .VisibleDiv (overflow: visibile; sfondo: rgba(0,255,0,0.1);) .ignor (sfondo: rgba(0,255,0,0.6); colore:# FFFFFF;peso-carattere:grassetto;)

Nel primo caso è chiaro che il contenuto con la proprietà float si sposta all'esterno del blocco e non viene preso in considerazione nel determinare l'altezza del blocco, nel secondo caso sotto il blocco con overflow: visibile ; Un altro blocco è posizionato appositamente e dipinto di un colore diverso. Questi non sono gli unici esempi di come tali blocchi possono comportarsi su una pagina (con overflow: visibile; e altezza: auto;). Questo può essere corretto sostituendo il valore visibile con nascosto; ricorda che questa proprietà deve essere specificata solo per i blocchi con altezza: auto; , se è presente un'altezza fissa, è molto probabile che il contenuto venga semplicemente nascosto se è più grande dell'altezza specificata.

Ecco come apparirà la versione corretta:

Inoltre, non avrai questo problema se il blocco ha overflow: visibile ; e altezza: automatica; viene inoltre specificato un valore della proprietà float. In generale, in molti casi, la visualizzazione degli elementi dipende da un insieme di proprietà, piuttosto che da singole proprietà.

Puoi usare overflow-y: scroll per lo scorrimento verticale.

A volte è necessario inserire un testo di grandi dimensioni in una piccola finestra che non ci sta completamente; per risolvere questo problema è semplice creare un livello con scorrimento - div con scorrimento.

Avrà bisogno

Livello di dimensione fissa e stile CSS.

CSS

Il class.scroll CSS imposta i parametri su 600px di lunghezza e 300px di altezza, riempimento, bordo e colore di sfondo. MA! Il parametro più importante è overflow:auto, che imposta la barra di scorrimento in modo che venga visualizzata quando la quantità di testo è maggiore della dimensione del livello.

Scorri ( larghezza:500px; altezza:300px; /* dimensione fissa richiesta */ overflow:auto; /* lo scorrimento appare secondo necessità */ imbottitura:10px 20px; border:#999 1px solido; background-color:#FAFAFA; )

HTML

Risultato

Sullo schermo vedrai una piccola cornice con testo e un bordo grigio.

I più utilizzati sono i refrigeranti a base di glicole etilenico a base di glicole etilenico e acqua (distillata) con un complesso di additivi.

Gli antigelo si ottengono come soluzioni acquose dei corrispondenti concentrati. Durante il funzionamento, la qualità dell'antigelo può essere controllata dalla densità. Durante il funzionamento, la prima cosa che evapora dal liquido di raffreddamento durante il funzionamento è l'acqua, che deve essere periodicamente rabboccata (distillata). È necessario assicurarsi che benzina e oli non penetrino nell'antigelo, poiché provocano formazione di schiuma e rilascio di liquido dal sistema.

La durata dei liquidi refrigeranti come "Tosol" e "Lena" è limitata dalla durabilità degli additivi e solitamente è di 2 anni; Il chilometraggio medio per varie auto è di 50.000 km.

Quando si effettua la prima manutenzione su un veicolo usato, è necessario sostituire il liquido di raffreddamento. Dopo aver scaricato il vecchio liquido, riempire l'impianto con acqua pulita, avviare il motore e lasciarlo girare al minimo per 15-20 minuti; quindi scaricare l'acqua e riempire il sistema con nuovo liquido refrigerante.

La proprietà overflow controlla la visualizzazione del contenuto di un elemento di blocco se l'intero contenuto non si adatta e si estende oltre l'area delle dimensioni specificate.

brevi informazioni

Designazioni

Valori

visibile Visualizza l'intero contenuto dell'elemento, anche oltre l'altezza e la larghezza specificate. hidden Viene visualizzata solo l'area interna all'elemento, il resto verrà nascosto. scroll Le barre di scorrimento vengono sempre aggiunte. Le barre di scorrimento automatico vengono aggiunte solo quando necessario.

Sabbiera

Winnie the Pooh non è sempre stato contrario a un piccolo rinfresco, soprattutto alle undici del mattino, perché a quell'ora la colazione era finita da tempo e il pranzo non era ancora iniziato. E, naturalmente, fu terribilmente felice di vedere che il Coniglio tirava fuori tazze e piatti.

div (altezza: 80px; overflow: automatico;)

Esempio

Il risultato di questo esempio è mostrato in Fig. 1.

Riso. 1. Applicazione della proprietà di overflow

Modello di oggetti

Un oggetto.stile.overflow

Nota

Internet Explorer fino alla versione 7.0 compresa:

• Gli elementi figlio posizionati relativamente i cui valori di overflow sono impostati su auto o scroll si comportano come se avessero position: Fixed .

Internet Explorer 8:

• La combinazione di overflow con il valore di scorrimento con le proprietà max-height e float può portare alla mancanza di elementi della pagina Web e alla visualizzazione di una schermata vuota nel browser.
• Per un blocco le cui proprietà float e overflow sono impostate su scroll , la larghezza specificata tramite la proprietà max-width viene ignorata.
• L'altezza di un blocco con barra di scorrimento orizzontale aumenta dell'altezza della barra di scorrimento, anche se secondo le specifiche CSS le dimensioni indicate devono includere anche le barre di scorrimento.

Firefox 3.6 non applica correttamente l'overflow ai gruppi di celle della tabella ( , , ).

Specifica

Ogni specifica passa attraverso diverse fasi di approvazione.

• Raccomandazione: la specifica è stata approvata dal W3C ed è consigliata come standard.
• Raccomandazione del candidato ( Possibile raccomandazione) - il gruppo responsabile dello standard è soddisfatto del raggiungimento dei propri obiettivi, ma necessita dell'aiuto della comunità di sviluppo per implementare lo standard.
• Raccomandazione proposta Raccomandazione suggerita) - in questa fase il documento viene sottoposto all'Advisory Council del W3C per l'approvazione finale.
• Bozza di lavoro: una versione più matura di una bozza che è stata discussa e modificata per la revisione della comunità.
• Bozza dell'editore ( Bozza editoriale) - una bozza della norma dopo le modifiche apportate dai redattori del progetto.
• Bozza ( Progetto di specifica) - la prima bozza della norma.