Markør i CSS - Begynnerveiledning
Marquee ble først introdusert i Internet Explorer og var veldig populær på 90-tallet før W3C endelig bestemte seg for å ekskludere det fra HTML-standardelementet på grunn av bruksproblemer. Webdesignere ble oppfordret til ikke å bruke taggen.
Overraskende nok, gjør teltet nå et comeback, ikke i en tagg format som det gjorde, men i en CSS-modul. Denne modulen er tilgjengelig som en del av Webkit CSS-spesifikasjonen, og W3C jobber for tiden med en tilsvarende modul. Men siden W3C-versjonen fortsatt er på kandidat-anbefalingstrinnet, er den ikke aktuelt ennå. Så, på dette tidspunktet vil vi bare dekke den fra Webkit-spesifikasjonen.
Syntaxen
Først av alt, kan markeringen defineres ved hjelp av følgende syntetisk syntetisk stenografi.
-webkit-marquee: [retning] [inkrement] [gjentagelse] [stil] [hastighet]
Hver av verdiene som trengs i syntaksen ovenfor, tror jeg, er ganske selvforklarende, ellers kan du finne dem tilstrekkelig forklart i denne dokumentasjonen. Så hvis du vil grave dypere inn i hvordan denne syntaksen skal fungere, kan du alltid referere til dokumentasjonen først.
Deretter, bli med oss når vi fortsetter å lage noen virkelige eksempler og se hvordan det er i aktion.
Eksempel 1: Ruller på teksten
Ok, i det første eksemplet vil vi skape den klassiske bevegelsen til teltet som har teksten som beveger seg fra høyre til venstre.
La oss lage vår tekstmarkering som nedenfor:
Lollipop topping sitron dråper jujubes applicake fruktkake tart lakris sesam snaps.
Definer deretter markeringen med følgende syntaks.
-webkit-marquee: automatisk medium uendelig bla normal; overflow-x: -webkit-marquee;
Når markeringsretningen er satt til auto, det vil som standard flytte fra høyre til venstre; Alternativt kan du endre denne verdien til venstre. Legg også merke til at flow-x eiendommen må settes til -webkit-telt slik at innholdet alltid vil virke som en. Hvis du utelate denne egenskapen, vil teksten ikke gå videre.
Se demonstrasjonen.
Eksempel 2: Sprett frem og tilbake
I det andre eksempelet vil vi prøve å gi en annen stil til teltet. Denne gangen bruker vi alternere i stedet for bla og endre retningsverdien til Ikke sant. På den måten vil teltet bevege seg fra venstre til høyre og deretter sprette frem og tilbake.
-webkit-marquee: automatisk medium uendelig alternativ normal; overflow-x: -webkit-marquee;
Se demonstrasjonen
Eksempel 3: Flytter teksten oppover
Og for det siste eksempelet vil vi endre teltretningen for å bevege seg oppover. Det er to retning verdier for å gjøre det; du kan endre verdien til opp eller fremover.
Personlig forstår jeg ikke hvorfor Webkit ga to verdier som i hovedsak gjør det samme siden jeg tror det kan føre til forvirring for noen mennesker.
-webkit-marquee: opp middels uendelig rulle normal; overflow-x: -webkit-marquee;
Se demonstrasjonen
Videre har jeg samlet noen flere eksempler, men de vil bli overveldende hvis de er alle forklart her.
Men du kan se alle demoene og laste ned kildene fra koblingene nedenfor.
- Demo
- Last ned kilde
Endelig tanke og referanser
Jeg ble først overrasket over at det fortsatt er interesse for teltet, som jeg trodde hadde møtt sin slutt. Dette førte meg også til å stille spørsmål til hvordan en CSS-modul som dette skal være nyttig. Faktisk støtter alle nettlesere arven til stikkord.
Så hva tror du? Er teltet fortsatt relevant i denne alderen, og vil det være nyttig i moderne webdesign?
Hvis du fremdeles er nysgjerrig på dette teltet, kan du besøke noen av følgende referanser:
- Safari CSS-referanse
- Webkit markeringsgenerator
- Omfattende dokumentasjon av den gamle
tag fra Sitepoint. - Og det er alltid en generator for nesten alt, inkludert denne Marquee Generator.
