なぜは非推奨なのですか、また、最適な代替手段は何ですか?

久々にHTMLタグの「`」が気になります。

MDN仕様]1に記載されています。

Obsolete この機能は廃止されました。 この機能は廃止されました。ブラウザによってはまだ使えるかもしれませんが、いつ削除されてもおかしくないので、使用は控えてください。なるべく使わないでください。

またはW3C wikiに記載されています。

本当に使わないでください。

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

marquee-play-count
marquee-direction
marquee-speed

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

W3コンソーシアムが提案したCSS3 animationsを使う方法もありますが、メンテナンスが簡単な <marquee> よりもずっと複雑な気がします。

また、JS alternatives もたくさんあり、ソースコードもたくさんあるので、自分のプロジェクトに追加して大きくすることができます。

私はいつも、"don't ever use marquee", "is obsolete" のようなことを読んでいます。そして、その理由がわからないのです。

そこで、どなたか私に、なぜ marquee は非推奨なのか、なぜそれを使うのは "危険なのか、最も簡単な代替は何か を説明していただけませんか?

例][7]を見ましたが、いい感じですね。ブラウザのサポートに必要なすべての接頭辞を使用すると、テキストの長さに応じて2つの値 (開始と終了のインデント) がハードコードされ、約20〜25行のCSSが必要になります。この解決策はあまり柔軟ではなく、これではbottom-to-top効果を作ることができません。

コンテンツは移動させない方がいいと思いますが、質問の答えにはなっていません。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です。

解説 (1)

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>
解説 (0)

前述したように、最も簡単な代用品はCSSアニメーションです。

マーキーを批判する人たちへ。

UIのための非常に便利なツールです。 私はホバー時のみ使用しています。 限られたスペースでより多くの情報を表示するために使用しています。

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

だから、何も間違ってはいないと思います。

解説 (4)