web-dev-qa-db-ja.com

<Marquee>が非推奨になったのはなぜですか？また、最良の代替手段は何ですか？

長い間、私はHTMLタグに興味があります<Marquee>。

MDN仕様 で見つけることができます：

廃止この機能は廃止されました。一部のブラウザではまだ動作する可能性がありますが、いつでも削除できるため、使用しないことをお勧めします。使用しないようにしてください。

または W3C wiki ：

いいえ、本当に。使用しないでください。

いくつかの記事を検索したところ、CSSに関連する置換についての言及が見つかりました。次のようなCSS属性：

Marquee-play-count
Marquee-direction
Marquee-speed

しかし、どうやら機能しないようです。これらは年の仕様の一部でした 2008 ですが、年に除外されました 2014

W3コンソーシアムによって提案された1つの方法は、 CSS3アニメーション を使用することですが、保守が容易な<Marquee>。

また、多くの JSの代替 があり、プロジェクトに追加して大きくすることができる多くのソースコードがあります。

私は常に「マーキーを使用しないでください」、「陳腐化した」と読んでいます。そして、理由はわかりません。

だから、誰も私に説明できますか、なぜは非難されたマーキーです、なぜそれを使用して「危険」であるのですか？何最も簡単な置換はですか？

例 が見つかりました。ブラウザーの適切なサポートに必要なすべてのプレフィックスを使用すると、テキストの長さに応じて2つの値がハードコード（開始と停止のインデント）された20〜25行のCSSがあります。このソリューションはそれほど柔軟ではなく、これで下から上への効果を作成することはできません。

javascripthtmlcsscss3marquee
33
areim

コンテンツを移動する必要はないと思いますが、それはあなたの質問に答えません... 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); }
}

codepen です。

編集：

下から上へ codepen です。

37
Thomas Bormans

クラスとアタッチされたループアニメーションを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%); 
       }
      }
    
<div class="example1">
   <h3>Scrolling text... </h3>
</div>
6
Artanis

前述のように、最も簡単な代替はCSSアニメーションです

マーキーのすべての批評家に：

これはUIにとって非常に便利なツールです。ホバーで使用して、限られたスペースでより多くの情報を表示します。

Mp3プレーヤーの例は素晴らしいです。私のカーラジオでさえ、現在の歌を表示するためにエフェクトを使用しています。

だからそれについて何も悪いことはない、私の意見は...

4
Wolfgang Blessen

<Marquee>はHTML仕様の一部ではなかったため、リンク先はCSS仕様であるため、含まれなかったものを非推奨にすることは困難です。 HTMLは、プレゼンテーションではなくドキュメントの構造に関するものです。そのため、HTMLの一部として自己アニメーション要素を持つことは、それらの目標を順守しません。アニメーションはCSSにあります。

4
Rob

古いMarqueeタグを標準のdivで置き換えるjQueryスクリプトを作成しました。コードは、Marquee、direction、scrolldelayなどのscrollamount属性も解析します。実際、コードはjQueryの部分をスキップできますが、私はそうするのが面倒で、Vanilla JSの部分は here の@Stano answereから修正したソリューションです。

コードは次のとおりです。

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

そして、ここに動作しています codepen

1
Ale

私はこれが数年前に回答されたことを知っていますが、 this を調べたときにこれを見つけました。調べてみると、これが見つかりました。

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

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

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