De av er som har skrivit HTML länge kan komma ihåg elementet. Det här var ett webbläsarspecifikt element som skapade en banner med rullningstext över skärmen. Detta element har aldrig lagts till i HTML-specifikationen och stöd för det varierade mycket över alla webbläsare. Människor hade ofta mycket starka åsikter om användningen av detta element - både positivt och negativt. Men om du älskade eller hatade det, tjänade den syftet att göra innehåll som överflödde boxens gränser synliga.
En del av anledningen till att den aldrig helt implementerades av webbläsare, förutom stark personlig åsikt, var att det betraktas som en visuell effekt och som sådan bör den inte definieras av HTML, som definierar strukturen. Istället bör visuella eller presentationseffekter hanteras av CSS. Och CSS3 lägger till markeringsmodulen för att kontrollera hur webbläsare lägger till markeringseffekten till element.
Nya CSS3 egenskaper
CSS3 lägger till fem nya egenskaper för att styra hur ditt innehåll visas i markeringen: overflow-stil
, tält-stil
, tält-play-count
, tält-riktningen
och tält-hastighet
.
Alternativen är Slutligen studsar alternativt innehållet från sida till sida, glider fram och tillbaka. Du kan behöva använda leverantörs prefix för att få CSS markeringselementen att fungera. De är som följer: Den sista egenskapen låter dig definiera hur stor eller liten stegen ska vara när innehållet rullar på skärmen i markeringen. För att få din markeringsfunktion att fungera bör du först lägga leverantörens prefixade värden och följa dem med CSS3-specifikationsvärdena. Till exempel, här är CSS för en markering som rullar texten fem gånger från vänster till höger inuti en 200x50 låda.overflow-stil
De overflow-stil
egendom (som jag också diskuterade i artikeln CSS Overflow) definierar den föredragna stilen för innehåll som överflödar innehållsrutan. Om du ställer in värdet till tält-line
eller tält-blocket
Ditt innehåll kommer att glida in och ut till vänster / höger (tält-line
) eller upp / ner (tält-blocket
).tält-stil
Den här egenskapen definierar hur innehållet kommer att flyttas till bild (och ut).skrolla
, glida
och alternativ
. Scroll börjar med innehållet helt avskärmt och sedan rör det sig över det synliga området tills det är helt helt utanför skärmen igen. Slide börjar med innehållet helt från skärmen och sedan flyttas det över tills innehållet har flyttats helt på skärmen och det finns inget mer innehåll kvar för att glida på skärmen.tält-play-count
En av nackdelarna med att använda TÄLT
elementet är att tältet aldrig slutar. Men med stilen egendom tält-play-count
Du kan ställa in markeringen för att rotera innehållet på och av för ett visst antal gånger.tält-riktningen
Du kan också välja vilken riktning innehållet ska rulla på skärmen. Värdena framåt-
och omvänd
baseras på textens riktning när overflow-stil
är tält-line
och upp eller ner när overflow-stil
är tält-blocket
.Marquee-Direction detaljer
overflow-stil
Språkriktning framåt- omvänd tält-line
ltr vänster höger rtl höger vänster tält-blocket
upp ner tält-hastighet
Den här egenskapen bestämmer hur snabbt innehållet rullar på skärmen. Värdena är långsam
, vanligt
, och snabb
. Den faktiska hastigheten beror på innehållet och webbläsaren som visar det, men värdena måste vara långsam
är långsammare än vanligt
vilket är långsammare än snabb
.Browser Support för Marquee Properties
CSS3 Leverantörs prefix överflöd-x: markeringslinje;
overflow-x: -webkit-markering;
tält-stil
-webkit-tält-stil
tält-play-count
-webkit-marquee-upprepning
markeringsriktning: framåt | omvänd;
-webkit-markeringsriktning: framåt | bakåt;
tält-hastighet
-webkit-marquee-hastighet
ingen ekvivalent -webkit-marquee-inkrement
{ bredd: 200px; höjd: 50px; white-space: nowrap; överflöde: gömd; överströmnings-x: -webkit-tält; -webkit-markeringsriktning: framåt; -webkit-markeringsstil: bläddra -webkit-markeringshastighet: normal; -webkit-markeringshöjning: liten; -webkit-marquee-repetition: 5; överflöd-x: markeringslinje; markeringsriktning: framåt; markeringsstil: bläddra markeringshastighet: normal; markeringsspel-count: 5;}