wake-up-neo.net

Warum ist <Marquee> veraltet?

Ich bin neugierig auf das HTML-Tag <Marquee>.

Sie finden in MDN-Spezifikation :

Obsolet Diese Funktion ist veraltet. Obwohl es in einigen Browsern immer noch funktionieren kann, wird von seiner Verwendung abgeraten, da es jederzeit entfernt werden kann. Versuchen Sie es zu vermeiden.

oder auf W3C Wiki :

Nicht wirklich. benutze es nicht.

Ich durchsuchte mehrere Artikel und fand einige Hinweise zu CSS-relevanten Ersetzungen. CSS-Attribute wie:

Marquee-play-count
Marquee-direction
Marquee-speed

aber es scheint, dass sie nicht funktionieren. Sie waren Teil der Spezifikation im Jahr 2008 , wurden jedoch im Jahr 2014 ausgeschlossen.

Eine von W3 Consortium vorgeschlagene Methode besteht in der Verwendung von CSS3-Animationen , aber es scheint mir viel komplizierter zu sein als der einfach zu wartende <Marquee>.

Es gibt auch viele JS-Alternativen mit viel Quellcode, den Sie Ihren Projekten hinzufügen und vergrößern können.

Ich lese immer Dinge wie: "Verwenden Sie niemals Marquee", "ist veraltet". Und ich verstehe nicht warum.

Kann mir irgendjemand erklären, warum Marquee veraltet ist, warum es so "gefährlich" ist und was ist die einfachste Substitution?

Ich habe ein Beispiel gefunden, es sieht nett aus. Wenn Sie alle Präfixe verwenden, die für eine gute Browserunterstützung erforderlich sind, haben Sie ungefähr 20 bis 25 Zeilen CSS, wobei 2 Werte fest codiert sind (Start und Stopp Einzug), je nach Textlänge. Diese Lösung ist nicht so flexibel und Sie können damit keinen Bottom-to-Top-Effekt erzielen.

26
areim

Ich denke nicht, dass Sie den Inhalt verschieben sollten, aber das beantwortet Ihre Frage nicht ... Schauen Sie sich das CSS an:

.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); }
}

Hier ist der codepen .

Bearbeiten:

Hier ist von unten nach oben codepen .

31
Thomas Bormans

Sie müssen lediglich die Klasse und die angehängte Schleifenanimation einmal in CSS definieren und anschließend überall dort verwenden, wo Sie sie benötigen. Aber, wie viele Leute sagten - es ist eine etwas nervige Praxis, und es gibt einen Grund, warum dieser Tag veraltet ist.

Schau dir das an:

<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> war noch nie Teil einer HTML-Spezifikation, und zu der Verknüpfung wird eine CSS-Spezifikation angegeben. Bei HTML geht es um die Struktur eines Dokuments, nicht um die Darstellung. Ein selbst animiertes Element als Teil von HTML zu halten, hält sich also nicht an diese Ziele. Die Animation erfolgt in CSS.

3
Rob

Wie bereits gesagt: Die einfachste Substitution ist die CSS-Animation

An alle Kritiker des Marquee:

Es ist ein sehr nützliches Werkzeug für die Benutzeroberfläche, Ich verwende es nur beim Schweben, , Um mehr Informationen auf engem Raum anzuzeigen.

Das Beispiel für den MP3-Player ist ausgezeichnet. Auch mein Autoradio verwendet den Effekt, um den aktuellen Song anzuzeigen.

Daran ist nichts falsch, meine Meinung ... 

2

Ich weiß, dass dies vor ein paar Jahren beantwortet wurde, aber ich habe dies bei der Überprüfung von this festgestellt. Bei meiner Inspektion habe ich das gefunden.

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

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

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

Ich habe ein jQuery-Skript erstellt, das den alten Tag Marquee durch den Standardwert div ersetzt. Der Code analysiert auch die Marquee-Attribute wie direction, scrolldelay und scrollamount. Eigentlich kann der Code den jQuery-Teil überspringen, aber ich fühlte mich zu faul, und der Vanilla JS-Teil ist tatsächlich eine Lösung, die ich von @Stano answerere aus hier geändert habe

Hier ist der 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 ();
});

Und hier ist ein funktionierender codepen

0
Ale