De af jer, der har skrevet HTML i lang tid, kan huske elementet. Dette var et browserspecifikt element, der skabte et banner med rulletekst over skærmen. Dette element blev aldrig føjet til HTML specifikation og support til det varierede meget på tværs af browsere. Folk havde ofte meget stærke meninger om brugen af dette element - både positivt og negativt. Men hvad enten du elskede eller hadede det, tjente det formålet med at synliggøre indhold, der oversvømmede boksens grænser.
En del af grunden til, at det aldrig blev implementeret fuldt ud af browsere, bortset fra stærk personlig mening, var det det betragtes som en visuel effekt, og som sådan bør det ikke defineres af HTML, som definerer struktur. I stedet skal visuelle effekter eller præsentationseffekter styres af CSS. Og CSS3 tilføjer teltmodulet for at kontrollere, hvordan browsere tilføjer telteffekt til elementer.
Nye CSS3 egenskaber
CSS3 tilføjer fem nye ejendomme for at hjælpe med at kontrollere, hvordan dit indhold vises i teltet: overløbsstil, teltstil, telt-play-optælling, teltretning og telt-hastighed.
overløb-stil
Egenskaben overløbsstil (som vi også diskuterede i artiklen CSS Overflow) definerer den foretrukne typografi for indhold, der overløber indholdsfeltet. Hvis du indstiller værdien til marquee-line eller marquee-block, glider dit indhold ind og ud til venstre / højre (marquee-line) eller op / ned (marquee-block).
telt-stil
Denne egenskab definerer, hvordan indholdet flyttes til visning (og ud). Indstillingerne er rul, glide og skifte. Rulning starter med indholdet helt fra skærmen, og derefter bevæger det sig over det synlige område, indtil det hele er helt væk fra skærmen igen. Slide starter med indholdet helt væk fra skærmen, og derefter bevæger det sig, indtil indholdet er flyttet helt ind på skærmen, og der ikke er mere indhold tilbage til at glide på skærmen. Endelig hopper alternativet indholdet fra side til side og glider frem og tilbage.
telt-leg-optælling
En af ulemperne ved at bruge MARQUEE-elementet er, at teltet aldrig stopper. Men med stilegenskaben marquee-play-count kan du indstille partyteltet til at rotere indholdet til og fra for et bestemt antal gange.
teltretning
Du kan også vælge den retning, som indholdet skal rulle på skærmen. Værdierne fremad og bagud er baseret på retningsbestemmelsen af teksten, når overløbsstil er markeringslinje og op eller ned, når overløbsstil er markeringsblok.
Detaljer om markeringsretning
overløb-stil |
Sprogretning | frem | baglæns |
|---|---|---|---|
telt-linje |
ltr | venstre | ret |
| rtl | ret | venstre | |
teltblok |
op | ned |
telt-hastighed
Denne egenskab bestemmer, hvor hurtigt indholdet ruller på skærmen. Værdierne er langsomme, normale og hurtige. Den faktiske hastighed afhænger af indholdet og browseren, der viser det, men værdierne skal være langsomme er langsommere end normalt, hvilket er langsommere end hurtigt.
Browsersupport til Marquee Properties
Du skal muligvis bruge sælgerpræfikser for at få CSS-teltelementerne til at fungere. De er som følger:
| CSS3 | Sælgerpræfiks |
|---|---|
overløb-x: telt-linje; |
overflow-x: -webkit-telt; |
telt-stil |
-webkit-telt-stil |
telt-leg-optælling |
-webkit-telt-gentagelse |
teltretning: fremad | baglæns; |
-webkit-teltretning: fremad | baglæns; |
telt-hastighed |
-webkit-telt-hastighed |
| intet ækvivalent | -webkit-telt-stigning |
Den sidste egenskab giver dig mulighed for at definere, hvor store eller små trin skal være, når indholdet ruller på skærmen i markeringsrammen.
For at få din markeringsramme til at virke, skal du placere sælgerpræfikserede værdier først og derefter følge dem med CSS3-specifikationsværdierne. For eksempel er her CSS for et telt, der ruller teksten fem gange fra venstre til højre inde i et 200x50 felt.
{
bredde: 200 px; højde: 50px; hvid-plads: nowrap;
overløb: skjult;
overflow-x: -webkit-telt;
-webkit-teltretning: fremad;
-webkit-telt-stil: rulle;
-webkit-marquee-hastighed: normal;
-webkit-marquee-inkrement: lille;
-webkit-telt-gentagelse: 5;
overløb-x: telt-linje;
teltretning: fremad;
telt-stil: rulle;
telthastighed: normal;
telt-play-optælling: 5;
}