Marquee a CSS-ben - Kezdő útmutató
A Marquee-t először vezették be az Internet Explorerbe, és nagyon népszerű volt a '90 -es években, mielőtt a W3C végül úgy döntött, hogy a használhatósági problémák miatt kizárja a HTML szabványelemből. A webes tervezőket arra ösztönözték, hogy ne használják a címkét.
Meglepő azonban, hogy a sátor most visszatér, nem pedig egy címkén formátumban, mint a CSS modulban. Ez a modul a Webkit CSS specifikáció részeként áll rendelkezésre, és a W3C jelenleg is hasonló modulon dolgozik. Mivel azonban a W3C verzió még mindig a jelöltek ajánlási szakaszában van, még nem alkalmazható. Tehát ebben az időben csak a Webkit specifikációjából fogunk fedezni.
A szintaxis
Először is, a sátor meghatározható a következő rövidített szintaxissal.
-webkit-marquee: [irány] [növekmény] [ismétlés] [stílus] [sebesség]
A fenti szintaxishoz szükséges értékek, úgy gondolom, meglehetősen önmagukban magyarázhatók, vagy egyébként elegendő magyarázatot kapnak a dokumentációban. Tehát, ha mélyebbre szeretné ásni, hogy ez a szintaxis hogyan fog működni, akkor mindig a dokumentációra hivatkozhat.
Ezután csatlakozzon hozzánk, amikor folytatunk néhány igazi példát, és nézzük meg, hogyan működik.
1. példa: A szöveg görgetése
Rendben, az első példában létrehozjuk a klasszikus mozdulatot azon a sátorban, amely a szöveget jobbról balra mozgatja.
Hozzuk létre az alábbi szöveges jelölést:
A nyalóka feltöltése citromcseppek jjubes applikáció gyümölcskenyér torta édesgyökér szezámmag.
Ezután határozza meg a sávot a következő szintaxissal.
-webkit-marquee: automatikus közepes végtelen görgetés normális; overflow-x: -webkit-marquee;
Ha a sátor iránya be van állítva kocsi, alapértelmezés szerint balról jobbra mozog; Alternatívaként módosíthatja ezt az értéket balra. Azt is észre, hogy a túlfolyó-X a tulajdonságot be kell állítani -WebKit sátor úgy, hogy a tartalom mindig úgy viselkedjen, mint egy. Ha ezt a tulajdonságot kihagyja, a szöveg nem lép tovább.
Lásd a demót.
2. példa: Visszatérés
A második példában megpróbálunk egy másik stílust adni a sátornak. Ezúttal használjuk váltakozó ahelyett tekercs és változtassa meg az irányértéket jobb. Így a sátor balról jobbra mozog, majd ugrál.
-webkit-marquee: automatikus közepes végtelen alternatív; overflow-x: -webkit-marquee;
Lásd a demót
3. példa: A szöveg mozgatása felfelé
És az utolsó példa esetében megváltoztatjuk a marquee irányát felfelé. Van két irány értékek; megváltoztathatja az értéket fel vagy előre.
Személy szerint nem értem, hogy a Webkit két értéket adott, amelyek lényegében ugyanazt a dolgot teszik, mivel úgy gondolom, hogy egyes emberek zavart okozhatnak..
-webkit-marquee: közepes végtelen görgetés normális; overflow-x: -webkit-marquee;
Lásd a demót
Továbbá, néhány további példát összeállítottam, de ezek túlnyomóak lesznek, ha itt mindent elmagyarázunk.
Azonban megtekintheti az összes demót és letöltheti a forrásokat az alábbi linkekből.
- Demó
- Letöltés forrása
Végső gondolat és referenciák
Először meglepődtem, hogy még mindig érdeklődik a sátor iránt, amit úgy gondoltam, hogy teljesítette a végét. Ez is arra késztetett, hogy megkérdőjelezzem, hogy egy ilyen CSS modul hasznos lesz-e. Valójában minden böngésző továbbra is támogatja a címke.
Tehát mit gondolsz? Ez a korszak még mindig releváns-e, és hasznos lenne a modern web design-ban?
Ha még mindig kíváncsi vagy arra, hogy ez a helyszín van, látogasson el néhány alábbi hivatkozásra:
- Safari CSS hivatkozás
- Webkit sátor generátor
- Átfogó dokumentáció a régi
címke a Sitepoint-ból. - És mindig van egy generátor szinte mindenre, beleértve ezt a Marquee Generator-ot.
