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

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>


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.

Tags:

Html

Deprecated

Recent Posts