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

Question

Most of us know that now and then some tags get a deprecated status, which means that it has been outdated. Either it is followed by a newer HTML construct, or it can be done in CSS (take for example <center>). The question that I'm wondering about, though, is: when a tag or element gets deprecated will it be removed from browser support in the future? In other words, currently all browsers that I know of support <center>, but I can imagine that it might not be efficient for browsers to keep supporting deprecated content. Therefore, support must drop after some time.

Is it likely that browsers drop support for a tag or element that once was quite common? To provide a question that's better suited for the SO question-answer template, I'll rephrase all of the above: are cases known where browsers have dropped support for a property or element that once was common?

The only thing that I could find was in the docs, stating:

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.

As I see it, this is not opinion based. I am asking if there are cases known of tags that are actually not being supported by browsers any more. That's not bound by opinion. However I do understand that this question has quite an open feel to it. Therefore I'd like to clarify that I am looking for actual and factual evidence of browsers dropping support. I'm not asking about any foreseers to come forward and confess their magical powers, I'm merely looking for examples from cases that have occurred in the past.

Answer 1

The code below creates elements from deprecated tags, and it outputs what the browser thinks the newly-created elements really are:

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>

We can assume that anything highlighted in orange is not supported by that browser, anything highlighted in yellow is iffy, and the rest should be completely supported.

---

To determine the degree of "iffyness" of the generic "HTMLElements," we could compare their default CSS styles to the default styles of a span or div element. The Snippet below does this by adding a new column to the listing, which shows styles distinct to each deprecated element.

Elements of type "HTMLUnknownElement" have no distinct styles (as expected). Most other elements do. For those that don't, that doesn't necessarily mean they don't support distinct attributes. For example, the font element's styles match the default styles of a span – but the font element supports attributes size and face, which the span does not support.

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>

Answer 2

It has happened before.

The <blink> HTML tag (see wiki and docs) used to be quite common, but it was considered very user-unfriendly and therefore became deprecated. Netscape, Opera and also Firefox used to support it. Firefox was the last to finally completely remove it in version 23.

The <blink> element was exceptionally obtrusive and became very unpopular, so the drop in support was no surprise... but it is also a question of backwards compatibility. Do the benefits of removing something outweigh the loss of its functionality? <blink> could be removed without much repercussion (things would just stop blinking). On the other hand, a tag like <marquee> (which has also received a lot of negative press) is still supported, most likely because removing it may effect content directly.

All in all I think that the issue isn't really if existing browsers will remove deprecated css/html (since it is a relatively rare occurrence), but rather whether new/future browsers will support them. Backwards compatibility will only go so far.

To sum up: Yes, so don't use deprecated features.