De av dere som har skrevet HTML i lang tid, husker kanskje elementet. Dette var et nettleserspesifikt element som skapte et banner med rullende tekst over skjermen. Dette elementet ble aldri lagt til HTML spesifikasjon og støtte for det varierte mye mellom nettlesere. Folk hadde ofte veldig sterke meninger om bruken av dette elementet - både positivt og negativt. Men uansett om du elsket eller hatet det, tjente det formålet å synliggjøre innhold som rant over boksegrensene.
En del av grunnen til at den aldri ble implementert fullt ut av nettlesere, bortsett fra sterk personlig mening, var at det betraktes som en visuell effekt, og som sådan bør den ikke defineres av HTML, som definerer struktur. I stedet bør visuelle effekter eller presentasjonseffekter styres av CSS. Og CSS3 legger til markeringsmodulen for å kontrollere hvordan nettlesere legger til telteffekt til elementer.
Nye CSS3-egenskaper
CSS3 legger til fem nye eiendommer for å hjelpe deg med å kontrollere hvordan innholdet ditt vises i partyteltet: overløpsstil, teltstil, telt-spill-telling, teltretning og telt-hastighet.
overløpstil
Overflyt-stil-egenskapen (som vi også diskuterte i artikkelen CSS Overflow) definerer den foretrukne stilen for innhold som renner over innholdsboksen. Hvis du setter verdien til markeringslinje eller markeringsblokk, vil innholdet gli inn og ut til venstre / høyre (markeringslinje) eller opp / ned (markeringsblokk).
telt-stil
Denne egenskapen definerer hvordan innholdet vil flytte til visning (og ut). Alternativene er bla, skyv og alterner. Bla 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 til innholdet har beveget seg helt på skjermen og det ikke er mer innhold igjen å skyve på skjermen. Til slutt spretter alternativ innholdet fra side til side, glir frem og tilbake.
telt-spill-telling
En av ulempene ved å bruke MARQUEE-elementet er at teltet aldri stopper. Men med stileiendommen telt-spill-teller kan du stille inn teltet til å rotere innholdet av og på et bestemt antall ganger.
teltretning
Du kan også velge retningen som innholdet skal bla på skjermen. Verdiene forover og bakover er basert på retningen i teksten når overløpsstilen er markeringslinje og opp eller ned når overløpsstilen er markeringsblokk.
Marquee-Direction Detaljer
overløpstil |
Språkretning | framover | omvendt |
|---|---|---|---|
teltlinje |
ltr | venstre | Ikke sant |
| rtl | Ikke sant | venstre | |
teltblokk |
opp | ned |
telt-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, noe som er tregere enn raskt.
Nettleserstøtte for markeringsegenskapene
Du må kanskje bruke leverandørprefikser for å få CSS-teltelementene til å fungere. De er som følger:
| CSS3 | Leverandørprefiks |
|---|---|
overflow-x: telt-linje; |
overløp-x: -webkit-partytelt; |
telt-stil |
-webkit-telt-stil |
telt-spill-telling |
-webkit-telt-repetisjon |
teltretning: fremover | bakover; |
-webkit-teltretning: fremover | bakover; |
telt-hastighet |
-webkit-telt-hastighet |
| ingen tilsvarende | -webkit-telt-økning |
Den siste egenskapen lar deg definere hvor store eller små trinnene skal være når innholdet ruller på skjermen i partyteltet.
For å få teltet ditt til å fungere, bør du plassere leverandørens prefikserte verdier først og deretter følge dem med CSS3-spesifikasjonsverdiene. Her er for eksempel CSS for et partytelt som ruller teksten fem ganger fra venstre til høyre i en 200x50-rute.
{
bredde: 200px; høyde: 50px; white-space: nowrap;
overløp: skjult;
overløp-x: -webkit-partytelt;
-webkit-teltretning: fremover;
-webkit-telt-stil: bla;
-webkit-telt-hastighet: normal;
-webkit-marquee-inkrement: liten;
-webkit-telt-repetisjon: 5;
overflow-x: telt-linje;
teltretning: fremover;
telt-stil: bla;
markeringshastighet: normal;
telt-spill-telling: 5;
}