为什么<marquee>已被弃用,什么是最佳选择？

Question

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

您可以在MDN规范中找到:

已过时 此功能已过时.虽然它可能仍然适用于某些浏览器,但不鼓励使用它,因为它可以随时删除.尽量避免使用它.

或者在W3C维基上:

不完全是.不要使用它.

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

marquee-play-count
marquee-direction
marquee-speed

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

W3 Consortium提出的一种方法是使用CSS3动画,但对我来说似乎比易于维护更复杂<marquee>.

还有很多JS替代品,有很多源代码可以添加到项目中并使它们更大.

我总是把事情看作:"不要使用字幕","已经过时".我不明白为什么.

那么,任何人都可以向我解释一下,为什么要大肆宣传,为什么这么"危险"使用它以及最简单的替代方法是什么？

我找到了一个例子,看起来不错.当您使用良好浏览器支持所需的所有前缀时,您有大约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.

Answer 2

<marquee>从来都不是任何 HTML 规范的一部分，并且您链接到的是 CSS 规范，因此很难弃用从未包含的内容。HTML 是关于文档的结构，而不是它的表示。因此，将自动画元素作为 HTML 的一部分并不符合这些目标。动画在 CSS 中。

Answer 3

您只需在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%); 
       }
      }
    

Answer 4

我知道几年前就已经回答了这个问题，但我在检查时发现了 这个。当我检查时，我发现了这一点。

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

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

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

Answer 5

如前所述：最简单的替代是 CSS 动画

致所有批评大帐篷的人：

它是一个非常有用的 UI 工具，我只是在悬停时使用它，以在有限的空间中显示更多信息。

mp3 播放器的示例非常出色，甚至我的汽车收音机也使用该效果来显示当前歌曲。

所以我认为这没有什么错......