CSS3 – Marquee is terug

De ooit zo verwenste tag die alleen in Microsofts browser Internet Explorer werkte heeft een opvolger gekregen, maar nu in de CSS 3 specificatie. ‘Leuk’zul je denken, maar wat was marquee ook alweer? Als je tekst tussen <marquee> en </marquee> plaatste dan ging deze tekst als een lichtkrant over je scherm. Vooral beginnende webmasters vinden deze variant (ja je komt het nog steeds tegen) erg leuk. Voor hen, en voor al die andere mensen is er goed nieuws. In CSS 3 kun je marquee weer gebruiken, nu met allerlei toevoegingen.

Marquee is in CSS 3 verdeeld in 5 onderdelen. Dit zijn de volgende:
marquee-direction – richting bepalen
marquee-loop – het aantal keren dat de lichtkrant draait
marquee-play-count – het aantal keren dat de lichtkrant voorbij moet komen
marquee-speed – de snelheid van de lichtkrant
marquee-style – de stijl van de lichtkrant.

Daarbij moet je ook nog overflow-style: marquee; toevoegen aan de stijl.

Even een korte uitleg:
marquee-direction
Hiermee kun je de richting bepalen voor de lichtkrant. Er zijn twee mogelijkheden ‘forward’ en ‘reverse’. Vooruit en achteruit, waarbij vooruit dus van links naar rechts is en van rechts naar links achteruit.

marquee-loop
Hiermee kun je de loop bepalen. Dit kan oneindig (infinite) zijn en dit kan een aantal inhouden.

marquee-play-count
Het aantal keren dat de lichtkrant wordt afgespeeld. Dit kan ook weer oneindig (infinite) zijn, en het kan een geheel getal (bijvoorbeeld 2) mee krijgen.

marquee-speed
Hier wordt de snelheid mee bepaald. Drie varianten zijn mogelijk: ‘slow’, ‘normal’ en ‘fast’, wat staat voor langzaam, gewoon en snel.

marquee-style
Ook weer drie mogelijkheden, scroll, slide en alternate.
Scroll is dat het in het scherm als een lichtkrant voorbij loopt.
Slide is dat het net als een dia binnenglijdt, maar dat de tekst niet uit beeld verdwijnt, maar blijft staan.
Alternate laat de tekst heen en weer lopen in en dan het scherm weer uit, maar als de breedte bepaald is blijft dat stuk van de tekst zichtbaar .

Je ziet dat het lastig omschrijven is, maar hopelijk geeft het je enigszins een beeld van deze stijl. Bij mijn weten zijn er nog geen browsers die dit al kunnen laten zien, zodra dat kan zal ik een voorbeeld zichtbaar gaan maken.

In ieder geval heeft marquee de status van Candidate Recommendation (CR). Wat wil zeggen dat het hoog op de verlanglijst staat om bij de uiteindelijke versie van CSS3 te gaan horen.

Ik hoop de komende weken meerdere onderdelen van CSS 3 te gaan behandelen zodat je al enige kennis opdoet (En ik ook).