MARQUEE en l'Edat d'HTML5 i CSS3

Els que heu estat escrivint HTML durant molt de temps podrien recordar l'element. Aquest va ser un element específic del navegador que va crear una pancarta de desplaçament de text a la pantalla. Aquest element no s'ha afegit mai a l'especificació HTML i el seu suport va variar àmpliament en els navegadors. Sovint, les persones tenien opinions molt fortes sobre l'ús d'aquest element, tant positiu com negatiu. Però si t'ha encantat o odiat, ha servit per crear contingut que desbordava els límits del quadre.

Part de la raó per la qual mai no va ser implementada completament pels navegadors, a part d'una forta opinió personal, era que es considerava un efecte visual i com a tal, no s'hauria de definir per l'HTML, que defineix l'estructura. En lloc d'això, els efectes visuals o de presentació han de ser gestionats per CSS. I CSS3 afegeix el mòdul de marquesina per controlar com els navegadors afegeixen l'efecte marquee als elements.

Noves propietats CSS3

CSS3 afegeix cinc propietats noves per ajudar a controlar el contingut del vostre contingut a la marquesina: estil de desbordament, estil de marquesina, marquee-play-count, adreça de marquesina i marquee-speed.

estil de desbordamentEl estil de desbordament La propietat (que també vaig comentar a l'article CSS Overflow) defineix l'estil preferit per als continguts que desborden el quadre de contingut. Si estableix el valor a línia de marquesina o marquesina el vostre contingut es lliscarà cap amunt i cap a l'esquerra / dreta (línia de marquesina) o amunt / avall (marquesina).

estil de marquesinaAquesta propietat defineix com es mourà el contingut (i fora).

Les opcions són desplaçament, diapositiva i alternatiu. El desplaçament comença amb la pantalla de contingut completament deslligada i, a continuació, es mou per l'àrea visible fins que torni a estar completament fora de la pantalla. La diapositiva comença amb el contingut completament fora de la pantalla i després es mou cap amunt fins que el contingut s'ha mogut completament a la pantalla i no hi ha més contingut que queda per lliscar a la pantalla.

Finalment, els suplents reboten el contingut d'un costat a un, desplaçant-se d'anada i tornada.

marquee-play-countUn dels inconvenients d 'utilitzar el MARQUEE L'element és que la marquesina mai no s'atura. Però amb la propietat d'estil marquee-play-count podeu configurar la marquesina per a girar el contingut durant un nombre determinat de vegades.

adreça de marquesinaTambé podeu triar la direcció en què el contingut s'hauria de desplaçar a la pantalla. Els valors endavant i invers es basen en la direccionalitat del text quan el estil de desbordament és línia de marquesina i amunt o avall quan el estil de desbordament és marquesina.

Detalls de la marquesina

estil de desbordament	Direcció d'Idiomes	endavant	invers
línia de marquesina	ltr	esquerra	dret
	rtl	dret	esquerra
marquesina		up	avall

marquee-speedAquesta propietat determina la rapidesa amb que el contingut es desplaça a la pantalla. Els valors són lent, normal, i ràpid. La velocitat real depèn del contingut i del navegador que la mostra, però els valors han de ser lent és més lent que normal que és més lent que ràpid.

Suport del navegador de les propietats de marquesina

És possible que hàgiu d'utilitzar els prefixos del venedor per tal que funcionin els elements de marcatge CSS. Són els següents:

CSS3	Prefix del venedor
desbordament-x: línia de marquesina;	overflow-x: -webkit-marquee;
estil de marquesina	-webkit-marquee-style
marquee-play-count	-webkit-marquee-repetició
marquee-direction: forward | reverse;	-webkit-marquee-direction: forward | backwards;
marquee-speed	-webkit-marquee-speed
sense equivalents	-webkit-marquee-increment

L'última propietat us permet definir quina mida o petita han de ser els passos a mesura que el contingut es desplaça a la pantalla de la marquesina.

Per tal que funcioni la vostra marquesina, primer heu de col·locar els valors prefixats del proveïdor i, després, seguir-los amb els valors d'especificació CSS3. Per exemple, aquí teniu el CSS per a una carpa que es desplaça el text cinc vegades d'esquerra a dreta dins d'una caixa de 200 x 50.

{ ample: 200 px; alçada: 50px; white-space: nowrap; desbordament: amagat; overflow-x: -webkit-marquee; -webkit-marquee-direction: forward; -webkit-marquee-style: scroll; -webkit-marquee-speed: normal; -webkit-marquee-increment: petit; -webkit-marquee-repetition: 5; desbordament-x: línia de marquesina; marquee-direction: forward; marquee-style: scroll; marquee-speed: normal; marquee-play-count: 5;}