Ceux d'entre vous qui écrivent du HTML depuis longtemps peuvent se souvenir de l'élément. Il s'agissait d'un élément spécifique au navigateur qui créait une bannière de texte défilant sur l'écran. Cet élément n'a jamais été ajouté au HTML les spécifications et la prise en charge variaient considérablement selon les navigateurs. Les gens avaient souvent des opinions très tranchées sur l'utilisation de cet élément, à la fois positives et négatives. Mais que vous l'aimiez ou le détestiez, cela servait à rendre visible le contenu qui dépassait les limites de la boîte.
Une partie de la raison pour laquelle il n'a jamais été entièrement mis en œuvre par les navigateurs, à part une forte opinion personnelle, était que il est considéré comme un effet visuel et en tant que tel, il ne doit pas être défini par le HTML, qui définit le 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 façon dont les navigateurs ajoutent le effet chapiteau aux éléments.
Nouvelles propriétés CSS3
CSS3 ajoute cinq nouvelles propriétés pour aider à contrôler la façon dont votre contenu s'affiche dans le rectangle de sélection: style de débordement, style de sélection, nombre de lectures de sélection, direction de sélection et vitesse de sélection.
style débordement
La propriété overflow-style (dont nous avons également discuté 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 marquee-line ou marquee-block, votre contenu glissera vers la gauche/droite (marquee-line) ou haut/bas (marquee-block).
style chapiteau
Cette propriété définit la manière dont le contenu apparaîtra (et sortira). Les options sont faire défiler, glisser et alterner. Le défilement commence avec le contenu complètement hors écran, puis il se déplace sur la zone visible jusqu'à ce qu'il soit à nouveau complètement hors écran. La diapositive commence avec le contenu complètement hors de l'écran, puis elle se déplace jusqu'à ce que le contenu se soit complètement déplacé sur l'écran et qu'il ne reste plus de contenu à glisser sur l'écran. Enfin, l'alternance fait rebondir le contenu d'un côté à l'autre, en glissant d'avant en arrière.
chapiteau-play-count
L'un des inconvénients de l'utilisation de l'élément MARQUEE est que le chapiteau ne s'arrête jamais. Mais avec la propriété de style marquee-play-count, vous pouvez définir le rectangle de sélection pour activer et désactiver le contenu un certain nombre de fois.
chapiteau-direction
Vous pouvez également choisir la direction dans laquelle le contenu doit défiler à l'écran. Les valeurs avant et arrière sont basées sur la directionnalité du texte lorsque le style de débordement est une ligne de sélection et vers le haut ou vers le bas lorsque le style de débordement est un bloc de sélection.
Détails de la direction du chapiteau
style débordement |
Orientation linguistique | avant | sens inverse |
|---|---|---|---|
ligne de chapiteau |
ltr | la gauche | droite |
| rtl | droite | la gauche | |
chapiteau-bloc |
en haut | vers le bas |
chapiteau-vitesse
Cette propriété détermine la vitesse à laquelle le contenu défile à l'écran. Les valeurs sont lentes, normales et rapides. La vitesse réelle dépend du contenu et du navigateur qui l'affiche, mais les valeurs doivent être lentes, c'est plus lent que la normale, ce qui est plus lent que rapide.
Prise en charge du navigateur des propriétés de la sélection
Vous devrez peut-être utiliser préfixes de fournisseur pour que les éléments de sélection CSS fonctionnent. Ils sont les suivants:
| CSS3 | Préfixe du fournisseur |
|---|---|
overflow-x: ligne de sélection ; |
overflow-x: -webkit-marquee ; |
style chapiteau |
-webkit-chapiteau-style |
chapiteau-play-count |
-webkit-marquee-repetition |
direction du chapiteau: avant|arrière ; |
-webkit-marquee-direction: avant|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 ou la taille des étapes lorsque le contenu défile à l'écran dans le rectangle de sélection.
Pour que votre chapiteau fonctionne, vous devez d'abord placer les valeurs de préfixe du fournisseur, puis les suivre avec les valeurs de spécification CSS3. Par exemple, voici le CSS pour un chapiteau qui fait défiler le texte cinq fois de gauche à droite à l'intérieur d'une boîte de 200x50.
{
largeur: 200px; hauteur: 50px; espace blanc: nowrap ;
débordement caché;
overflow-x:-webkit-marquee;
-webkit-marquee-direction: vers l'avant ;
-webkit-marquee-style: faites défiler ;
-webkit-marquee-speed: normal ;
-webkit-marquee-increment: petit ;
-webkit-marquee-repetition: 5 ;
overflow-x: ligne de sélection ;
direction du chapiteau: vers l'avant ;
style chapiteau: défilement ;
vitesse de défilement: normale ;
chapiteau-play-count: 5 ;
}