Taller CSS-Iniciació
La balise <marquee>
Définitions
L'élément <marquee> permet de créer des zones de défilement de textes, d'images fixes (.jpg, .png) ou animées(.gif) ou même d'animations Flash, dans un document HTML. L'avantage de cet élément est sa mise en oeuvre facile et son code compact, mais il est possible d'obtenir le même effet avec des scripts.
Par défaut <marquee> assure un défilement de l'objet qu'il contient, horizontalement et de droite à gauche, des attributs permettent de modifier les paramètres de ce déplacement.
Comportement
<marquee> a un comportement in-line, il s'aligne par rapport au texte qui l'entoure. Mais comme par exemple, l'élément <img />, il peut recevoir des dimensions et des marges, c'est donc un élément de type in-line dit "remplacé". Par défaut il a une largeur de 100%.
La largeur par défaut de l'élément <marquee> étant égale à la largeur de l'élément parent, quand un élément <marquee> est inclus dans un élément parent dont la largeur n'est pas spécifiée, il est nécessaire fixer la largeur de <marquee> , avec l'attribut witdh ou de préférence avec les css.
Attention! si aucune largeur n'est spécifiée, ni pour <marquee> ni pour l'élément parent, la largeur de <marquee> est réduite d'office à 1px et le défilement n'est pas visible.
Petit inconvénient
Le seul petit inconvénient de l'élément <marquee> réside dans l'impossibilité de comprimer l'intervalle d'apparition de l'élément qui défile. Tant que l'élément présent dans la zone d'animation n'a pas terminé son parcours, le suivant n'apparait pas, ce qui peut créer un vide un peu ennuyeux pour le visiteur.
Incompatiblités et Critiques
A la base, cette balise était la réponse de Microsoft à la balise <blink> (une balise qui permet de faire clignoter du texte, pas bling-bling) de son concurrent Netscape. Cette balise n'a donc été reconnue par Netscape qu'à partir de NS7. Elle est jugée obsolète par certains développeurs qui en déconseillent l'usage.
Opinions contrastées
Selon le site htmlcodetutorial , "<marquee> est souvent considérée comme une des "balises diaboliques" et cette perception est pour certains une raison suffisante d'en éviter l'usage. Cependant utilisée avec parcimonie et prudence (et en étant conscient qu'elle ne fonctionne pas partout), <marquee> n'est pas une si mauvaise balise. Elle peut être fort utile pour l'affichage d'annonces"
En revanche selon le site kiwano.fr , "la balise <marquee> c'est le mal car, si on laisse de côté les considérations ergonomiques, elle ne porte pas de valeur sémantique. C'est pour cela qu'elle est devenue obsolète et qu'il ne faut donc pas l'utiliser."
Les attributs de <marquee>
La balise <marquee> peut recevoir douze attributs dont certains sont des archaïsmes qu'il vaut mieux éviter d'utiliser.
Les Attributs de mise forme
Les six attributs ci-dessous sont des archaïsmes qui permettent une mise en forme plus que sommaire de l'élément <marquee>. Ils sont présentés ici pour mémoire.
Il est fortement recommandé d'utiliser le stylage par les css, qui est plus conforme aux standards du W3C (World Wide Web Consortium) et qui offre pour la mise en forme de cet élément, un éventail de propriétés bien plus variées que n'en offrent les attributs.
| align | Définit l'alignement du texte ou de l'image dans l'élément </marquee>. |
|---|---|
| bgcolor | Définit la couleur d'arrière-plan de l'élément </marquee>. Attention, Internet Explorer n'interprète pas le codage couleur en hexadécimal à trois chiffres, si vous tenez à utiliser cet attribut, pensez à utiliser l'hexadécimal à six chiffres ou les mots-clefs de couleurs. |
| height | Définit la hauteur (en pixels, %, em) de l'élément </marquee>. |
| hspace | Définit l'espace horizontal (en pixels, %, em) entre le texte ou l'image et le bord gauche ou droit de l'élément </marquee>. C'est l'équivalent des padding horizontaux. (Je n'ai pas compris comment fonctionne cet attribut, mais peu importe). |
| vspace | Spécifie l'espace vertical (en pixels) entre le texte ou l'image et le bord supérieur ou inférieur de l'élément </marquee>. C'est l'équivalent des padding verticaux. (Je n'ai pas compris comment fonctionne cet attribut, mais peu importe). |
| width | Définit la largeur (en pixels, %, em) de l'élément </marquee> |
Les Attributs de paramètrage du mouvement
L'utilisation de ces six attributs est indispensable si l'on souhaite paramétrer le déplacement de l'objet, texte ou image, placé dans l'élément <marquee>.
| Behavior | L'attribut behavior définit le comportement du texte ou de l'image. Il admet trois valeurs : scroll, slide et alternate. |
|---|---|
| direction | L'attribut direction définit la direction de défilement du texte ou de l'image. Il admet quatre valeurs : left, right, up et down. |
| loop | L'attribut loop introduit une boucle qui permet de repasser le texte ou l'image, le nombre de fois défini par la valeur de l'attribut. |
| scrollamount | L'attribut scrollamount permet de paramétrer l'intervalle entre deux apparitions du texte ou de l'image. La vitesse de défilement est proportionelle à la valeur de scrollamount. Cette valeur est exprimée en pixels, il ne faut pas préciser l'unité. |
| scrolldelay | L'attribut scrolldelay définit un délai entre deux apparitions du texte ou de l'image. La vitesse de défilement est inversement proportionelle à la valeur de scrolldelay. Cette valeur est exprimée en millisecondes, il ne faut pas préciser l'unité. |
| truespeed | L'attribut truespeed supprime l'arrondi utilisé dans le calcul de la vitesse. Le déplacement qui se fait à la valeur réelle de vitesse choisie, est plus rapide. L'attribut truespeed ne reçoit pas de valeur. |
La syntaxe de <marquee>
Un des avantages de l'élément <marquee> est la simplicité de son code qui permet de réaliser une animation de page à peu de frais. Vous trouverez ci-dessous quelques exemples de code.
Il suffit de placer le ou les objets à animer, textes ou images, entre les balises ouvrantes et fermantes de l'élément <marquee>.
Comme dans les autres éléments html, les attributs qu'il s'agisse de l'attribut style ou des attributs spécifiques à l'élément <marquee> doivent être placés entre les chevrons de la balise ouvrante <marquee>.
Les attributs de paramètrage du mouvement peuvent être combinés entre eux.
