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

IT技术 javascript html css marquee
2021-01-19 15:31:18

更长的时间我对 HTML tag 感到好奇<marquee>。

您可以在MDN 规范中找到：

过时 此功能已过时。尽管它可能在某些浏览器中仍然有效，但不鼓励使用它，因为它可以随时被删除。尽量避免使用它。

或在W3C wiki 上：

不完全是。不要使用它。

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

marquee-play-count
marquee-direction
marquee-speed

但似乎，它们不起作用。它们是2008 年规范的一部分，但在2014 年被排除在外。

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

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

我总是把事情读成：“永远不要使用选框”，“已经过时了”。我不明白为什么。

那么，任何人都可以向我解释，为什么不推荐使用选框，为什么使用它如此“危险”以及最简单的替换是什么？

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

6个回答

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

@PascaldeSélys 我如何让它在最后一个跨度和重复的第一个跨度之间没有任何空格的情况下重复（最后一个跨度之后没有空格？）
2021-03-18 15:31:18
如果您想在没有空格的情况下重复，则需要p通过 JavaScript克隆节点并将其附加到第一个之后。然后，您可以从transform: translate(0, 0)to设置动画transform: translate(-50%, 0)并在没有任何可见中断的情况下重复（前提是两个p节点的宽度大于容器的宽度）。
2021-03-22 15:31:18
真的很好，但是如果滚动内容中有多个 div 或多个 P 则不起作用:(
2021-04-02 15:31:18
如果有人因为过时而陷入困境，要回答这个问题，实际上很简单:)。将整个东西放在一个 div 中，然后将元素放在 span codepen.io/scwall/pen/mdemeER 中
2021-04-07 15:31:18

你只需要在 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>

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

@BarryCap过时功能 - 选框由于该元素从未成为任何 HTML 规范的一部分，但其使用过于广泛，因此有必要在该规范中创建一个条目以将其标记为过时。
2021-03-18 15:31:18
2021-03-31 15:31:18
@user7892745 您的论点不会使标签过时
2021-04-04 15:31:18

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

致所有批评者：

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

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

所以这没什么错，我的意见......

@TimGoyer 我只是在考虑使用一般的选取框效果，就像对人们说的回答一样：“不要移动文本！” 使用 CSS 而不是 HTML <marquee> 实现它是更好、更合理的 IMO
2021-03-23 15:31:18
@ user7892745 - 在数据输入表单上输入是一个文档结构问题。使它们“很棒”是一个样式/脚本问题，这取决于您对“很棒”的定义。Wolfgang - 我同意动画最好作为 CSS/脚本效果来实现。我只是指出 HTML 是关于文档结构的，这就是不推荐使用 <marquee> 的原因。它没有提供超出 <div> 标签已经提供的基于结构的好处。它只是附加一个应该通过脚本或样式处理的动画。
2021-03-26 15:31:18
Den 为什么有很棒的输入？嗯？
2021-04-01 15:31:18
但就他们而言，HTML 是“超文本标记语言”。动画不是文档结构（ergo 标记）问题。这是一个演示问题。这就是为什么它现在被降级为 CSS 和/或 Javascript 来实现。
2021-04-02 15:31:18

我知道这是几年前回答的，但我在检查时发现了 这个。当我检查时，我发现了这个。

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

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

.resultMarquee {
    animation: scroll 7s linear 0s infinite;
    position: absolute
}
几个月后欢迎……您链接的 google 的整个第一个结果页面现在是一个网络资源列表，解释了 marquee 已被弃用，但没有指定解决方案。搜索“HTML 选框替换”时，第一个结果是这个 stackoverflow 页面，因此无需重定向回 google。
2021-04-01 15:31:18
@grek40b 我猜是这样，但是用其他搜索引擎搜索它或使用堆栈溢出搜索它呢？
2021-04-13 15:31:18
其它你可能感兴趣的问题
上一篇使用 Ajax 上传 base64 图像 下一篇javascript 字符串类型和字符串对象的区别？