Are there examples of obsolete HTML elements that have lost their support in current browsers?

advertisements

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.

Note that comments concerning the validity of my question are welcome - rather than simply down voting it.


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|spacer|strike|tt|xmp'.split('|');

var s= '<table>';
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;
  document.body.appendChild(el);
  s+= '<tr style="'+style+'"><td>'+val+'<td>'+str;
});
s+= '</table>';
document.getElementById('list').innerHTML= s;

Fiddle

Here is the output from current versions of Windows-based browsers:

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>