是否有已弃用的 HTML 元素在当前浏览器中失去支持的示例？

Question

我们大多数人都知道，有时某些标签会处于弃用状态，这意味着它已经过时了。要么后面跟一个更新的 HTML 构造，要么可以在 CSS 中完成（例如 <center>）。不过，我想知道的问题是：当标记或元素被弃用时，将来是否会从浏览器支持中删除它？换句话说，目前我所知道的所有浏览器都支持 <center>，但我可以想象浏览器继续支持已弃用的内容可能效率不高。因此，支撑一定会在一段时间后下降。

浏览器是否有可能放弃对曾经很常见的标签或元素的支持？为了提供一个更适合 SO 问答模板的问题，我将重新表述以上所有内容：are cases known where browsers have dropped support for a 属性 or element that once was common ?

我唯一能找到的是 the docs，说明：

Deprecated A deprecated element or attribute is one that has been outdated by newer constructs. Deprecated elements are defined in the reference manual in appropriate locations, but are clearly marked as deprecated. Deprecated elements may become obsolete in future versions of HTML.

User agents should continue to support deprecated elements for reasons of backward compatibility.

Definitions of elements and attributes clearly indicate which are deprecated.

在我看来，这是不是基于意见的。我想问的是，是否存在已知的标签实际上不再受浏览器支持的情况。这不受意见的约束。但是我确实知道这个问题对它有一种开放的感觉。因此，我想澄清一下，我正在寻找浏览器放弃支持的实际证据。我不是要请什么预言家出面表白他们的神通，我只是在过去发生的案例中寻找例子。

Answer 1

以前发生过。

<blink> HTML 标签 (see wiki and docs) 曾经很常见，但被认为对用户非常不友好，因此被弃用。 Netscape、Opera 和 Firefox 过去都支持它。 Firefox 是最后一个在版本 23 中完全删除它的。

<blink> 元素格外突兀，变得非常不受欢迎，因此支持率下降不足为奇……但这也是向后兼容性的问题。删除某些东西的好处是否超过其功能的损失？ <blink> 可以在没有太大影响的情况下被删除（事情只会停止闪烁）。另一方面，仍然支持像 <marquee> 这样的标签（它也受到了很多负面报道），很可能是因为删除它可能会直接影响内容。

总而言之，我认为问题不在于现有浏览器是否会删除已弃用的 css/html（因为这种情况相对罕见），而是 new/future 浏览器是否会支持它们.向后兼容性只会到此为止。

总结一下：是的，所以不要使用已弃用的功能。

Answer 2

下面的代码从不推荐使用的标签创建元素，并输出浏览器认为新创建的元素的真实内容：

var dep = 'acronym|applet|basefont|bgsound|big|blink|center|dir|font|frame|frameset|hgroup|isindex|listing|marquee|menu|multicol|nextid|nobr|noembed|noframes|plaintext|s|spacer|strike|tt|u|xmp'.split('|'),
  s = '<table>',
  els = [];

dep.forEach(function(val) {
  var el = document.createElement(val),
    str = el.toString().slice(8, -1),
    style = 'HTMLElement HTMLPhraseElement HTMLBlockElement HTMLPreElement HTMLSpanElement HTMLDivElement'.indexOf(str) > -1 ? 'background:yellow' :
    str === 'HTMLUnknownElement' ? 'background:orange' :
    '';
  el.innerHTML = val;
  els.push(el);
  s += '<tr style="' + style + '">' +
    '<td>' + val +
    '<td>' + str +
    '<td>';
});

s += '</table>';
document.getElementById('list').innerHTML = s;

var td = document.querySelectorAll('td:last-child');
dep.forEach(function(val, idx) {
  td[idx].appendChild(els[idx]);
});

table {
  font: 12px verdana;
  border-spacing: 0px;
  border: 1px solid black;
}

td {
  border-right: 1px solid #ddd;
  border-bottom: 1px solid #bbb;
}

<div id="list"></div>

我们可以假设该浏览器 不支持 任何以橙色突出显示的内容，以黄色突出显示的任何内容都不确定，其余的应该完全支持。

要确定通用“HTMLElements”的“不确定性”程度，我们可以将它们的默认 CSS 样式与 span 或 div 元素的默认样式进行比较。下面的代码片段通过向列表中添加一个新列来实现这一点，该列显示了与每个弃用元素不同的样式。

“HTMLUnknownElement”类型的元素没有明显的样式（正如预期的那样）。大多数其他元素都可以。对于那些不支持的，这并不一定意味着它们不支持不同的属性。例如，font 元素的样式匹配 span 的默认样式——但是 font 元素支持属性 size 和 face，span 不支持。

function getStyles(el) {
  var gcs= getComputedStyle(el),
      st= gcs.cssText ? gcs.cssText.split(/; */) : el.currentStyle,
      obj= {},
      i, j, sp;
    
  for(var i = 0 ; i < st.length ; i++) {
    sp= st[i].split(':')[0];
    if(j = gcs.getPropertyValue(sp)) {
      obj[sp]= j;
    }
  }
  return obj;
} //getStyles

function compStyles(st1, st2) {
  var s= '';
  for(var i in st1) {
    if(st1[i] && st1[i] !== st2[i]) {
      s+= i+': '+st1[i]+' - '+st2[i]+'; ';
    }
  }
  return s;
} //compStyles

var dep= 'acronym|applet|basefont|bgsound|big|blink|center|dir|font|frame|frameset|hgroup|isindex|listing|marquee|menu|multicol|nextid|nobr|noembed|noframes|plaintext|spacer|strike|tt|xmp'.split('|'),
    s= '<table>',
    els= [],
    spanStyles=
      getStyles(
        document.body.appendChild(
          document.createElement('span')
        )
      ),
    divStyles=
      getStyles(
        document.body.appendChild(
          document.createElement('div')
        )
      );

dep.forEach(function(val) {
  var el= document.createElement(val),
      str= el.toString().slice(8,-1),
      display,
      style= 'HTMLElement HTMLPhraseElement HTMLBlockElement HTMLPreElement HTMLSpanElement HTMLDivElement'.indexOf(str)>-1 ? 'background:yellow' :
             str==='HTMLUnknownElement' ? 'background:orange' :
             '';

  document.body.appendChild(el);
  display= getStyles(el).display;
    
  el.innerHTML= val;
  els.push(el);
  s+= '<tr style="'+style+'">'+
        '<td>'+val+
        '<td>'+str+
        '<td>'+display+
        '<td>'+compStyles(
                 getStyles(el),
                 display==='block' ? divStyles : spanStyles
               )+
        '<td>';
  
});

s+= '</table>';
document.getElementById('list').innerHTML= s;

var td= document.querySelectorAll('td:last-child');
dep.forEach(function(val, idx) {
  td[idx].appendChild(els[idx]);
});

table {
  font: 12px verdana;
  border-spacing: 0px;
  border: 1px solid black;
}

td {
  vertical-align: top;
  border-right: 1px solid #ddd;
  border-bottom: 1px solid #bbb;
}

<div id="list"></div>

是否有已弃用的 HTML 元素在当前浏览器中失去支持的示例？

Are there examples of deprecated HTML elements that lost support in current browsers?

html

deprecated