MARQUEE à l'ère de HTML5 et CSS3

Ceux d'entre vous qui écrivent du HTML depuis longtemps se souviendront peut-être de l'élément. Il s’agit d’un élément spécifique au navigateur qui a créé une bannière de texte défilant à l’écran. Cet élément n'a jamais été ajouté à la spécification HTML et sa prise en charge variait considérablement d'un navigateur à l'autre. Les gens avaient souvent des opinions très fortes sur l'utilisation de cet élément - à la fois positif et négatif. Mais que vous l'aimiez ou que vous le détestiez, l'objectif était de rendre visible le contenu dépassant les limites de la boîte.

Une partie de la raison pour laquelle les navigateurs ne l’ont jamais entièrement implémentée, mis à part une forte opinion personnelle, tient au fait qu’il est considéré comme un effet visuel et qu’il ne doit donc pas être défini par le code HTML, qui définit la structure. Au lieu de cela, les effets visuels ou de présentation doivent être gérés par CSS. Et CSS3 ajoute le module de sélection pour contrôler la manière dont les navigateurs ajoutent l’effet de sélection aux éléments.

Nouvelles propriétés CSS3

CSS3 ajoute cinq nouvelles propriétés pour contrôler le mode d'affichage de votre contenu dans le rectangle de sélection: débordement, style chapiteau, chapiteau-play-count, chapiteau direction et chapiteau-vitesse.

débordementle débordement property (que j'ai également abordée dans l'article CSS Overflow) définit le style préféré pour le contenu qui déborde de la zone de contenu. Si vous définissez la valeur sur ligne de marque ou chapiteau votre contenu glissera vers la gauche / droite (ligne de marque) ou haut / bas (chapiteau).

style chapiteauCette propriété définit la manière dont le contenu sera déplacé dans la vue (et la sortie).

Les options sont faire défiler, faire glisser et alterner. Le défilement commence avec le contenu complètement hors écran, puis il se déplace dans la zone visible jusqu'à ce qu'il soit complètement à nouveau hors écran. La diapositive commence avec le contenu complètement hors écran, puis se déplace jusqu'à ce que le contenu soit complètement déplacé sur l'écran et qu'il ne reste plus de contenu à faire glisser à l'écran.

Enfin, alterner fait rebondir le contenu d'un côté à l'autre, glissant d'avant en arrière.

chapiteau-play-countL’un des inconvénients de l’utilisation du CHAPITEAU L'élément est que le chapiteau ne s'arrête jamais. Mais avec la propriété de style chapiteau-play-count vous pouvez configurer le rectangle de sélection pour faire pivoter le contenu un nombre de fois spécifique.

chapiteau directionVous pouvez également choisir la direction dans laquelle le contenu doit défiler à l'écran. Les valeurs vers l'avant et sens inverse sont basés sur la directionnalité du texte lorsque le débordement est ligne de marque et monter ou descendre lorsque le débordement est chapiteau.

Détails du chapiteau

débordement	Direction de la langue	vers l'avant	sens inverse
ligne de marque	ltr	la gauche	droite
	RTL	droite	la gauche
chapiteau		en haut	vers le bas

chapiteau-vitesseCette propriété détermine la rapidité avec laquelle le contenu défile à l'écran. Les valeurs sont lent, Ordinaire, et vite. La vitesse réelle dépend du contenu et du navigateur qui l’affiche, mais les valeurs doivent être lent est plus lent que Ordinaire qui est plus lent que vite.

Prise en charge du navigateur des propriétés du rectangle de sélection

Vous devrez peut-être utiliser les préfixes de fournisseur pour que les éléments de sélection CSS fonctionnent. Ils sont comme suit:

CSS3	Préfixe du vendeur
overflow-x: marquee-line;	overflow-x: -webkit-marquee;
style chapiteau	-webkit-marquee-style
chapiteau-play-count	-webkit-marquee-repetition
chapiteau-direction: en avant | en arrière;	-webkit-marquee-direction: en avant / en arrière;
chapiteau-vitesse	-webkit-marquee-speed
pas d'équivalent	-webkit-marquee-increment

La dernière propriété vous permet de définir la taille des étapes lorsque le contenu défile à l'écran dans le cadre de sélection.

Pour que votre chapiteau fonctionne, vous devez d'abord placer les valeurs préfixées par le fournisseur, puis les suivre avec les valeurs de la spécification CSS3. Par exemple, voici le CSS pour un rectangle de sélection qui fait défiler le texte cinq fois de gauche à droite dans une zone de 200 x 50.

{ largeur: 200px; hauteur: 50px; espace blanc: maintenant; débordement caché; overflow-x: -webkit-marquee; -webkit-chapiteau-direction: en avant; -webkit-marquee-style: défilement; -webkit-marquee-speed: normal; -webkit-marquee-increment: petit; -webkit-chapiteau-répétition: 5; overflow-x: marquee-line; chapiteau-direction: en avant; style chapiteau: défilement; chapiteau-vitesse: normal; chapiteau-play-count: 5;}