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


most of know , tags deprecated status, means has been outdated. either followed newer html construct, or can done in css (take example <center>). question i'm wondering about, though, is: when tag or element gets deprecated removed browser support in future? in other words, browsers know of support <center>, can imagine might not efficient browsers keep supporting deprecated content. therefore, support must drop after time.

is browsers drop support tag or element once quite common? provide question that's better suited question-answer template, i'll rephrase of above: are cases known browsers have dropped support property or element once common?

the thing find in the docs, stating:

deprecated deprecated element or attribute 1 has been outdated newer constructs. deprecated elements defined in reference manual in appropriate locations, marked deprecated. deprecated elements may become obsolete in future versions of html.

user agents should continue support deprecated elements reasons of backward compatibility.

definitions of elements , attributes indicate deprecated.

as see it, not opinion based. asking if there cases known of tags not being supported browsers more. that's not bound opinion. understand question has quite open feel it. therefore i'd clarify looking actual , factual evidence of browsers dropping support. i'm not asking foreseers come forward , confess magical powers, i'm merely looking examples cases have occurred in past.

note comments concerning validity of question welcome - rather down voting it.

the code below creates elements deprecated tags, , outputs browser thinks newly-created elements 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 output current versions of windows-based browsers:

enter image description here

we can assume highlighted in orange not supported browser, highlighted in yellow iffy, , rest should supported.


to determine degree of "iffyness" of generic "htmlelements," compare default css styles default styles of span or div element. snippet below adding new column listing, shows styles distinct each deprecated element.

elements of type "htmlunknownelement" have no distinct styles (as expected). other elements do. don't, doesn't mean don't support distinct attributes. example, font element's styles match default styles of spanfont element supports attributes size , face, span not support.

function getstyles(el) {    var gcs= getcomputedstyle(el),        st= gcs.csstext ? gcs.csstext.split(/; */) : el.currentstyle,        obj= {},        i, j, sp;          for(var = 0 ; < 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 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>


Comments

Popular posts from this blog

google chrome - Developer tools - How to inspect the elements which are added momentarily (by JQuery)? -

angularjs - Showing an empty as first option in select tag -

php - Cloud9 cloud IDE and CakePHP -