Quelli di voi che scrivono HTML da molto tempo potrebbero ricordare l'elemento. Questo era un elemento specifico del browser che creava un banner di testo scorrevole sullo schermo. Questo elemento non è mai stato aggiunto al HTML le specifiche e il supporto per esso variavano ampiamente tra i browser. Le persone spesso avevano opinioni molto forti sull'uso di questo elemento, sia positive che negative. Ma che tu lo amassi o lo odiassi, serviva allo scopo di rendere visibili i contenuti che traboccavano dai confini della scatola.
Parte del motivo per cui non è mai stato completamente implementato dai browser, a parte una forte opinione personale, è che è considerato un effetto visivo e come tale, non dovrebbe essere definito dall'HTML, che definisce il struttura. Invece, gli effetti visivi o di presentazione dovrebbero essere gestiti dai CSS. E CSS3 aggiunge il modulo di selezione per controllare come i browser aggiungono il effetto tendone agli elementi.
Nuove proprietà CSS3
CSS3 aggiunge cinque
nuove proprietà per controllare come i tuoi contenuti vengono visualizzati nel riquadro di selezione: in stile overflow, in stile riquadro di selezione, conteggio di riproduzione riquadro, direzione riquadro di selezione e velocità di selezione.stile overflow
La proprietà overflow-style (di cui abbiamo discusso anche nell'articolo CSS Overflow) definisce lo stile preferito per i contenuti che traboccano la casella del contenuto. Se imposti il valore su marquee-line o marquee-block, il tuo contenuto scorrerà dentro e fuori a sinistra/destra (marquee-line) o su/giù (marquee-block).
stile tendone
Questa proprietà definisce come il contenuto si sposterà in visualizzazione (e fuori). Le opzioni sono scorrere, scorrere e alternare. Lo scorrimento inizia con il contenuto completamente fuori dallo schermo, quindi si sposta nell'area visibile finché non è di nuovo completamente fuori dallo schermo. La diapositiva inizia con il contenuto completamente fuori dallo schermo, quindi si sposta fino a quando il contenuto non si è completamente spostato sullo schermo e non è rimasto più contenuto da scorrere sullo schermo. Infine, alterna i rimbalzi del contenuto da un lato all'altro, scorrendo avanti e indietro.
conteggio-gioco-tendone
Uno degli svantaggi dell'utilizzo dell'elemento MARQUEE è che il tendone non si ferma mai. Ma con la proprietà style marquee-play-count è possibile impostare il riquadro di selezione per attivare e disattivare il contenuto per un numero specifico di volte.
direzione del tendone
Puoi anche scegliere la direzione in cui il contenuto deve scorrere sullo schermo. I valori avanti e indietro si basano sulla direzionalità del testo quando lo stile di overflow è marquee-line e su o giù quando lo stile di overflow è marquee-block.
Dettagli sulla direzione del tendone
stile overflow |
Direzione della lingua | inoltrare | inversione |
|---|---|---|---|
linea di selezione |
ltr | sinistra | giusto |
| rtl | giusto | sinistra | |
blocco tendone |
su | giù |
marquee-speed
Questa proprietà determina la velocità con cui il contenuto scorre sullo schermo. I valori sono lento, normale e veloce. La velocità effettiva dipende dal contenuto e dal browser che lo visualizza, ma i valori devono essere lenti è più lento del normale che è più lento che veloce.
Supporto del browser delle proprietà di selezione
Potrebbe essere necessario utilizzare prefissi del venditore per far funzionare gli elementi di selezione CSS. Sono i seguenti:
| CSS3 | Prefisso fornitore Ven |
|---|---|
overflow-x: linea di selezione; |
overflow-x: -webkit-marquee; |
stile tendone |
-webkit-tendone-stile |
conteggio-gioco-tendone |
-webkit-tenda-ripetizione |
direzione-marquee: avanti|indietro; |
-webkit-marquee-direction: avanti|indietro; |
marquee-speed |
-webkit-marquee-speed |
| nessun equivalente | -webkit-marquee-increment |
L'ultima proprietà consente di definire quanto grandi o piccoli dovrebbero essere i passaggi mentre il contenuto scorre sullo schermo nel riquadro di selezione.
Per far funzionare la tua selezione, dovresti inserire prima i valori con il prefisso del fornitore e poi seguirli con i valori delle specifiche CSS3. Ad esempio, ecco il CSS per un riquadro di selezione che scorre il testo cinque volte da sinistra a destra all'interno di un riquadro 200x50.
{
larghezza: 200px; altezza: 50px; spazio bianco: nowrap;
trabocco: nascosto;
overflow-x:-webkit-marquee;
-direzione-webkit-marquee: avanti;
-webkit-stile tendone: scroll;
-webkit-marquee-speed: normale;
-webkit-marquee-increment: piccolo;
-webkit-tenda-ripetizione: 5;
overflow-x: linea di selezione;
direzione di selezione: avanti;
stile tendone: scroll;
marquee-speed: normale;
numero di giochi di selezione: 5;
}