Marquee i CSS - Begynder's Guide
Marquee blev først introduceret i Internet Explorer og var meget populær i 90'erne, før W3C i sidste ende besluttede at udelukke det fra HTML-standardelementet på grund af brugbarhedsproblemer. Webdesignere blev opfordret til ikke at bruge tagget.
Overraskende nok gør markeringen nu et comeback, ikke i et tag format som det gjorde, men i et CSS-modul. Dette modul er tilgængeligt som en del af Webkit CSS-specifikationen, og W3C arbejder i øjeblikket på et tilsvarende modul. Men da W3C-versionen stadig er på kandidat-anbefalingsstadiet, er den ikke gældende endnu. Så på nuværende tidspunkt dækker vi kun den fra Webkit-specifikationen.
Syntaxen
Først og fremmest kan marquee defineres ved hjælp af følgende stenografi syntaks.
-webkit-marquee: [retning] [inkrement] [gentagelse] [stil] [hastighed]
Hver af de værdier, der er nødvendige i syntaksen ovenfor, tror jeg, er helt selvforklarende, ellers kan du finde dem tilstrækkeligt forklaret i denne dokumentation. Så hvis du ønsker at grave dybere ind på, hvordan denne syntaks skal arbejde, kan du altid referere til dokumentationen først.
Så kom med os, når vi fortsætter med at skabe nogle rigtige eksempler og se hvordan det er i aktion.
Eksempel 1: Rulning af teksten
Okay, i det første eksempel skaber vi den klassiske bevægelse af markeringen, der har teksten flytte fra højre mod venstre.
Lad os oprette vores tekstmarkering som nedenfor:
Lollipop topping citron dråber jujubes applicake frugtkage tart lakrids sesam snaps.
Definer derefter markeringen med følgende syntaks.
-webkit-marquee: auto medium uendelig scroll normal; overflow-x: -webkit-marquee;
Når markeringsretningen er indstillet til auto, det vil som standard flytte fra højre mod venstre; Alternativt kan du ændre denne værdi til venstre. Bemærk også, at overflow-x ejendom skal indstilles til -webkit-telt så indholdet altid vil fungere som en. Hvis du udelader denne egenskab, går teksten ikke videre.
Se demonstrationen.
Eksempel 2: Springer frem og tilbage
I det andet eksempel forsøger vi at give en anden stil til teltet. Denne gang bruger vi skifte i stedet for rulle og ændre retningsværdien til ret. På den måde vil markeringen flytte fra venstre til højre og derefter springe frem og tilbage.
-webkit-marquee: auto medium uendelig alternativ normal; overflow-x: -webkit-marquee;
Se demonstrationen
Eksempel 3: Flytter teksten opad
Og for det sidste eksempel vil vi ændre markeringsretningen for at bevæge sig opad. Der er to retning værdier for at gøre det du kan ændre værdien til op eller foran.
Personligt forstår jeg ikke, hvorfor Webkit gav to værdier, der stort set gør det samme, da jeg tror, at det kan føre til forvirring for nogle mennesker.
-webkit-marquee: op medium uendelig scroll normal; overflow-x: -webkit-marquee;
Se demonstrationen
Desuden har jeg udarbejdet nogle flere eksempler, men de vil være overvældende, hvis de alle forklares her.
Men du kan se hele demoen og downloade kilderne fra nedenstående links.
- Demo
- Download kilde
Endelig tanke og referencer
Jeg blev først overrasket over, at der stadig er interesse for teltet, som jeg troede havde mødt sin ende. Dette fik mig også til at stille spørgsmålstegn ved, hvordan et CSS-modul som dette vil være nyttigt. Faktisk understøtter enhver browser stadig arven til tag.
Så hvad tror du? Er marquee stadig relevant i denne alder og ville det være nyttigt i moderne webdesign?
Hvis du stadig er nysgerrig efter denne marquee ting, kan du besøge nogle af de følgende referencer:
- Safari CSS Reference
- Webkit markeringsgenerator
- Omfattende dokumentation af den gamle
tag fra sitepoint. - Og der er altid en generator til næsten alt, herunder denne Marquee Generator.
