Marquee in CSS - Guida per principianti
Marquee è stato introdotto per la prima volta in Internet Explorer ed è stato molto popolare negli anni '90 prima che il W3C alla fine decidesse di escluderlo dall'elemento HTML standard a causa di problemi di usabilità. I web designer sono stati incoraggiati a non usare il tag.
Sorprendentemente, però, la selezione sta tornando, non in un tag formato come ha fatto, ma in un modulo CSS. Questo modulo è disponibile come parte delle specifiche CSS Webkit e il W3C sta attualmente lavorando anche su un modulo simile. Tuttavia, poiché la versione del W3C è ancora in fase di Candidate Recommendation, non è ancora applicabile. Quindi, in questo momento, copriremo solo quello delle specifiche del Webkit.
La sintassi
Innanzitutto, la selezione può essere definita utilizzando la seguente sintassi abbreviata.
-webkit-marquee: [direzione] [incremento] [ripetizione] [stile] [velocità]
Credo che tutti i valori necessari nella sintassi di cui sopra siano abbastanza intuitivi, altrimenti è possibile trovarli sufficientemente spiegati in questa documentazione. Quindi, se vuoi approfondire il modo in cui questa sintassi funzionerà, puoi sempre fare riferimento alla documentazione.
Quindi, unisciti a noi mentre procediamo per creare alcuni esempi reali e vedere come funziona.
Esempio 1: scorrimento del testo
D'accordo, nel primo esempio creeremo il classico movimento del riquadro che sta facendo muovere il testo da destra a sinistra.
Creiamo il nostro markup di testo come di seguito:
Lecca lecca con gocce di limone, giuggiole, applicazione di crostata di frutta e liquirizia, sciroppo di sesamo.
Quindi definire la selezione con la seguente sintassi.
-webkit-tendone: auto medio scorrimento infinito normale; overflow-x: -webkit-marquee;
Quando la direzione della selezione è impostata su auto, per impostazione predefinita si sposta da destra a sinistra; in alternativa è possibile modificare questo valore in sinistra. Notare anche che il troppopieno-x la proprietà deve essere impostata su -webkit-tendone in modo che il contenuto agisca sempre come uno. Se ometti questa proprietà, il testo non si muoverà.
Guarda la demo.
Esempio 2: rimbalza avanti e indietro
Nel secondo esempio proveremo a dare uno stile diverso alla selezione. Questa volta usiamo alternato invece di scorrere e cambia il valore della direzione in destra. In questo modo, la selezione si sposterà da sinistra a destra, quindi rimbalzerà avanti e indietro.
-webkit-tendone: auto medio infinito alternato normale; overflow-x: -webkit-marquee;
Guarda la demo
Esempio 3: spostamento del testo verso l'alto
E per l'ultimo esempio, cambieremo la direzione del riquadro per spostarci verso l'alto. Ci sono due direzione valori per farlo; puoi cambiare il valore in su o avanti.
Personalmente non capisco perché il Webkit abbia fornito due valori che essenzialmente fanno la stessa cosa poiché penso che potrebbe portare a confusione per alcune persone.
-webkit-marquee: up media scroll medio normale; overflow-x: -webkit-marquee;
Guarda la demo
Inoltre, ho compilato qualche altro esempio, ma saranno schiaccianti se verranno spiegati tutti qui.
Ma puoi visualizzare tutte le demo e scaricare le fonti dai link sottostanti.
- dimostrazione
- Scarica fonte
Pensiero finale e riferimenti
Sono stato sorpreso per la prima volta che c'è ancora interesse nel tendone, che pensavo avesse incontrato la sua fine. Questo mi ha portato anche a chiedermi come un modulo CSS come questo sarà utile. Infatti ogni browser supporta ancora l'eredità del etichetta.
Allora, cosa ne pensi? Il tendone è ancora attuale a questa età e sarebbe utile nel web design moderno?
Se sei ancora curioso di questo materiale di selezione, puoi visitare alcuni dei seguenti riferimenti:
- Riferimento CSS Safari
- Generatore di selezione Webkit
- Documentazione completa del vecchio
tag da Sitepoint. - E c'è sempre un generatore per quasi tutto, incluso questo Generatore di tende.
