javascript - 为什么 <marquee> 被弃用，什么是最好的选择？

Question

较长时间我对 HTML 标签感到好奇 <marquee> .

您可以在 MDN specification 中找到:

Obsolete This feature is obsolete. Although it may still work in some browsers, its use is discouraged since it could be removed at any time. Try to avoid using it.

或 W3C wiki :

No, really. don't use it.

我搜索了几篇文章，发现了一些关于 CSS 相关替换的提及。 CSS 属性如:

marquee-play-count
marquee-direction
marquee-speed

但看起来，它们不起作用。它们是 2008 年规范的一部分, 但他们在年份被排除在外 2014

W3 联盟提出的一种方法是使用 CSS3 animations ，但对我来说似乎比易于维护复杂得多 <marquee> .

还有很多JS alternatives ，其中包含大量源代码，您可以将它们添加到您的元素中并使它们变得更大。

我总是读到这样的东西:“永远不要使用选取框”、“已经过时”。我不明白为什么。

那么，有人可以向我解释一下，为什么 不推荐使用 marquee，为什么使用它如此“危险”以及什么是最简单的替代？

我找到了一个 example ， 看起来很好。当您使用良好浏览器支持所需的所有前缀时，您有大约 20-25 行 CSS，其中 2 个值是硬编码的(开始和停止缩进)，具体取决于文本长度。这个解决方案不太灵活，你不能用它来创建自下而上的效果。

Answer 1

我认为您不应该移动内容，但这并不能回答您的问题...看看 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 .