Deprecated HTML test page

A demonstration of disabling deprecated HTML using CSS. Link back to article: Disabling Deprecated HTML Using CSS

This document starts with a <body> tag with the bgcolor attribute set to "blue". After that, there is a <center> tag, followed by a <basefont size=20>. After that I applied some other deprecated HTML tags and attributes explained further down. Watch how the CSS disables them and makes them invisible, without disturbing the natural inheritance and cascade.

This is an image with vspace, hspace and border applied

Source:
<img src="i/duk1.jpg" vspace="100" hspace="100" border=2>

This paragraph has the align attribute set to "right". Here are some tags: Strike, s and font with the color, face and size attributes set. And finally the u tag.

Source:
<p align="right">This paragraph has the align attribute set to "right". Here are some tags: <strike>Strike</strike>, <s>s</s> and <font color="blue" face="arial" size="10">font with the color, face and size attributes set.</font> And finally the <u>u</u> tag.</p>

Here is a <ol> list with the type attribute set to "a":

  1. First item
  2. Second item
  3. Third item

Source:

<ol type="a">
    <li>First item</li>
    <li>Second item</li>
    <li>Third item</li>
</ol>

Some table examples. The table has a width attribute of 50% and a border. I added some borders in the <td> for visibility.

This cell has the following attributes: bgcolor, valign, width and height. They should all be disabled by now.

Source:

<table width="50%" border=1>
<tr><td bgcolor="yellow" valign="bottom" width="50px" height="50px">This cell has the following attributes: bgcolor, valign, width and height. They should all be disabled by now.</td></tr>
</table>

The CSS

  font,basefont {
    font:inherit; /* Standard browsers. Font instead of font-size for Opera */
    color:inherit; /* Standard browsers */
    color:expression(this.parentNode.currentStyle['color']); /* IE */
    font-size:100%; /* All browsers. Sizes are inherited */
    font-family:expression(this.parentNode.currentStyle['fontFamily']); /* IE */
  }
  center {
    text-align:inherit; /* Standard browsers */
    text-align:expression(this.parentNode.currentStyle['textAlign']); /* IE */
  }
  s,strike,u {
    text-decoration:inherit; /* Standard browsers */
    text-decoration:expression(this.parentNode.currentStyle['textDecoration']); /* IE */
  }
  *[align] { text-align:inherit; }  /* Standard browsers */
  * { text-align:expression(this.align ? this.parentNode.currentStyle['textAlign'] : ''); }  /* IE */
  img { margin:0; border:none; }  /* All browsers. Borders & margins are not inherited */
  ol { list-style-type:decimal; }  /* All browsers. Removes the type attribute */
  body { background-color:transparent; /* All browsers */ }
  table,tr,th,td {
    width:auto; /* All browsers */
    height:auto; /* All browsers */
    background-color:transparent; /* All browsers */
    vertical-align:inherit; /* All browsers (works in IE) */
  }

The Javascript (for vspace and hspace in IE)

 window.onload = function() {
    for (i=0;i<document.getElementsByTagName('img').length;i++) {
      document.getElementsByTagName('img')[i].removeAttribute('vspace');
      document.getElementsByTagName('img')[i].removeAttribute('hspace');
    }
  }