Marquee CSS ssä - Aloittelijan opas
Marquee otettiin ensimmäisen kerran käyttöön Internet Explorerissa ja oli erittäin suosittu 90-luvulla, ennen kuin W3C päätti lopulta jättää sen HTML-standardielementistä käytettävyysongelmien vuoksi. Web-suunnittelijoita kehotettiin olemaan käyttämättä tagia.
Yllättäen marquee tekee nyt paluun, ei tunnisteeseen kuten CSS-moduulissa. Tämä moduuli on saatavana osana Webkit CSS -määritystä ja W3C työskentelee parhaillaan vastaavan moduulin parissa. Koska W3C-versio on edelleen ehdokassuosituksen vaiheessa, sitä ei voida vielä soveltaa. Niinpä tällä hetkellä katamme vain yhden Webkit-määrittelystä.
Syntaksi
Ensinnäkin valintaruutu voidaan määritellä käyttämällä seuraavaa lyhenne- syntaksi.
-webkit-marquee: [suunta] [lisäys] [toisto] [tyyli] [nopeus]
Kukin edellä esitetyssä syntaksissa tarvittavista arvoista on mielestäni varsin itsestään selvää, tai muuten voit löytää ne riittävän selviksi tässä dokumentaatiossa. Joten, jos haluat kaivaa syvemmälle, miten tämä syntaksi aikoo toimia, voit aina viitata dokumentaatioon.
Liity meihin, kun luomme todellisia esimerkkejä ja näet, miten se toimii.
Esimerkki 1: Tekstin vieritys
No niin, ensimmäisessä esimerkissä luomme klassisen liikkeen sen telin, joka tekstin siirtyy oikealta vasemmalle.
Luomme tekstimerkintämme seuraavasti:
Lollipop topping sitruunan tippaa jujubes applake hedelmäkakku torttu lakritsi seesami napsahtaa.
Määritä sitten marquee seuraavalla syntaksilla.
-webkit-marquee: automaattinen keskimääräinen ääretön vieritys normaaliksi; ylivuoto-x: -webkit-marquee;
Kun telineen suunta on asetettu auto, se siirtyy oletusarvoisesti oikealta vasemmalle; Vaihtoehtoisesti voit muuttaa tätä arvoa vasen. Huomaa myös, että ylivuoto-x omaisuus on asetettava -WebKit-teltta niin, että sisältö toimii aina yhtä. Jos poistat tämän ominaisuuden, teksti ei siirry eteenpäin.
Katso demo.
Esimerkki 2: Bounce edestakaisin
Toisessa esimerkissä yritämme antaa teltalle toisen tyylin. Tällä kertaa käytämme vaihtoehtoinen sijasta vierittää ja muuta suunnan arvoa oikea. Näin telakka siirtyy vasemmalta oikealle ja hyppää edestakaisin.
-webkit-marquee: automaattinen keskimääräinen ääretön vaihtoehto; ylivuoto-x: -webkit-marquee;
Katso demo
Esimerkki 3: Tekstin siirtäminen ylöspäin
Ja viimeisessä esimerkissä muutamme telakan suunnan siirtyäksesi ylöspäin. On kaksi suunta arvot; voit muuttaa arvoa ylös tai eteenpäin.
Henkilökohtaisesti en ymmärrä, miksi Webkit tarjosi kahta arvoa, jotka ovat olennaisesti samaa asiaa, koska mielestäni se saattaa aiheuttaa sekaannusta joillekin ihmisille.
-webkit-marquee: keskimääräinen ääretön selaus normaali; ylivuoto-x: -webkit-marquee;
Katso demo
Lisäksi olen koonnut joitakin muita esimerkkejä, mutta ne ovat ylivoimaisia, jos ne kaikki selitetään tässä.
Voit kuitenkin tarkastella kaikkia demoja ja ladata lähteet alla olevista linkeistä.
- esittely
- Lataa lähde
Lopullinen ajatus ja viittaukset
Olin ensinnäkin yllättynyt siitä, että marquee on edelleen kiinnostunut, jonka mielestäni se oli saavuttanut. Tämä johti minuun myös kyseenalaistamaan, miten tällainen CSS-moduuli on hyödyllinen. Itse asiassa jokainen selain tukee edelleen tag.
Niin mitä mieltä olet? Onko teltta vielä ajankohtainen tässä iässä ja olisiko se hyödyllinen nykyaikaisessa web-suunnittelussa?
Jos olet edelleen kiinnostunut tästä marquee-tavarasta, voit käydä seuraavissa viitteissä:
- Safari CSS -viite
- Webkit-telakointigeneraattori
- Kattavat asiakirjat vanhasta
tunniste Sitepointista. - Ja melkein kaikkea varten on aina generaattori, mukaan lukien tämä Marquee Generator.
