MARQUEE nell'era di HTML5 e CSS3

Quelli di voi che hanno scritto HTML per 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 alla specifica HTML e il suo supporto variava ampiamente tra i vari browser. Le persone hanno spesso opinioni molto forti sull'uso di questo elemento, sia positivo che negativo. Ma se l'hai amato o odiato, lo scopo era quello di rendere visibile il contenuto che traboccava dai confini del riquadro.

Parte del motivo per cui non è mai stata completamente implementata dai browser, a parte la forte opinione personale, è che è considerato un effetto visivo e come tale non dovrebbe essere definito dall'HTML, che definisce la struttura. Invece, gli effetti visivi o di presentazione dovrebbero essere gestiti dai CSS. E CSS3 aggiunge il modulo di selezione per controllare in che modo i browser aggiungono l'effetto di selezione agli elementi.

Nuove proprietà CSS3

Il CSS3 aggiunge cinque nuove proprietà per aiutare a controllare il modo in cui il contenuto viene visualizzato nel riquadro di selezione: troppo pieno stile, tendone in stile, tendone-play-count, tendone direzione e tendone velocità.

troppo pieno stileIl troppo pieno stile proprietà (che ho anche discusso nell'articolo Overflow CSS) definisce lo stile preferito per i contenuti che trabocca la casella del contenuto. Se si imposta il valore su tendone-line o tendone-block il tuo contenuto scorrerà dentro e fuori a sinistra / a destra (tendone-line) o su / giù (tendone-block).

tendone in stileQuesta proprietà definisce in che modo il contenuto si sposterà in vista (e fuori).

Le opzioni sono scorrere, diapositiva e alternato. Scroll inizia con il contenuto completamente fuori dallo schermo, quindi si sposta sull'area visibile fino a quando non è tutto completamente fuori dallo schermo. La diapositiva inizia con il contenuto completamente fuori dallo schermo e quindi si sposta fino a quando il contenuto non si è completamente spostato sullo schermo e non vi è più contenuto lasciato scorrere sullo schermo.

Infine, l'alternanza rimbalza il contenuto da un lato all'altro, facendo scorrere avanti e indietro.

tendone-play-countUno degli svantaggi dell'utilizzo del TENDONE l'elemento è che la selezione non si ferma mai. Ma con la proprietà di stile tendone-play-count puoi impostare il riquadro di selezione per attivare e disattivare il contenuto per un numero specifico di volte.

tendone direzionePuoi anche scegliere la direzione in cui il contenuto dovrebbe scorrere sullo schermo. I valori inoltrare e inverso si basano sulla direzionalità del testo quando il troppo pieno stile è tendone-line e su o giù quando il troppo pieno stile è tendone-block.

Dettagli sulla direzione

troppo pieno stile	Direzione della lingua	inoltrare	inverso
tendone-line	litri	sinistra	destra
	rtl	destra	sinistra
tendone-block		su	giù

tendone velocitàQuesta proprietà determina la velocità di scorrimento del contenuto sullo schermo. I valori sono lento, normale, e veloce. La velocità effettiva dipende dal contenuto e dal browser che la visualizza, ma i valori devono essere lento è più lento di normale che è più lento di veloce.

Supporto per browser delle proprietà della selezione

Potrebbe essere necessario utilizzare i prefissi dei fornitori per far funzionare gli elementi di selezione CSS. Sono come segue:

CSS3	Prefisso fornitore
overflow-x: linea di selezione;	overflow-x: -webkit-tendone;
tendone in stile	-webkit-tendone in stile
tendone-play-count	-webkit-tendone-ripetizione
direzione della selezione: avanti | indietro;	-webkit-marquee-direction: avanti / indietro;
tendone velocità	-webkit-tendone velocità
nessun equivalente	-webkit-tendone-incremento

L'ultima proprietà consente di definire quanto grandi o piccoli devono essere i passaggi mentre il contenuto scorre sullo schermo nel riquadro di selezione.

Per far funzionare il riquadro scorrevole, è necessario posizionare prima i valori con prefisso del fornitore e quindi seguirli con i valori delle specifiche CSS3. Ad esempio, ecco il CSS per una selezione che scorre il testo cinque volte da sinistra a destra all'interno di una casella 200 x 50.

{ larghezza: 200 px; altezza: 50 px; white-space: nowrap; overflow: nascosto; di overflow-x: -webkit-tendone; -webkit-marquee-direction: avanti; -webkit-marquee-style: scroll; -webkit-marquee-speed: normale; -webkit-marquee-increment: small; -webkit-marquee-ripetizione: 5; overflow-x: linea di selezione; direzione della selezione: avanti; stile marquee: scroll; marquee-speed: normale; Conteggio marquee-play: 5;}