CSS for Deprecated HTML Attributes: Part 1

When HTML 4.0 was introduced some attributes became deprecated. Browsers continued to support them to ensure older sites continued to display correctly, and developers were urged to stop using them in favour of more flexible alternatives such as CSS.

The deprecated attributes were purely presentational, meaning they are only of benefit for the way the element will look. We remove presentational aspects to a CSS file to separate content and structure from the look of a web page. This has many benefits for the user, developer and holder of the bandwidth purse-strings.

It’s sometimes easier to leave in these deprecated attributes because they are still supported in current browsers. I would encourage you to remove them in favour of CSS for two reasons – the first is that any new browsers are not required to support them and secondly, in most cases it will save you time in the longer term maintenance of your code. In this part, I describe hspace, vspace, type and border.

hspace and vspace

Hspace (horizontal space) and vspace (vertical space) were both attributes for the <img /> and <object> elements. It was used to set the space between the element and it’s surroundings.

<img src="images/cd.gif" hspace="10" vspace="10" 
     width="10" height="20" />

Deprecated example of “hspace” and “vspace” in the image element

The corresponding CSS is to use margin or padding, dependent upon styling issues. To replicate these attributes exactly, the shorthand version of these declarations can be used – I’ll choose margin for this example.

hspace:

img { margin: 0 10px; } 
// top and bottom 0, left and right 10px

vspace:

img { margin: 10px 0; } 
// top and bottom 10px, left and right 0

The great thing about moving this to the CSS file is that we can set the space different for all 4 sides if necessary, something that couldn’t be done with hspace and vspace alone.

Different space on all sides:

img { margin: 1em 2em 5em 4em; }
// top 1em, right 2em, bottom 5em, left 4em

type

The type attribute was used to set the list markers on unordered and ordered lists (<ul> and <ol>) and on individual list items (<li>) for example “a, b, c”, “1, 2, 3″, “i, ii, iii”, etc.

<ol type="a">
    <li>First item</li>
    <li>Second item</li>
    <li>Third item</li>
</ol>
  1. First item
  2. Second item
  3. Third item

Deprecated example of “type” in an ordered list element

To replicate this in CSS you must use list-style-type:

ol { list-style-type: lower-alpha; }

This styling can also be used on individual <li> elements to create differing sequence types, if you really wanted to!

Using the HTML attributes there were only 5 possible types you could use (1, A, a, I and i). By using CSS this increases to a possible 20 values including types such as “hiragana-iroha”, which is a Japanese sequence, and “none” to stop displaying any kind of sequence or bullet. An example of all the types can be seen if you are viewing the page using Firefox – unfortunately IE doesn’t recognise any of the more complex character types and will default to the list’s own style type.

border

The border attribute was deprecated only on the <img /> and <object> elements, but this should be used anywhere that you’d like to modify a border – to further the separation of presentation and content.

The most common place you’ll see this attribute, in current use, is on images that are surrounded by a link:

<a href="#">
    <img src="images/cup.gif" width="10" 
         height="20" border="0" />
</a>

Deprecated example of “border” in the image element

Without setting the border to zero, the browser’s default and usually undesirable rendering is to place an blue border around the image, to show that it is clickable (much like it will add a blue underline to a text link).

You will probably want to remove the border from all images that fall inside a link, using CSS you do this using the “border” declaration:

a img { border: 0; }
// you could also use border:none;

The flexibility in using CSS in favour of the deprecated attribute is similar to the hspace/vspace example above. It is now very easy to specify a different border size, colour and style to each different side of the item.

img { 
    border-width: 2px 4px; 
    border-style:dotted dashed solid none;
    border-color: red;
}
// width: top and bottom 2px, left and right 4px
// style: top dotted, right dashed, 
          bottom solid, left none
// color: all sides red, if present

Part 2 and 3

In the coming weeks I hope to cover link, alink and vlink, width and height, size and noshade, bgcolor, align and clear.