Opprette rullbart innhold i HTML5 og CSS3 uten MARQUEE

Stanislaw Pytel / Getty Images

De av dere som har skrevet HTML i lang tid husker kanskje elementet. Dette var et nettleserspesifikt element som skapte et banner med rulletekst over skjermen. Dette elementet ble aldri lagt til HTML spesifikasjoner og støtte for det varierte mye på tvers av nettlesere. Folk hadde ofte veldig sterke meninger om bruken av dette elementet - både positive og negative. Men enten du elsket eller hatet det, tjente det formålet med å synliggjøre innhold som gikk over boksgrensene.

Noe av grunnen til at det aldri ble fullstendig implementert av nettlesere, bortsett fra en sterk personlig mening, var at det regnes som en visuell effekt, og som sådan bør det ikke defineres av HTML, som definerer strukturen. I stedet bør visuelle effekter eller presentasjonseffekter administreres av CSS. Og CSS3 legger til markeringsmodulen for å kontrollere hvordan nettlesere legger til marquee effekt til elementer.

Nye CSS3-egenskaper

CSS3 legger til fem nye eiendommer for å hjelpe deg med å kontrollere hvordan innholdet ditt vises i markeringsrammen: overløpsstil, teltstil, teltspill-telling, markeringsretning og markeringshastighet.

overløpsstil
Overflow-style-egenskapen (som vi også diskuterte i artikkelen CSS Overflow) definerer den foretrukne stilen for innhold som flyter over innholdsboksen. Hvis du setter verdien til marquee-line eller marquee-block, vil innholdet ditt gli inn og ut til venstre/høyre (marquee-line) eller opp/ned (marquee-block).

telt-stil
Denne egenskapen definerer hvordan innholdet skal vises (og ut). Alternativene er bla , skyv og veksle. Scroll starter med innholdet helt utenfor skjermen, og deretter beveger det seg over det synlige området til det hele er helt utenfor skjermen igjen. Lysbildet starter med innholdet helt utenfor skjermen, og deretter beveger det seg over til innholdet har flyttet seg helt inn på skjermen og det ikke er mer innhold igjen å skyve på skjermen. Til slutt spretter innholdet alternativt fra side til side, og glir frem og tilbake.

marquee-play-count
En av ulempene med å bruke MARQUEE-elementet er at teltet aldri stopper. Men med stilegenskapen marquee-play-count kan du stille inn markeringsrammen til å rotere innholdet av og på et bestemt antall ganger.

markeringsretning
Du kan også velge retningen innholdet skal rulle på skjermen. Verdiene fremover og bakover er basert på retningen til teksten når overløpsstilen er markeringslinje og opp eller ned når overløpsstilen er markeringsblokk.

Marquee-Direction detaljer

|_+_|	Språkretning	framover	omvendt
|_+_|	ltr	venstre	Ikke sant
	rtl	Ikke sant	venstre
|_+_|		opp	ned

marquee-hastighet
Denne egenskapen bestemmer hvor raskt innholdet ruller på skjermen. Verdiene er sakte, normale og raske. Den faktiske hastigheten avhenger av innholdet og nettleseren som viser det, men verdiene må være sakte er tregere enn normalt som er tregere enn rask.

Nettleserstøtte for Marquee Properties

Du må kanskje bruke leverandørprefikser for å få CSS-markeringselementene til å fungere. De er som følger:

CSS3	Leverandørprefiks
|_+_|	|_+_|
|_+_|	|_+_|
|_+_|	|_+_|
|_+_|	|_+_|
|_+_|	|_+_|
ikke tilsvarende	|_+_|

Den siste egenskapen lar deg definere hvor store eller små trinnene skal være når innholdet ruller på skjermen i rammen.

For å få markeringsrammen til å fungere, bør du plassere leverandørens prefiksverdier først og deretter følge dem med CSS3-spesifikasjonsverdiene. For eksempel, her er CSS for en markeringsramme som ruller teksten fem ganger fra venstre til høyre inne i en 200x50 boks.

|_+_|