web-dev-qa-db-fra.com

Pourquoi <Marquee> est déconseillé et quelle est la meilleure alternative?

Je suis curieux de connaître la balise HTML <Marquee>.

Vous pouvez trouver dans spécification MDN :

Obsolète Cette fonctionnalité est obsolète. Bien que certains navigateurs puissent continuer à fonctionner, son utilisation est déconseillée car elle pourrait être supprimée à tout moment. Essayez d'éviter de l'utiliser.

ou sur W3C wiki :

Pas vraiment. ne l'utilisez pas.

J'ai cherché plusieurs articles et trouvé une mention sur le remplacement pertinent de CSS. Attributs CSS tels que:

Marquee-play-count
Marquee-direction
Marquee-speed

mais il semble qu'ils ne fonctionnent pas. Ils faisaient partie de la spécification de l'année 2008 , mais ils ont été exclus de l'année 2014

Un moyen proposé par W3 Consortium consiste à utiliser animations CSS3 , mais cela me semble beaucoup plus compliqué que <Marquee>, facile à gérer.

Il existe également de nombreuses alternatives JS alternatives , avec beaucoup de code source que vous pouvez ajouter à vos projets et les rendre plus volumineux.

Je lis toujours des choses comme: "n'utilise jamais Marquee", "est obsolète". Et je ne comprends pas pourquoi.

Alors, est-ce que quelqu'un peut m'expliquer, pourquoi est Marquee déconseillé, pourquoi est-il si "dangereux" de l'utiliser et quelle est la substitution la plus facile?

J'ai trouvé un exemple , ça a l'air bien. Lorsque vous utilisez tous les préfixes nécessaires à la bonne prise en charge du navigateur, vous disposez de 20 à 25 lignes de CSS, avec 2 valeurs codées en dur (indent de début et de fin), selon la longueur du texte. Cette solution n'est pas si flexible et vous ne pouvez pas créer d'effet de bas en haut avec cela.

javascripthtmlcsscss3marquee
26
areim

Je ne pense pas que vous devriez déplacer le contenu mais cela ne répond pas à votre question ... Regardez le CSS:

.Marquee {
    width: 450px;
    line-height: 50px;
    background-color: red;
    color: white;
    white-space: nowrap;
    overflow: hidden;
    box-sizing: border-box;
}
.Marquee p {
    display: inline-block;
    padding-left: 100%;
    animation: Marquee 15s linear infinite;
}
@keyframes Marquee {
    0%   { transform: translate(0, 0); }
    100% { transform: translate(-100%, 0); }
}

Voici le codepen .

Modifier:

Voici le bas en haut codepen .

31
Thomas Bormans

Il vous suffit de définir une fois les animations de boucle de classe et attachées une fois en CSS et de les utiliser ensuite partout où vous en avez besoin. Mais, comme beaucoup de gens l’ont dit, c’est une pratique un peu agaçante, et il ya une raison, pourquoi cette étiquette devient obsolète.

Regarde ça:

<style style="text/css">
.example1 {
  height: 50px; 
  overflow: hidden;
  position: relative;
}
.example1 h3 {
    position: absolute;
    width: 100%;
    height: 100%;
    margin: 0;
    line-height: 50px;
    text-align: center;

    /* Starting position */
       -moz-transform:translateX(100%);
       -webkit-transform:translateX(100%);  
       transform:translateX(100%);

 /* Apply animation to this element */  
       -moz-animation: example1 15s linear infinite;
       -webkit-animation: example1 15s linear infinite;
       animation: example1 15s linear infinite;
}

/* Move it (define the animation) */
      @-moz-keyframes example1 {
       0%   { -moz-transform: translateX(100%); }
       100% { -moz-transform: translateX(-100%); }
      }
      @-webkit-keyframes example1 {
       0%   { -webkit-transform: translateX(100%); }
       100% { -webkit-transform: translateX(-100%); }
      }
      @keyframes example1 {
       0%   { 
       -moz-transform: translateX(100%); /* Firefox bug fix */
       -webkit-transform: translateX(100%); /* Firefox bug fix */
       transform: translateX(100%);         
       }
       100% { 
       -moz-transform: translateX(-100%); /* Firefox bug fix */
       -webkit-transform: translateX(-100%); /* Firefox bug fix */
       transform: translateX(-100%); 
       }
      }
</style>

<div class="example1">
   <h3>Scrolling text... </h3>
</div>
5
Artanis

<Marquee> n'a jamais fait partie d'une spécification HTML et vous liez à une spécification CSS. Il est donc difficile de déconseiller quelque chose qui n'a jamais été inclus. Le HTML concerne la structure d'un document, pas sa présentation. Donc, avoir un élément auto-animé dans le cadre de HTML ne respecte pas ces objectifs. L'animation est en CSS.

3
Rob

Comme indiqué précédemment: l'animation CSS est la substitution la plus facile.

À tous les critiques du chapiteau:

C’est un outil très utile pour l’interface utilisateur,.

L’exemple du lecteur MP3 est excellent, même si ma radio utilise l’effet pour afficher la chanson en cours.

Donc, rien à redire à cela, mon opinion ... 

2
Wolfgang Blessen

Je sais que cela a été répondu il y a quelques années, mais je l'ai trouvé lors de l'inspection this . Quand j'ai inspecté, j'ai trouvé ceci.

@keyframes scroll {
    from {
        transform: translate(0,0)
    }

    to {
       transform: translate(-300px,0)
    }
}

.resultMarquee {
    animation: scroll 7s linear 0s infinite;
    position: absolute
}
1
Bryan Zeng

J'ai créé un script jQuery qui remplacera l'ancienne balise Marquee par la variable standard div. Le code analysera également les attributs Marquee tels que direction, scrolldelay et scrollamount. En fait, le code peut ignorer la partie jQuery mais je me suis senti trop paresseux pour le faire, et la partie Vanilla JS est en fait une solution que j'ai modifiée de @Stano en passant de ici

Voici le code: 

jQuery(function ($) {

    if ($('Marquee').length == 0) {
        return;
    }

    $('Marquee').each(function () {

        let direction = $(this).attr('direction');
        let scrollamount = $(this).attr('scrollamount');
        let scrolldelay = $(this).attr('scrolldelay');

        let newMarquee = $('<div class="new-Marquee"></div>');
        $(newMarquee).html($(this).html());
        $(newMarquee).attr('direction',direction);
        $(newMarquee).attr('scrollamount',scrollamount);
        $(newMarquee).attr('scrolldelay',scrolldelay);
        $(newMarquee).css('white-space', 'nowrap');

        let wrapper = $('<div style="overflow:hidden"></div>').append(newMarquee);
        $(this).replaceWith(wrapper);

    });

    function start_Marquee() {

        let marqueeElements = document.getElementsByClassName('new-Marquee');
        let marqueLen = marqueeElements.length
        for (let k = 0; k < marqueLen; k++) {


            let space = '&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;';
            let marqueeEl = marqueeElements[k];

            let direction = marqueeEl.getAttribute('direction');
            let scrolldelay = marqueeEl.getAttribute('scrolldelay') * 100;
            let scrollamount = marqueeEl.getAttribute('scrollamount');

            let marqueeText = marqueeEl.innerHTML;

            marqueeEl.innerHTML = marqueeText + space;
            marqueeEl.style.position = 'absolute'; 

            let width = (marqueeEl.clientWidth + 1);
            let i = (direction == 'rigth') ? width : 0;
            let step = (scrollamount !== undefined) ? parseInt(scrollamount) : 3;

            marqueeEl.style.position = '';
            marqueeEl.innerHTML = marqueeText + space + marqueeText + space;



            let x = setInterval( function () {

                if ( direction.toLowerCase() == 'left') {

                    i = i < width ? i + step : 1;
                    marqueeEl.style.marginLeft = -i + 'px';

                } else {

                    i = i > -width ? i - step : width;
                    marqueeEl.style.marginLeft = -i + 'px';

                }

            }, scrolldelay);

        }
    }

    start_Marquee ();
});

Et voici un travail codepen

0
Ale