为什么是 已弃用，最佳选择是什么？
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了为什么是 已弃用，最佳选择是什么？相关的知识，希望对你有一定的参考价值。
更长的时间我对html标签<marquee>感到好奇。
你可以在MDN specification找到：
已过时此功能已过时。虽然它可能仍然适用于某些浏览器，但不鼓励使用它，因为它可以随时删除。尽量避免使用它。
或者在W3C wiki：
不完全是。不要使用它。
我搜索了几篇文章，发现一些关于CSS相关替换的提及。 CSS属性如：
marquee-play-count
marquee-direction
marquee-speed
但看起来，它们不起作用。他们是2008年度规格的一部分，但他们被排除在年2014
W3 Consortium提出的一种方法是使用CSS3 animations，但对我而言，它似乎比易于维护的<marquee>复杂得多。
还有很多JS alternatives，有很多源代码，你可以添加到你的项目，并使它们更大。
我总是把事情看作：“不要使用字幕”，“已经过时”。我不明白为什么。
那么，任何人都可以向我解释一下，为什么要大肆宣传，为什么这么“危险”使用它以及最简单的替代方法是什么？
我发现了一个example，它看起来不错。当您使用良好浏览器支持所需的所有前缀时，您有大约20-25行CSS，其中2个值是硬编码的（开始和停止缩进），具体取决于文本长度。此解决方案不够灵活，您无法使用此方法创建自下而上的效果。
我不认为你应该移动内容，但这不能回答你的问题...看看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。
您只需在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>如前所述：最简单的替换是CSS动画
对于大帐篷的所有评论家：
它是一个非常有用的UI工具，我只是在悬停时使用它，以在有限的空间中显示更多信息。
mp3播放器的例子非常好，甚至我的汽车收音机都使用效果来显示当前的歌曲。
所以没有错，我的意见......
<marquee>从来不是任何HTML规范的一部分，你链接到的是一个CSS规范，因此很难弃用从未包含的东西。 HTML是关于文档的结构，而不是它的表示。因此，将自动元素作为HTML的一部分并不遵守这些目标。动画是在CSS中。
我创建了一个jQuery脚本，用标准的marquee替换旧的div标签。该代码还将解析marquee属性，如direction，scrolldelay和scrollamount。实际上代码可以跳过jQuery部分，但我觉得这样做太懒了，而且我从@Stano回答来自here的vanilla JS部分实际上是一个解决方案
这是代码：
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 = ' ';
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
我知道这是几年前的答案，但我在检查this时发现了这一点。当我检查时，我发现了这一点。
@keyframes scroll {
from {
transform: translate(0,0)
}
to {
transform: translate(-300px,0)
}
}
.resultMarquee {
animation: scroll 7s linear 0s infinite;
position: absolute
}
以上是关于为什么是 已弃用，最佳选择是什么？的主要内容，如果未能解决你的问题，请参考以下文章
JdbcTemplate queryForInt / Long在Spring 3.2.2中已弃用。应该用什么代替？
替代Apache Camel中已弃用的XmlJsonDataFormat
什么是已弃用的 getSupportLoaderManager() 的适当替换？