In my last post, I discussed some observations that I made regarding maintaining legacy web-sites. Although, afaik, all of the information I presented in that post is accurate, if you want to bring your old quirks/compatibility-view reliant page up to modern HTML5 standards, here are some tips.
One of the first things I look for in old sites is the lack of a DOCTYPE. When no DOCTYPE is specified, many browsers rely on “quirks” mode. This provides a much less predictable rendering pipeline for your pages. My first step is to always add the doctype for every page.
<!DOCTYPE html>
With this specification, your page will utilize HTML5 rendering. Something else that is good to add is a meta tag telling the browser to use its newest rendering mode. This seems unncesary, but a user can override your page’s HTML5 mode in IE by using Enterprise Mode or Compatibility View settings. In those instances, the meta tag for browser mode is important to prevent others from mucking up your hard work. This tag goes into the head section of your page and should look like this:
<!DOCTYPE html>
<html>
<head>
<title>Some title</title>
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1" />
</head>
Many tags and attributes in HTML are deprecated. Almost all of these deal with styling, so they have CSS equivalents. Here is a list of all of the ones I have found:
cellpadding cellspacing align valign bgColor cursor:hand <b> <font> (and attributes face and size) <center>
How do we convert these? cellpadding and cellspacing are, obviously dealing with tables. Specfically, they deal with the td elements within tables. So, they are pretty easy to convert to CSS. If, for example, we have a table like this:
<table cellpadding=1 cellspacing=0>
<tr>
<td>Blah</td>
<td>Blah</td>
<td>Blah</td>
</tr>
</table>
Using CSS, the table would look like this:
<table style="border-spacing: 0;">
<tbody>
<tr>
<td style="padding:1px">Blah</td>
<td style="padding:1px">Blah</td>
<td style="padding:1px">Blah</td>
</tr>
<tbody>
</table>
For valign and align, I mostly see these used within tables in this manner:
<table>
<tr valign=top>
<td align=center>Blah</td>
<td align=center>Blah</td>
<td align=center>Blah</td>
</tr>
</table>
I should mention one big gripe I have with older pages is how many developers completely left out terminators for everything from attribute values to in-line JavaScript calls. Man, it’s bad. At any rate, converting that table to use CSS looks like this:
<table style="border-spacing: 0;">
<tbody>
<tr>
<td style="text-align: center; vertical-align: top;" >Blah</td>
<td style="text-align: center; vertical-align: top;" >Blah</td>
<td style="text-align: center; vertical-align: top;" >Blah</td>
</tr>
<tbody>
</table>
Note that, semantically, the styles are really on the cell rather than peppered on various elements within the table.
The attributes bgColor and cursor:hand are straight-forward. They convert directly to CSS styles:
<div style="background-color:white;cursor:pointer;"></div>
That takes care of most of the attributes. The font and center tags are a little more interesting.
The font tag is used like an enclosure element. The b tag is also an enclosure element that specifies bold text. Where I see it used most often is with in-line text. As such, it’s easy enough to change these tags to a span with appropriate style. Also, the face attribute becomes a CSS style. Consider this HTML:
Here's some text and then my <font size="2" face="ARIAL">text style</font> changes.
What is size, though? Older browsers allowed a value from from one through seven with the default being three. The easiest thing is to convert these sizes to em units with (3) being (1.0) em. Using that as a basis, size would convert to CSS in this manner:
<font size=1>- font size 1</font> <span style="font-size:0.63em">- font size: 0.63em</span> <font size=2>- font size 2</font> <span style="font-size:0.82em">- font size: 0.82em</span> <font size=3>- font size 3</font> <span style="font-size: 1.0em">- font size: 1.0em</span> <font size=4>- font size 4</font> <span style="font-size: 1.13em">- font size: 1.13em</span> <font size=5>- font size 5</font> <span style="font-size: 1.5em">- font size: 1.5em</span> <font size=6>- font size 6</font> <span style="font-size: 2em">- font size: 2em</span> <font size=7>- font size 7</font> <span style="font-size: 3em">- font size: 3em</span>
Combining a font, b, face, and size attributes (where size was 4), translates to CSS utilizing font-size, font-weight, and font-family styles:
<span style="">Here is unstyled text</span> <span style="font-size:0.82em;font-weight:bold;font-family:Arial;">flowing in smaller, bold text.</span>
Last, but not least, is the center tag. It is an enclosing element similar to a div. By default, it causes all elements within it to be centered horizontally. With that in mind, CSS handles centering slightly differently. Consider this older HTML:
<center>
<div>
This is text.
</div>
<table cellpadding=1 cellspacing=0>
<tr>
<td>Blah</td>
<td>Blah</td>
<td>Blah</td>
</tr>
</table>
</center>
This will cause the div containing text and the table to be centered. With newer CSS though, we’d start out converting the center tag to a div and use the text-align style like so:
<div style="text-align:center;">
<div>
This is text.
</div>
<table>
<tbody>
<tr>
<td>Blah</td>
<td>Blah</td>
<td>Blah</td>
</tr>
</tbody>
</table>
</div>
Centering non-text elements, horizontally, can be achieved with CSS margins, though. Setting the left/right margin on the table itself will cause it to be centered within its parent:
<div style="text-align:center;">
<div>
This is text.
</div>
<table style="margin: 0 auto;">
<tbody>
<tr>
<td>Blah</td>
<td>Blah</td>
<td>Blah</td>
</tr>
</tbody>
</table>
</div>
Those are all of the tips I have for now.
Now the question is, why would someone want to go through this exercise? There are a number of factors to consider.
- Performance is better
- Testing is more consistent and predictable
- Behavior across different browsers is more consistent
- You’re eliminating reliance on deprecated code and browser compatibility modes
- Your page will work with newer JavaScript frameworks since the browser (mainly IE) isn’t running in some old mode
- Future maintenance becomes more straight forward
- New browser versions are far less likely to be breaking