Tí z vás, ktorí píšete HTML už dlhšiu dobu, si tento prvok možno pamätajú. Toto bol prvok špecifický pre prehliadač, ktorý vytvoril banner s rolovaním textu po obrazovke. Tento prvok nebol nikdy pridaný do súboru HTML špecifikácia a podpora sa v rôznych prehliadačoch veľmi líšila. Ľudia mali často veľmi silné názory na použitie tohto prvku - pozitívne aj negatívne. Ale či už ste to milovali alebo nenávideli, slúžilo to na zviditeľnenie obsahu, ktorý prekročil hranice poľa.
Jedným z dôvodov, prečo ho prehliadače nikdy úplne neimplementovali, bol okrem silného osobného názoru aj to považuje sa za vizuálny efekt a ako taký by nemal byť definovaný kódom HTML, ktorý definuje štruktúra. Vizuálne alebo prezentačné efekty by namiesto toho mali byť spravované CSS. A CSS3 pridáva výrezový modul na kontrolu toho, ako prehliadače pridávajú efekt stanu k prvkom.
Nové vlastnosti CSS3
CSS3 pridáva päť nové vlastnosti aby sme vám pomohli ovládať, ako sa váš obsah zobrazuje na okraji: štýl preplnenia, štýl okraja, počet okrajov pre prehranie, smer okraja a rýchlosť okraja.
štýl pretečenia
Vlastnosť štýlu pretečenia (o ktorej sme sa tiež rozprávali v článku Pretečenie CSS) definuje preferovaný štýl pre obsah, ktorý preteká cez pole obsahu. Ak nastavíte hodnotu na riadok alebo blok na výber, váš obsah sa posunie dovnútra a von doľava / doprava (riadok) alebo hore / dole (blok na výber).
v štýle markízy
Táto vlastnosť definuje, ako sa bude obsah presúvať do zobrazenia (a von). Možnosti sú zvitok, posuňte a striedajte. Posúvanie sa začína od obsahu úplne mimo obrazovku a potom sa pohybuje po viditeľnej oblasti, kým nie je opäť úplne mimo obrazovku. Prezentácia začína s obsahom úplne mimo obrazovku a potom sa posúva naprieč, kým sa obsah úplne neposunie na obrazovku a na obrazovke už nezostane žiadny ďalší obsah. Nakoniec striedavé odráža obsah zo strany na stranu a posúva sa tam a späť.
hracia značka-hra
Jednou z nevýhod použitia prvku MARQUEE je to, že sa výrez nikdy nezastaví. Ale s vlastnosťou štýlu marquee-play-count môžete nastaviť markízu tak, aby obsah zapínala a vypínala konkrétny početkrát.
smer stanu
Môžete tiež zvoliť smer, ktorým sa má obsah posúvať po obrazovke. Hodnoty vpred a vzad sú založené na smernosti textu, keď je štýl pretečenia označený ako riadok, a hore alebo dole, keď je upravený štýl označený ako blok.
Detaily smeru výrezu
štýl pretečenia |
Jazykový smer | dopredu | obrátiť |
|---|---|---|---|
výrez |
ltr | vľavo | správny |
| rtl | správny | vľavo | |
výrez-blok |
hore | dole |
rýchlosť stanu
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. Hodnoty však musia byť pomalé, pomalšie ako zvyčajne a pomalšie ako rýchle.
Podpora prehľadávacích prvkov vlastností Marquee
Možno budete musieť použiť predvoľby dodávateľa aby boli funkčné prvky šablón CSS funkčné. Sú to tieto:
| CSS3 | Predpona dodávateľa |
|---|---|
overflow-x: výrez; |
overflow-x: -webkit-markíza; |
v štýle markízy |
-webkit-markýzový štýl |
hracia značka-hra |
-webkit-markíza-opakovanie |
smer označenia: dopredu | dozadu; |
-webkit-markýz-smer: dopredu | dozadu; |
rýchlosť stanu |
-webkit-značka-rýchlosť |
| žiadny ekvivalent | -webkit-výrez-prírastok |
Posledná vlastnosť vám umožňuje definovať, aké veľké alebo malé kroky majú byť, keď sa obsah posúva na obrazovke v ráme.
Ak chcete, aby váš program pracoval, mali by ste najskôr umiestniť hodnoty s predponou dodávateľa a potom ich nasledovať hodnotami špecifikácie CSS3. Napríklad tu je CSS pre výber, ktorý v poli s rozmermi 200 x 50 posúva text päťkrát zľava doprava.
{
šírka: 200px; výška: 50px; biely priestor: nowrap;
prepad: skrytý;
overflow-x: -webkit-markíza;
-webkit-markýz-smer: vpred;
-webkit-marquee-style: zvitok;
-webkit-markíza-rýchlosť: normálna;
-webkit-marquee-prírastok: malý;
-webkit-markíza-opakovanie: 5;
overflow-x: výrez;
smer výrezu: vpred;
štýl výrezu: zvitok;
rýchlosť výrezu: normálna;
počet rozohrávok: 5;
}