Tí, ktorí písali HTML na dlhú dobu, si môžu zapamätať prvok. Bol to prvok špecifický pre prehliadač, ktorý vytvoril banner posúvania textu na obrazovke. Tento prvok nebol nikdy pridaný do špecifikácie HTML a jeho podpora sa v rámci prehliadačov značne líšila. Ľudia mali často veľmi silné názory na použitie tohto prvku - pozitívne aj negatívne. Ale či ste ho milovali alebo nenávideli, slúžili na to, aby sa obsah, ktorý prekryje hranice krabice, stal viditeľným.
Časť dôvodov, prečo to nie je úplne implementované prehliadačmi, okrem silného osobného názoru, spočíva v tom, že sa považuje za vizuálny efekt a ako taký by nemal byť definovaný HTML, ktorý definuje štruktúru. Namiesto toho by mali vizuálne alebo prezentačné efekty spravovať CSS. A CSS3 pridá modul výškopisu, aby určil, ako majú prehliadače pridať efekt markýzy na prvky.
Nové vlastnosti CSS3
CSS3 pridáva päť nových vlastností, ktoré vám pomôžu kontrolovať, ako sa váš obsah zobrazuje v stĺpci: pretekaný štýl, strihový štýl, počet strihových hier, smer posunu a rýchlosť strihu.
overflow-style
Vlastnosť pretečeného štýlu (o ktorej som sa tiež diskutovala v článku CSS Overflow) definuje preferovaný štýl pre obsahy, ktoré pretečujú obsahové pole. Ak nastavíte hodnotu na lineárnu alebo blokovú značku, váš obsah sa posunie smerom dovnútra a von doľava / doprava (značka riadok) alebo hore / dole (blok výbavy).
stan-style
Táto vlastnosť definuje, ako sa obsah presunie do zobrazenia (a von).
Možnosti sú posúvanie, posúvanie a striedanie. Posúvanie začína s obsahom úplne mimo obrazovku a potom sa pohybuje cez viditeľnú oblasť, kým sa úplne úplne vypne obrazovka. Slide začína s obsahom úplne mimo obrazovku a potom sa pohybuje až dovtedy, kým sa obsah úplne nepremiestní na obrazovku a na obrazovke už nie je viac obsahu.
A nakoniec, striedavý posúva obsah zo strany na stranu a posúva sa tam a späť.
stan-play-count
Jednou z nevýhod použitia prvku MARQUEE je, že markýza sa nikdy nezastaví. Ale s vlastnosťou štýlu marquee-play-count môžete nastaviť stôl, aby sa obsah striedal a zapínal niekoľko krát.
stan smeru
Môžete tiež zvoliť smer, ktorým sa má obsah posúvať na obrazovke. Hodnoty dopredu a dozadu sú založené na smerovej šírke textu, keď pretečený štýl je lineárne a hore alebo dole, keď je pretečený štýl blokom.
Údaje o smerovaní
| overflow-style | Jazykové smerovanie | vpred | zvrátiť |
|---|---|---|---|
| stan-linka | ltr | ľavý | správny |
| RTL | správny | ľavý | |
| stan-blok | hore | nadol |
stan-speed
Táto vlastnosť určuje rýchlosť rolovania obsahu na obrazovke. Hodnoty sú pomalé, normálne a rýchle. Skutočná rýchlosť závisí od obsahu a prehliadača zobrazovania, ale hodnoty musia byť pomalé, je pomalšie, ako je normálne, čo je pomalšie ako rýchle.
Podpora prehliadača pre vlastnosť Marquee
Možno budete musieť použiť prefixy dodávateľov, aby ste mohli pracovať s prvkami CCA. Sú tieto:
| CSS3 | Predvoľba dodávateľa |
|---|---|
| pretekanie-x: marquee-line; | pretečenie-x: -webkit-marquee; |
| stan-style | -webkit-stan-style |
| stan-play-count | -webkit-stan-opakovanie |
| smer smeru posunu: dopredu | späť; | -webkit-smer smeru: dopredu | dozadu; |
| stan-speed | -webkit-stan-rýchlostný |
| žiadny ekvivalent | -webkit-stan-prírastok |
Posledná vlastnosť umožňuje definovať, aké veľké alebo malé kroky majú byť, ako sa obsah posúva na obrazovke v stĺpci.
Ak chcete, aby vaše markery fungovali, mali by ste najskôr umiestniť preddefinované hodnoty dodávateľa a potom ich dodržiavať s hodnotami špecifikácie CSS3. Napríklad tu je CSS pre markant, ktorý posúva text päťkrát zľava doprava do 200x50 boxu.
{
šírka: 200px; výška: 50px; white-space: teraz;
pretečenie: skryté;
pretečeniu-x: -webkit výrezov;
-webkit-smer smeru: vpred;
-webkit-marquee-style: rolovať;
-webkit-marquee-speed: normálne;
-webkit-marquee-prírastok: malý;
-webkit-marquee-opakovanie: 5;
pretekanie-x: marquee-line;
smer smeru: vpred;
strih štýlu: posúvač;
rýchlosť strihu: normálna;
počet žetónov: 5;
}