MARQUEE v dobi HTML5 in CSS3

click fraud protection

Tisti, ki že dolgo pišete HTML, se tega elementa morda spomnite. To je bil element, specifičen za brskalnik, ki je ustvaril pasico za drsenje besedila po zaslonu. Ta element ni bil nikoli dodan v HTML specifikacija in podpora zanj sta se med brskalniki zelo razlikovali. Ljudje so imeli pogosto zelo močna mnenja o uporabi tega elementa - tako pozitivna kot negativna. Ne glede na to, ali ste ga ljubili ali sovražili, je služil namenu, da je bila vsebina, ki je presegala meje polja, vidna.

Del vzrokov, da ga brskalniki nikoli niso v celoti uvedli, razen močnega osebnega mnenja, je bil ta se šteje za vizualni učinek in ga kot takega ne bi smel definirati HTML, ki opredeljuje struktura. Namesto tega mora vizualne ali predstavitvene učinke upravljati CSS. In CSS3 doda modul za označevanje, da nadzira, kako brskalniki dodajo šotorski učinek elementom.

Nove lastnosti CSS3

CSS3 doda pet nove lastnosti za lažji nadzor nad prikazom vaše vsebine v oznaki: slog prelivanja, slog oznake, štetje predvajanja, število smeri in hitrost.

instagram viewer

preliven slog
Lastnost sloga overflow (o čemer smo govorili tudi v članku CSS Overflow) definira prednostni slog za vsebino, ki preplavi polje z vsebino. Če nastavite vrednost na marquee-line ali marquee-block, bo vsebina zdrsnila v levo / desno (marquee-line) ali gor / dol (marquee-block).

šotorski slog
Ta lastnost določa, kako se bo vsebina premikala (in izstopala). Možnosti so pomaknite se, drsnik in izmenično. Pomikanje se začne z vsebino popolnoma zunaj zaslona, ​​nato pa se premika po vidnem območju, dokler ni spet povsem zunaj zaslona. Diapozitiv se začne z vsebino popolnoma zunaj zaslona, ​​nato pa se premika navzgor, dokler se vsebina v celoti ne premakne na zaslon in na njej ni več vsebine, ki bi lahko drsila po zaslonu. Nazadnje, nadomestni odbije vsebino z ene strani na drugo, drsi naprej in nazaj.

marquee-play-count
Ena od pomanjkljivosti uporabe elementa MARQUEE je ta, da se šotor nikoli ne ustavi. Toda z lastnostjo sloga marquee-play-count lahko določite, da se določena količina časa zasuka in izklopi vsebino.

smer šotora
Izberete lahko tudi smer, po kateri naj se vsebina premika po zaslonu. Vrednosti naprej in nazaj temeljijo na usmerjenosti besedila, ko je slog prelivanja označena črta in navzgor ali navzdol, ko je slog prelivanja označen blok.

Podrobnosti o smeru za označevanje

preliven slog Jezikovna smer naprej vzvratno
marquee-line ltr levo prav
rtl prav levo
šotorski blok gor dol

marquee-speed
Ta lastnost določa, kako hitro se vsebina pomika po zaslonu. Vrednosti so počasne, običajne in hitre. Dejanska hitrost je odvisna od vsebine in brskalnika, ki jo prikazuje, vendar morajo biti vrednosti počasne, počasnejše kot običajno, kar je počasneje kot hitro.

Podpora brskalnika lastnosti oznake

Morda boste morali uporabiti predpone prodajalcev da bodo elementi oznak CSS delovali. Ti so naslednji:

CSS3 Predpona prodajalca
overflow-x: marquee-line; overflow-x: -webkit-marquee;
šotorski slog -webkit-marquee-style
marquee-play-count -webkit-marquee-ponavljanje
smer naklona: naprej | vzvratno; -webkit-marquee-direction: naprej | nazaj;
marquee-speed -webkit-marquee-speed
nobenega enakovrednega -webkit-marquee-prirast

Zadnja lastnost vam omogoča, da določite, kako veliki ali majhni naj bodo koraki, ko se vsebina pomika po zaslonu v nalepki.

Če želite, da bo vaša oznaka delovala, morate najprej namestiti vnaprej določene vrednosti prodajalca in jim slediti z vrednostmi specifikacije CSS3. Tu je na primer CSS za oznako, ki besedilo petkrat pomakne od leve proti desni znotraj polja 200 x 50.

{
širina: 200px; višina: 50px; presledek: zdaj;
preliv: skrit;
overflow-x: -webkit-marquee;
-webkit-marquee-direction: naprej;
-webkit-marquee-style: pomikanje;
-webkit-marquee-speed: normalno;
-webkit-marquee-prirastek: majhen;
-webkit-marquee-ponovitev: 5;
overflow-x: marquee-line;
smer šotora: naprej;
šotorski slog: pomikanje;
hitrost naklona: normalno;
število nagradnih iger: 5;
}
instagram story viewer