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.

  • Quicker style changes: Any changes in a single stylesheet can affect the look of an entire site.
  • Easier maintenance: The content in the XHTML code is easier to find and alter.
  • Bandwidth reduction: Less presentation in the XHTML code means smaller files sizes, which decreases the time to display the page and reduces bandwith cost.
  • Increased accessibility: Enables a page to degrade gracefully in pretty much any device so a user can see the content even if their browser can’t render the style.

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.

14 comments on “CSS for Deprecated HTML Attributes: Part 1”

  1. Cool. Nice to give people some practical instructions on how to recover from past-practice HTML! Better than just telling people they should switch to CSS, you’re telling them exactly how to convert specific style attributes into best practice. Very nice.

  2. It may be worth mentioning that according to CSS 2.1 section 6.4.4, “presentational attributes… are translated to the corresponding CSS rules with specificity equal to 0″. This means that, in principle, when modifying existing markup containing such attributes, one can start by creating appropriate CSS rules of higher specificity than 0 (which is almost any rule) using the techniques you describe. Once certain that all the presentational attributes are being overridden by the appropriate rules, the attributes can all be removed and the appearance of the content should remain unchanged.

    Combined with a good version control system to rollback any unfortunate accidents, this could be a great way to educate those old-school developers coming to stylesheets for the first time, by relating their existing knowledge to the corresponding CSS technique. (It also gives them a good reason to properly understand selector specificity.)

    Looking forward to parts 2 and 3 :-)

  3. Nick: Thanks for the tip, I didn’t know that.

    Anders: I don’t think it’s depressing at all. I think we need to remember that the web standards brigade is still only a very small proportion of all developers. These basic articles need to keep being created so fresh content is available to anyone learning from scratch or wishing to make the transition.

  4. I see what you’re saying, but in general I find those kind of sessions to quite insular. There is a huge need for more generalised meetings where people of any standard will be welcome, instead of those where a newbie will be sitting around embarrassed because they don’t understand the joke.

  5. In some of my web-enabled applications, I get people bypassing my error-correction and inputting invalid markup into a textarea. So I find it valuable to add some basic rules to my stylesheet, like:

    font {color:#f00;font-size:2em;font-weight:bold;}
    u {text-decoration:none;}

    and similar rules for whatever elements I don’t like. :)

  6. I often do the same – strip the underline from ins elements, remove the strikethrough effect from s and strike, and so on. But in your example of font – wouldn’t any font colours or sizes set in the markup override those set in your CSS? I’ve used Javascript for this purpose

  7. img { margin: 10px 10px; }

    Nice to control all images but how do you stop the application to images used in your template, buttons, logos etc… which want no spacing and are specificity placed….?

  8. Sometimes we do not have control of the style sheet, (on external blogs, etc.), so what do we do then?

  9. @JimB – I guess there isn’t a lot you can do in that case, apart from making damn sure you’ve educated the users in what mark-up they should and shouldn’t use.

  10. HTML Attributes are property of the elements which may have values and these attribute values are always enclosed in quotes. It’s providing to the browser with some additional information about an elements how the elements should appear or behave. HTML elements can contain one or more attributes, attribute names and attribute values are case-insensitive and separated by an equals (=) sign.

    [HTML Attributes](http://www.willvick.com/HTML/HTMLAttribute.aspx)

    [HTML Attributes Examples](http://www.willvick.com/HTML/HTMLExampleAttribute.aspx)

    [Youtube – HTML Tutorial – Attributes](http://www.youtube.com/watch?v=ucOXvaCEZgg)

Add your comment

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>