Chapiteau en CSS - Guide du débutant
Marquee a été introduit pour la première fois dans Internet Explorer et était très populaire dans les années 90 avant que le W3C ne décide finalement de l'exclure de l'élément standard HTML pour des raisons de facilité d'utilisation. Les concepteurs de sites Web ont été encouragés à ne pas utiliser le tag.
Étonnamment, le chapiteau fait maintenant un retour, pas dans une balise format comme il l'a fait, mais dans un module CSS. Ce module est disponible dans la spécification CSS Webkit et le W3C travaille actuellement sur un module similaire. Cependant, la version W3C étant encore au stade de la recommandation du candidat, elle n’est pas encore applicable. Donc, pour le moment, nous ne couvrirons que celui de la spécification Webkit.
La syntaxe
Tout d'abord, le rectangle de sélection peut être défini à l'aide de la syntaxe abrégée suivante.
-webkit-marquee: [direction] [incrémentation] [répétition] [style] [vitesse]
Je pense que chacune des valeurs nécessaires dans la syntaxe ci-dessus s’explique assez bien, sinon vous pouvez les trouver suffisamment expliquées dans cette documentation. Donc, si vous voulez approfondir le fonctionnement de cette syntaxe, vous pouvez toujours consulter la documentation en premier..
Ensuite, rejoignez-nous pour créer de vrais exemples et voir comment cela fonctionne..
Exemple 1: faire défiler le texte
Très bien, dans le premier exemple, nous allons créer le mouvement classique du rectangle de sélection, qui consiste à déplacer le texte de droite à gauche..
Créons notre balise de texte comme ci-dessous:
Sucette à la sucette gouttes de citron jujubes applicake tarte aux gâteaux aux fruits tarte à la réglisse sésame.
Puis définissez le rectangle de sélection avec la syntaxe suivante.
-webkit-marquee: défilement automatique infini moyen normal; overflow-x: -webkit-marquee;
Lorsque le rectangle de sélection est défini sur auto, il se déplacera par défaut de droite à gauche; sinon, vous pouvez changer cette valeur en la gauche. Notez également que le débordement-x la propriété doit être définie sur -webkit-marquee de sorte que le contenu agira toujours comme un seul. Si vous omettez cette propriété, le texte ne sera pas déplacé.
Voir la démo.
Exemple 2: Bounce d'avant en arrière
Dans le deuxième exemple, nous allons essayer de donner un style différent au rectangle de sélection. Cette fois nous utilisons alterner au lieu de faire défiler et changez la valeur de direction en droite. De cette façon, le chapiteau se déplacera de gauche à droite, puis rebondira.
-webkit-marquee: normal moyen infini alternatif normal; overflow-x: -webkit-marquee;
Voir la démo
Exemple 3: déplacer le texte vers le haut
Et pour le dernier exemple, nous allons changer la direction du chapiteau pour aller vers le haut. Il y en a deux direction valeurs pour le faire; vous pouvez changer la valeur en en haut ou devant.
Personnellement, je ne comprends pas pourquoi le Webkit a fourni deux valeurs qui font essentiellement la même chose car je pense que cela pourrait semer la confusion chez certaines personnes..
-webkit-marquee: haut défilement moyen infini normal; overflow-x: -webkit-marquee;
Voir la démo
En outre, j’ai rassemblé quelques exemples supplémentaires, mais ils seront écrasants s’ils sont tous expliqués ici..
Mais, vous pouvez voir toute la démo et télécharger les sources à partir des liens ci-dessous.
- Démo
- Source de téléchargement
Réflexion finale et références
J'ai d'abord été surpris qu'il y ait toujours un intérêt pour le chapiteau, qui, je pense, avait atteint sa fin. Cela m'a également amené à me demander en quoi un module CSS de ce type serait utile. En fait, chaque navigateur supporte toujours l'héritage de la étiquette.
Alors qu'est-ce que tu en penses? Le chapiteau est-il toujours pertinent à cet âge et serait-il utile dans la conception Web moderne??
Si vous êtes toujours curieux de connaître ce contenu, vous pouvez consulter certaines des références suivantes:
- Référence CSS Safari
- Générateur de chapiteau Webkit
- Documentation complète de l'ancien
balise de Sitepoint. - Et il y a toujours un générateur pour presque tout, y compris ce générateur de chapiteau.
