Oznaka v CSS-ju - Začetniški priročnik
Marquee je bil prvič predstavljen v Internet Explorerju in je bil zelo priljubljen v devetdesetih, preden se je W3C končno odločil, da ga izključi iz standardnega elementa HTML zaradi težav z uporabnostjo. Spletne oblikovalce so spodbujali, da ne uporabljajo oznake.
Presenetljivo je, da se šotor zdaj vrača, ne v oznako format, kot je bil, vendar v CSS modulu. Ta modul je na voljo kot del specifikacije Webkit CSS in W3C prav tako dela na podobnem modulu. Ker pa je različica W3C še vedno v fazi priporočila za kandidate, se še ne uporablja. Torej bomo v tem času pokrili le tistega iz specifikacije Webkit.
Sintaksa
Najprej je mogoče določiti oznako z naslednjo skrajšano sintakso.
-webkit-marquee: [smer] [prirastek] [ponavljanje] [slog] [hitrost]
Verjamem, da so vse vrednosti, ki so potrebne v sintaksi zgoraj, precej samoumevne, ali pa jih lahko najdete dovolj razložene v tej dokumentaciji. Torej, če želite kopati globlje v to, kako bo ta skladnja delovala, lahko vedno najprej poiščete dokumentacijo.
Nato se nam pridružite, ko bomo nadaljevali z ustvarjanjem nekaj resničnih primerov in videli, kako je v akciji.
Primer 1: Pomikanje po besedilu
V prvem primeru bomo ustvarili klasično gibanje oznake, ki ima besedilo, ki se premika od desne proti levi.
Ustvarimo našo besedilno oznako, kot je spodaj:
Lizalica preliva limonine kapljice jujubes nanaša sadno torto tart likerice sezam snaps.
Nato določite oznako z naslednjo sintakso.
-webkit-marquee: samodejno srednje neskončno drsenje normalno; overflow-x: -webkit-marquee;
Ko je smer kazalca nastavljena na samodejno, privzeto se bo premaknil z desne na levo; lahko pa to vrednost spremenite v levo. Prav tako opazite, da overflow-x lastnost mora biti nastavljena na -webkit-marquee tako, da bo vsebina vedno delovala kot ena. Če izpustite to lastnost, se besedilo ne premakne naprej.
Oglejte si demo.
Primer 2: Odskočite naprej in nazaj
V drugem primeru bomo poskusili dati drugačen slog. Tokrat uporabljamo nadomestni namesto pomaknite se in spremenite vrednost smeri na prav. Na ta način se bo oznaka premaknila z leve na desno, nato pa se bo odbijala naprej in nazaj.
-webkit-marquee: samodejno srednje neskončno nadomestno normalno; overflow-x: -webkit-marquee;
Oglejte si demo
Primer 3: Premikanje besedila navzgor
V zadnjem primeru bomo spremenili smer, da se pomaknemo navzgor. Obstajata dve smeri vrednosti; vrednost lahko spremenite v gor ali naprej.
Osebno ne razumem, zakaj je Webkit zagotovil dve vrednosti, ki v bistvu delata isto stvar, ker menim, da bi to lahko povzročilo zmedo za nekatere ljudi.
-webkit-marquee: navzgor do srednje neskončnega drsenja normalno; overflow-x: -webkit-marquee;
Oglejte si demo
Poleg tega sem zbral še nekaj primerov, vendar bodo preobremenjeni, če bodo vsi tukaj pojasnjeni.
Vendar pa si lahko ogledate vse demo in prenesete vire iz spodnjih povezav.
- Demo
- Prenesi vir
Končna misel in reference
Najprej me je presenetilo, da je še vedno zanimanje za šotor, za katerega sem mislil, da je dosegel svoj konec. To me je tudi pripeljalo do vprašanja, kako bo uporaben CSS modul, kot je ta. Pravzaprav vsak brskalnik še vedno podpira zapuščino oznaka.
Torej, kaj mislite? Ali je oznaka še vedno pomembna v tej starosti in ali bi bila uporabna v sodobnem spletnem oblikovanju?
Če se še vedno zanimate za te predmete, lahko obiščete nekaj od naslednjih referenc:
- Referenca CSS za Safari
- Generator Webkit marquee
- Celovita dokumentacija starega
od Sitepoint. - In vedno obstaja generator za skoraj vse, vključno s tem generatorjem Marquee.
