MARQUEE în epoca HTML5 și CSS3

Aceia dintre voi care scriu HTML pentru o lungă perioadă de timp pot aminti elementul. Acesta a fost un element specific browserului care a creat un banner de derulare a textului pe ecran. Acest element nu a fost adăugat niciodată în specificația HTML, iar suportul pentru acesta a variat foarte mult între browsere. Oamenii aveau adesea opinii foarte puternice despre utilizarea acestui element - atât pozitiv, cât și negativ. Dar dacă l-ați iubit sau l-ați urât, acesta a servit scopului de a face conținutul care a depășit limitele casetei vizibile.

O parte din motivul pentru care nu a fost niciodată implementat pe deplin de browsere, în afară de opinia personală puternică, a fost că este considerat un efect vizual și ca atare nu ar trebui să fie definit de codul HTML, care definește structura. În schimb, efectele vizuale sau de prezentare ar trebui să fie gestionate de CSS. Și CSS3 adaugă modulul marquee pentru a controla modul în care browserele adaugă efectul de marquee elementelor.

Noi proprietăți CSS3

CSS3 adaugă cinci proprietăți noi pentru a vă ajuta să controlați modul în care conținutul dvs. este afișat în marcă: preaplin stil, Stil Marquee, Marquee-play-count, marquee-direcție și Marquee viteză.

preaplin stil preaplin stil proprietate (pe care am discutat-o ​​și în articolul Overflow CSS) definește stilul preferat pentru conținutul care depășește caseta de conținut. Dacă setați valoarea la Marquee-line sau marquee-bloc conținutul dvs. va aluneca și va ieși spre stânga / dreapta (Marquee-line) sau sus / jos (marquee-bloc).

Stil MarqueeAceastă proprietate definește modul în care conținutul se va muta în vizualizare (și ieșire).

Opțiunile sunt sul, diapozitiv și alterna. Derulați începe cu conținutul complet în afara ecranului și apoi se deplasează în zona vizibilă până când ecranul este complet oprit din nou. Diapozitivul începe cu conținutul complet dezactivat pe ecran și apoi se mișcă până când conținutul se mișcă complet pe ecran și nu mai rămâne conținut pentru alunecare pe ecran.

În cele din urmă, alternativul bate conținutul dintr-o parte în alta, alunecând înainte și înapoi.

Marquee-play-countUnul din dezavantajele utilizării marchiză element este faptul că marquee nu se oprește niciodată. Dar cu proprietatea stilului Marquee-play-count puteți seta marcajul să rotească și să închidă conținutul pentru un anumit număr de ori.

marquee-direcțieDe asemenea, puteți alege direcția în care conținutul să fie derulat pe ecran. Valorile redirecţiona și inversa se bazează pe direcționalitatea textului atunci când preaplin stil este Marquee-line și în sus sau în jos atunci când preaplin stil este marquee-bloc.

Marquee-Direction Detalii

preaplin stil	Direcția de limbă	redirecţiona	inversa
Marquee-line	LTR	stânga	dreapta
	rtl	dreapta	stânga
marquee-bloc		sus	jos

Marquee vitezăAceastă proprietate determină cât de repede se derulează conținutul pe ecran. Valorile sunt încet, normal, și rapid. Viteza reală depinde de conținut și de browserul care îl afișează, dar valorile trebuie să fie încet este mai lent decât normal care este mai lent decât rapid.

Sprijinul browserului pentru proprietățile Marquee

Este posibil să fie necesar să utilizați prefixele furnizorilor pentru a obține elementele de marcă CSS să funcționeze. Ele sunt după cum urmează:

CSS3	Prefixul furnizorului
overflow-x: marquee-line;	overflow-x: -webkit-marquee;
Stil Marquee	-webkit-Marquee stil
Marquee-play-count	-webkit-marquee-repetiție
direcția marcajului: înainte | înapoi;	-webkit-marquee-direction: forward | înapoi;
Marquee viteză	-webkit-Marquee-viteză
niciun echivalent	-webkit-marquee-increment

Ultima proprietate vă permite să definiți cât de mari sau mici ar trebui să fie pașii pe măsură ce conținutul se derulează pe ecran în marcă.

Pentru ca marcheta dvs. să funcționeze, ar trebui să plasați mai întâi valorile prefixate ale furnizorului și apoi să le urmați cu valorile specificațiilor CSS3. De exemplu, aici este CSS pentru un marquee care derulează textul de cinci ori de la stânga la dreapta într-o cutie de 200x50.

{ lățime: 200px; înălțime: 50px; spațiu alb: acum; overflow: ascuns; overflow-x: -webkit-cadru de selecție; -webkit-marquee-direction: forwards; -webkit-marquee-style: scroll; -webkit-marquee-speed: normal; -webkit-marquee-increment: mic; -webkit-marquee-repetiție: 5; overflow-x: marquee-line; direcția marcajului: înainte; marquee-style: scroll; marquee-speed: normal; marquee-play-count: 5;}