Marquee în CSS - Ghidul pentru începători
Marquee a fost introdusă pentru prima dată în Internet Explorer și a fost foarte populară în anii '90, înainte ca W3C să decidă în cele din urmă să o excludă din elementul standard HTML din cauza problemelor de uzabilitate. Designerii web au fost încurajați să nu folosească eticheta.
În mod surprinzător, însă, marcajul face o revenire, nu într-o etichetă format ca și cum ar fi, dar într-un modul CSS. Acest modul este disponibil ca parte a specificației Webkit CSS, iar W3C lucrează în prezent și pe un modul similar. Cu toate acestea, deoarece versiunea W3C se află încă în stadiul de recomandare a candidatului, aceasta nu este încă aplicabilă. Deci, în acest moment, vom acoperi doar cea din specificația Webkit.
Sintaxa
Mai întâi, marca poate fi definită utilizând următoarea sintaxă de stenografie.
-webkit-marquee: [direcție] [incrementare] [repetare] [stil] [viteză]
Fiecare dintre valorile necesare în sintaxa de mai sus, cred, este destul de explicativă, altfel le puteți găsi suficient de bine explicate în această documentație. Deci, dacă doriți să explorați mai mult modul în care această sintaxă va funcționa, vă puteți referi mai întâi la documentație.
Apoi, alăturați-vă nouă pe măsură ce continuăm să creăm câteva exemple reale și să vedem cum este în acțiune.
Exemplul 1: Derularea textului
În primul exemplu, vom crea mișcarea clasică a marcajului care are textul mutat de la dreapta la stânga.
Să creăm marcajul nostru de text ca mai jos:
Lollipop topping lamaie picături jujubes aplicake fructe cake tart dulciuri susan snaps.
Apoi definiți marquee cu următoarea sintaxă.
-webkit-marquee: mediu auto infinit parcurgere normală; overflow-x: -webkit-marquee;
Atunci când direcția marquee este setată la auto, în mod implicit, va trece de la dreapta la stânga; în mod alternativ, puteți modifica această valoare stânga. De asemenea, observați că overflow-x proprietatea trebuie setată la -webkit-Marquee astfel încât conținutul să se comporte întotdeauna ca unul. Dacă omiteți această proprietate, textul nu va trece mai departe.
Vezi demonstrația.
Exemplul 2: Săriți înainte și înapoi
În cel de-al doilea exemplu, vom încerca să oferim un stil diferit la marquee. De data aceasta folosim alterna in loc de sul și modificați valoarea direcției la dreapta. În acest fel, marquee se va deplasa de la stânga la dreapta, apoi săriți înainte și înapoi.
-webkit-marquee: mediu auto infinit alternativ normal; overflow-x: -webkit-marquee;
Vezi demonstrația
Exemplul 3: Mutarea textului în sus
Și pentru ultimul exemplu, vom schimba direcția marquee pentru a vă deplasa în sus. Sunt două direcţie valori pentru a face acest lucru; puteți schimba valoarea la sus sau înainte.
Personal nu înțeleg de ce Webkit a oferit două valori care în mod esențial fac același lucru, deoarece cred că ar putea duce la confuzie pentru unii oameni.
-webkit-marquee: în sus mediu infinit parcurgere normală; overflow-x: -webkit-marquee;
Vezi demonstrația
Mai mult, am compilat mai multe exemple, dar ele vor fi copleșitoare dacă toate acestea sunt explicate aici.
Dar, puteți vizualiza toate demo-urile și descărca sursele de pe link-urile de mai jos.
- Demo
- Descărcați sursa
Gândire finală și referințe
Am fost prima dată surprins de faptul că încă mai există interes pentru marchiză, pe care am crezut-o că și-a îndeplinit sfârșitul. Acest lucru mi-a determinat și să pun la îndoială cum un modul CSS ca acesta va fi util. De fapt, fiecare browser încurajează în continuare moștenirea etichetă.
Deci ce crezi? Marca este încă relevantă la această vârstă și ar fi utilă în designul web modern?
Dacă sunteți încă curios în legătură cu acest lucru, puteți vizita unele dintre următoarele referințe:
- Safari CSS Reference
- Webkit generator de marcă
- Documentația completă a celor vechi
etichetă de la Sitepoint. - Și există întotdeauna un generator pentru aproape orice, inclusiv acest Generator Marquee.
