Azok, akik régóta írnak HTML-t, emlékezhetnek az elemre. Ez egy böngészőspecifikus elem hozta létre a szalagot a képernyőn görgető szöveggel. Ezt az elemet soha nem adták hozzá az HTML specifikációja és támogatása a böngészőkben nagyon eltérő volt. Az embereknek gyakran nagyon erős véleményük volt ennek az elemnek a használatáról - pozitív és negatív is. De akár szerette, akár gyűlölte, azt a célt szolgálta, hogy láthatóvá tegye a dobozhatárokat túllépő tartalmat.
Részben az oka annak, hogy a böngészők soha nem hajtották végre teljes mértékben, eltekintve az erős személyes véleménytől, ez volt vizuális effektusnak tekinthető, és mint ilyen, nem szabad meghatározni a HTML-t, amely meghatározza a szerkezet. Ehelyett a vizuális vagy prezentációs effektusokat CSS-nek kell kezelnie. És a CSS3 hozzáadja a sátormodult annak vezérléséhez, hogy a böngészők hogyan adják hozzá a sátor hatása elemekre.
Új CSS3 tulajdonságok
A CSS3 ötöt ad hozzá új ingatlanok hogy segítsen szabályozni a tartalma megjelenítését a sátorban: túlcsordulás, sátor stílus, sátor-játék-szám, sátor-irány és sátor-sebesség.
túlcsordulás-stílusú
A túlcsordulás stílusú tulajdonság (amelyet a CSS túlcsordulás cikkben is megvitattunk) meghatározza a tartalom mezőbe túlcsorduló tartalmak preferált stílusát. Ha a sátor-sor vagy a sátor-blokk értékét állítja be, akkor a tartalma balra / jobbra (sátor-vonal) vagy fel / le (sátor-blokk) csúszik be és ki.
sátor-stílusú
Ez a tulajdonság határozza meg, hogy a tartalom hogyan kerül a nézetbe (és ahova). A lehetőségek a következők tekercs, csúsztassa és váltogassa. A görgetés azzal kezdődik, hogy a tartalom teljesen kikapcsol a képernyőről, majd áthalad a látható területen, amíg az egész ismét teljesen kikapcsol. A Dia úgy kezdődik, hogy a tartalom teljesen kikapcsol a képernyőről, majd addig mozog, amíg a tartalom teljesen át nem mozdul a képernyőn, és a képernyőn már nincs többé csúsztatható tartalom. Végül az alternatív oldalról oldalra ugrál, előre-hátra csúsztatva.
sátor-játék-számolás
A MARQUEE elem használatának egyik hátránya, hogy a sátor soha nem áll meg. De a stílus tulajdonság sátor-lejátszás-számolással beállíthatja a sátrat, hogy a tartalmat meghatározott számú alkalommal ki- és bekapcsolja.
sátor-irány
Kiválaszthatja azt az irányt is, amelyen a tartalomnak görgetnie kell a képernyőn. Az előre és hátra értékek a szöveg irányultságán alapulnak, amikor a túlcsordulás stílusa sátras vonalú, és fel vagy le, ha a túlcsordulás stílusa sátor blokk.
A sátor-irány részletei
túlcsordulás-stílusú |
Nyelvirány | előre | fordított |
|---|---|---|---|
sátor-sor |
ltr | bal | jobb |
| rtl | jobb | bal | |
sátor-blokk |
fel | le- |
sátor sebessége
Ez a tulajdonság határozza meg, hogy a tartalom milyen gyorsan gördüljön a képernyőn. Az értékek lassúak, normálak és gyorsak. A tényleges sebesség a tartalomtól és az azt megjelenítő böngészőtől függ, de az értékeknek lassúaknak kell lenniük, lassabb a normálnál, ami lassabb, mint gyors.
A sátor tulajdonságainak böngészőtámogatása
Lehet, hogy használnia kell szállító előtagok hogy a CSS sátorelemek működjenek. Ezek a következők:
| CSS3 | Szállító előtag |
|---|---|
overflow-x: sátor-vonal; |
overflow-x: -webkit-sátor; |
sátor-stílusú |
-webkit-sátor-stílusú |
sátor-játék-számolás |
-webkit-sátor-ismétlés |
sátor-irány: előre | hátra; |
-webkit-sátor-irány: előre | hátra; |
sátor sebessége |
-webkit-sátor sebessége |
| nincs megfelelője | -webkit-sátor-növekmény |
Az utolsó tulajdonság lehetővé teszi annak meghatározását, hogy a lépések milyen nagyok vagy kicsiek legyenek, miközben a tartalom görget a képernyőn a sátorban.
A sátor működése érdekében először helyezze el a szállító előtagolt értékeit, majd kövesse őket a CSS3 specifikáció értékeivel. Például itt van a sátor CSS-je, amely ötször görgeti a szöveget balról jobbra egy 200x50-es doboz belsejében.
{
szélesség: 200px; magasság: 50px; white-space: nowrap;
túlcsordulás: rejtett;
overflow-x: -webkit-sátor;
-webkit-sátor-irány: előre;
-webkit-sátor-stílus: görgetés;
-webkit-sátor sebesség: normál;
-webkit-sátor-növekmény: kicsi;
-webkit-sátor-ismétlés: 5;
overflow-x: sátor-vonal;
sátor-irány: előre;
sátor-stílus: görgetés;
sátor sebessége: normál;
sátor-játék-szám: 5;
}