De av er som har skrivit HTML länge kanske kommer ihåg elementet. Detta var ett webbläsarspecifikt element som skapade en banner med rullning av text över skärmen. Detta element har aldrig lagts till i HTML specifikation och support för det varierade mycket mellan webbläsare. Människor hade ofta mycket starka åsikter om användningen av detta element - både positivt och negativt. Men oavsett om du älskade eller hatade det tjänade det syftet att synliggöra innehåll som flödade över gränserna.
En del av anledningen till att den aldrig implementerades helt av webbläsare, förutom stark personlig åsikt, var att den betraktas som en visuell effekt och som sådan bör den inte definieras av HTML, som definierar strukturera. Istället ska visuella effekter eller presentationseffekter hanteras av CSS. Och CSS3 lägger till markeringsmodulen för att styra hur webbläsare lägger till markeringseffekt till element.
Nya CSS3-egenskaper
CSS3 lägger till fem nya fastigheter för att hjälpa till att kontrollera hur ditt innehåll visas i partytältet: överströmningsstil, markeringsstil, markeringsspel-räkning, markeringsriktning och markeringshastighet.
överflöd-stil
Egenskapen för överflödesstil (som vi också diskuterade i artikeln CSS Overflow) definierar den föredragna stilen för innehåll som flödar över innehållsrutan. Om du ställer in värdet på markeringslinje eller markeringsblock blockeras ditt innehåll in och ut till vänster / höger (markeringsrad) eller upp / ner (markeringsblock).
markeringsstil
Den här egenskapen definierar hur innehållet ska flyttas till vyn (och ut). Alternativen är skrolla, glida och växla. Scroll börjar med innehållet helt utanför skärmen, och sedan rör det sig över det synliga området tills det hela är helt utanför skärmen igen. Bilden börjar med att innehållet är helt utanför skärmen och sedan rör det sig tills innehållet har flyttat helt till skärmen och det inte finns mer innehåll kvar att glida på skärmen. Slutligen studsar alternativet innehållet från sida till sida och glider fram och tillbaka.
markeringsspel-räkna
En av nackdelarna med att använda MARQUEE-elementet är att partytältet aldrig stannar. Men med stilegenskapens markeringsspel-uppräkning kan du ställa in markeringsramen för att rotera innehållet till och från för ett visst antal gånger.
markeringsriktning
Du kan också välja den riktning som innehållet ska rulla på skärmen. Värdena framåt och bakåt är baserade på textens riktning när överflödestilen är markeringslinje och uppåt eller nedåt när överflödestilen är markeringsblock.
Detaljer för markeringsriktning
överflöd-stil |
Språkriktning | fram- | omvänd |
|---|---|---|---|
partytält-linje |
ltr | vänster | rätt |
| rtl | rätt | vänster | |
markeringsblock |
upp | ner |
markeringshastighet
Den här egenskapen avgör hur snabbt innehållet rullar på skärmen. Värdena är långsamma, normala och snabba. Den faktiska hastigheten beror på innehållet och webbläsaren som visar det, men värdena måste vara långsamma är långsammare än normalt vilket är långsammare än snabbt.
Webbläsarstöd för markeringsegenskaperna
Du kan behöva använda leverantörsprefix för att få CSS-tältelementen att fungera. De är som följer:
| CSS3 | Leverantörsprefix |
|---|---|
overflow-x: markeringslinje; |
overflow-x: -webkit-partytält; |
markeringsstil |
-webkit-partytält-stil |
markeringsspel-räkna |
-webkit-partytält-repetition |
markeringsriktning: framåt | bakåt; |
-webkit-markeringsriktning: framåt | bakåt; |
markeringshastighet |
-webkit-markeringshastighet |
| ingen motsvarighet | -webkit-partytält-steg |
Den sista egenskapen låter dig definiera hur stor eller liten stegen ska vara när innehållet rullar på skärmen i partytältet.
För att få din markeringsram att fungera bör du placera leverantörens prefixvärden först och sedan följa dem med CSS3-specifikationsvärdena. Här är till exempel CSS för en markeringsram som rullar texten fem gånger från vänster till höger i en ruta 200x50.
{
bredd: 200px; höjd: 50px; white-space: nowrap;
överflöd: dold;
overflow-x: -webkit-partytält;
-webkit-markeringsriktning: framåt;
-webkit-markeringsstil: bläddra;
-webkit-markeringshastighet: normal;
-webkit-tält-steg: liten;
-webkit-partytält-repetition: 5;
overflow-x: markeringslinje;
markeringsriktning: framåt;
markeringsstil: bläddra;
markeringshastighet: normal;
partytält-spel-räkning: 5;
}