CSS for Deprecated HTML Attributes: Part 2
TweetIn Part 1 of CSS for Deprecated HTML Attributes, I described how to replace HTML’s deprecated attributes with CSS, which is more flexible and inline with web standards in use today. If you want to convert an existing site that is using out of date practices or want to understand how to bring your own development up to scratch, then these articles are for you.
Let’s get straight into it with link, alink and vlink. I’ll also cover clear, size and noshade.
link, vlink and alink
Link, alink (active link) and vlink (visited link) were all attributes for the <body> element. Link sets the colour of the text of unvisited hyperlinks, alink the colour when selected by the user (when the link is being clicked) and vlink the colour of visited hyperlinks.
<body link="blue" vlink="purple" alink="red">Deprecated example of the link attributes in the body element
To put this into a stylesheet you need to use the “:link”, “:visited” and “:active” pseudo-classes on the “a” type selector.
a:link { color: blue; }
a:visited { color: purple; }
a:active { color: red; }The flexibility here is that any extra styling can be added to the hyperlink, that wasn’t possible through HTML alone. You can add borders, background images or colour, change font family and size and most usually to amend whether the default underline shows or not. CSS allows for 2 other states that were not possible previously. “:hover” and “:focus”. :hover sets the style of the link when the mouse pointer passes over it and :focus is what is seen when the link is tabbed on to using the keyboard.
The pseudo-classes have differing specificities which means there is a set order in which these must be written; link, visited, focus, hover then active. The standard mnemonic that people use is “LoVe, HAte” with focus added in the middle, if you’re using it.
clear
The clear attribute was deprecated for use in the <br /> element. It specified where the next line should appear after the line break caused by this element, to control the text flow around floating objects. As with border, this conversion should be used anywhere you would like to clear floats.
The next line will begin...
<br clear="none" />
// ... normally (default)
<br clear="left" />
// ... on the nearest line below any floating
objects on the left-hand margin
<br clear="right" />
// ... on the nearest line below any floating
objects on the right-hand margin
<br clear="all" />
// .. on the nearest line below any floating
objects on both marginsDeprecated examples of the clear attribute in the br element
One common use for clear in today’s coding is to ensure a footer starts below any floating 2 or 3 column layout. For this you would want to position it underneath anything on the left and right margins, so that it is the very last item presented; in otherwords to clear all items. In CSS that is translated to “clear:both”:
#footer { clear: both; } // same as clear="all"
br { clear:left; } // an example to replace the
deprecated use of clear in <br />Clear left, right and none use the same value in the declaration as their name, i.e. clear:left, clear:right and clear:none – very easy.
size
Size was in use on the <hr /> (horizontal rule) element to set it’s height in pixels or percentage. Years ago I would always set size to 1 to give a thin solid black line, which would get rid of the default two-tone shading effect – more on the shading of <hr /> later.
<hr size="1" />
<hr size="5%" /> Before I show how to replicate this using CSS, I should point out that there are continual wranglings about whether or not this whole tag should still be in use. The two sides to the argument are; on the one hand it is a purely presentational element and should be removed in favour of using a border declaration in CSS; and on the other hand it has its semantic place to divide sections of text. I will leave the decision to you – a huge discussion on <hr />’s semantics took place on the Web Standards Group list last week.
To replicate in CSS is simple and uses the “height” declaration:
hr { height:1px; }
hr { height:5%; }By moving this to CSS we again open up the possibilities of how a horizontal rule can be styled – adding colour, relative heights and background images (note: the rendering of background images and colour is not consistent across the browsers).
noshade
The <hr /> element had another attribute deprecated; noshade was a boolean attribute used to remove the two-tone shading effect and set the line in a solid colour, usually grey.
<hr noshade />As a small aside, boolean attributes in XHTML are no longer used in their shortened form. For example, the “checked” attribute that is still in use on <input type=”checkbox” /> elements should be written in long-hand:
<input type="checkbox" checked="checked" />Similarly for “selected” in <option> elements:
<option selected="selected" >Option 1</option>Removing the shade in CSS isn’t as straight-forward as the attributes we’ve seen so far. In IE you’ll need to use the “color” declaration; and in Mozilla and Opera you need to use both the “border” and “background-color” declarations to get a similar effect to the original attributes. The following should be safe across different browers.
hr {
color: gray; // for IE
background-color: gray; // for Mozilla and Firefox
border: 0; // for Mozilla and Firefox
}The same styling rules apply as for the “size” attribute above.
Part 3
I’ll finish this series off by looking at bgcolor, align, width and height.
I like it! A great follow-up on part 1!
By the way, I’m pretty sure that people prefer to use mnemonics to remember stuff. Not pneumonics… ;-)
/feeling pretty silly
Thanks, I’ve updated the post.
[…] CSS for Deprecated HTML Attributes: Part 2 […]
I was looking at what you said about converting the noshade attribute. I noticed that you specify different CSS for different browsers. I thought the purpose of CSS was to make things look the same in all browsers? I know that some browsers haven’t implemented all CSS properties yet, but once they do, if they implement them correctly, aren’t they supposed to do the same thing in all of them?
@Nathan: Yes, it would be ideal and wonderful world if *all* browsers were simply standards-compliant and it was as simple as setting a single CSS declaration, then kicking back with a cup of tea content in the knowledge that that lovely bit of code would look the same in all browsers in all platforms.
Unfortunately, in the real world, different declarations (and sometimes even completely different stylesheets) are need to accommodate all the differences in rendering CSS across browsers.
Nathan: The purpose of CSS is simply to remove the presentation from the structure of your page.
You should strive for styles that degrade gracefully in older browsers rather than a pixel perfect design across the board.
Hmm…I tried the hr noshade fix and it seems to be working in IE but not in FF 3.0…shocking! :o Anybody know another fix?
@Megan:
I found this CSS works in Firefox 3 and Opera 10 alpha:
hr {
color: gray; // for IE
background-color: gray; // for Mozilla and Firefox
}
Setting “border: 0” effectively caused the element to disappear from the page. Simply setting the background color and leaving the border alone worked great. :)
Has anyone else tried this? it seems to work in IE7, IE8 and Fox3. I know that “noshade” is deprecated but why does IE8 show the HR when this is added?
Grr, it hid my HTML code… lets try that again:
Has anyone else tried this? it seems to work in IE7, IE8 and Fox3.
[hr noshade=”noshade” style=”border-width: 0; height: 1px;” /]
I know that “noshade” is deprecated but why does IE8 show the HR when this is added?
Oh, nevermind. Your right, the browsers do require background-color in order to work across the board. It seems that IE8 still tries to obey “noshade” though, even though that goes against standards. (no surprise)
@mike
You are right:
[hr noshade=”noshade” style=”border-width: 0; height: 1px;” /]
Has anyone else tried this? It seems to work in IE7, IE8 and Firefox3. I know that “noshade” is deprecated but why does IE8 show the HR when this is added?