Vytváranie posúvateľného obsahu v HTML5 a CSS3 bez MARQUEE

Stanislaw Pytel / Getty Images

Tí z vás, ktorí už dlho píšu HTML, si možno tento prvok pamätajú. Bol to prvok špecifický pre prehliadač, ktorý vytvoril banner s posúvajúcim sa textom po obrazovke. Tento prvok nebol nikdy pridaný do HTML špecifikácia a podpora sa v rôznych prehliadačoch značne líšili. Ľudia mali často veľmi silné názory na používanie tohto prvku – pozitívne aj negatívne. Ale bez ohľadu na to, či ste ho milovali alebo nenávideli, slúžilo na to, aby bol obsah, ktorý prekračoval hranice polí, viditeľný.

Jedným z dôvodov, prečo ho prehliadače nikdy úplne neimplementovali, okrem silného osobného názoru, bolo to, že sa považuje za vizuálny efekt a ako taký by nemal byť definovaný kódom HTML, ktorý definuje štruktúru. Namiesto toho by mali vizuálne alebo prezentačné efekty spravovať CSS. A CSS3 pridáva modul marquee na ovládanie toho, ako prehliadače pridávajú markízový efekt k prvkom.

Nové vlastnosti CSS3

CSS3 pridáva päť nové vlastnosti ktoré vám pomôžu kontrolovať, ako sa váš obsah zobrazuje v oblasti výberu: štýl pretečenia, štýl výberu, počet prehratí, smer výberu a rýchlosť výberu.

prepadový štýl
Vlastnosť overflow-style (o ktorej sme hovorili aj v článku CSS Overflow) definuje preferovaný štýl pre obsah, ktorý preteká obsahové pole. Ak nastavíte hodnotu na marquee-line alebo marquee-block, váš obsah sa bude posúvať dovnútra a von doľava/doprava (čiarka ohraničenia) alebo hore/dole (blok ohraničenia).

v štýle markízy
Táto vlastnosť definuje, ako sa obsah presunie do zobrazenia (a von). Možnosti sú rolovať , posúvajte a striedajte. Posúvanie sa začína s obsahom úplne mimo obrazovky a potom sa posúva cez viditeľnú oblasť, až kým nebude opäť úplne mimo obrazovky. Posúvanie začína s obsahom úplne mimo obrazovky a potom sa posúva naprieč, kým sa obsah úplne nepremiestni na obrazovku a na obrazovke nezostane žiadny obsah, ktorý by sa dal posúvať. Nakoniec striedavo skáče obsah zo strany na stranu a posúva sa tam a späť.

marquee-play-count
Jednou z nevýhod použitia prvku MARQUEE je, že markíza sa nikdy nezastaví. Ale pomocou vlastnosti štýlu marquee-play-count môžete nastaviť výber tak, aby zapínal a vypínal obsah na určitý počet opakovaní.

markíza-smer
Môžete si tiež vybrať smer, ktorým sa má obsah posúvať na obrazovke. Hodnoty vpred a vzad sú založené na smerovosti textu, keď je štýl pretečenia riadkový a nahor alebo nadol, keď je štýl pretečenia blokovaný.

Podrobnosti o smere označenia

|_+_|	Jazykový smer	dopredu	obrátene
|_+_|	ltr	vľavo	správny
	rtl	správny	vľavo
|_+_|		hore	dole

markíza-rýchlosť
Táto vlastnosť určuje, ako rýchlo sa obsah posúva na obrazovke. Hodnoty sú pomalé, normálne a rýchle. Skutočná rýchlosť závisí od obsahu a prehliadača, ktorý ho zobrazuje, ale hodnoty musia byť pomalé, pomalšie ako normálne, čiže pomalšie ako rýchle.

Podpora prehliadača vlastností Marquee

Možno budete musieť použiť predpony predajcu aby prvky označenia CSS fungovali. Sú nasledovné:

CSS3	Predpona dodávateľa
|_+_|	|_+_|
|_+_|	|_+_|
|_+_|	|_+_|
|_+_|	|_+_|
|_+_|	|_+_|
nie ekvivalentné	|_+_|

Posledná vlastnosť vám umožňuje definovať, aké veľké alebo malé by mali byť kroky, keď sa obsah posúva na obrazovke v ohraničení.

Aby váš výber fungoval, mali by ste najskôr umiestniť hodnoty predpony dodávateľa a potom ich nasledovať s hodnotami špecifikácie CSS3. Napríklad tu je CSS pre výber, ktorý posúva text päťkrát zľava doprava vo vnútri poľa 200 x 50.

|_+_|