Skip to main content

MARQUEE i åldern av HTML5 och CSS3

Building Dynamic Web Apps with Laravel by Eric Ouyang (Maj 2024)

Building Dynamic Web Apps with Laravel by Eric Ouyang (Maj 2024)
Anonim

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.

overflow-stilDe 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-stilDen här egenskapen definierar hur innehållet kommer att flyttas till bild (och ut).

Alternativen är 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.

Slutligen studsar alternativt innehållet från sida till sida, glider fram och tillbaka.

tält-play-countEn 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-riktningenDu 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-stilSpråkriktningframåt-omvänd
tält-lineltrvänsterhöger
rtlhögervänster
tält-blocket uppner

tält-hastighetDen 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

Du kan behöva använda leverantörs prefix för att få CSS markeringselementen att fungera. De är som följer:

CSS3Leverantö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

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.

{ 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;}