Writing Site w/ CSS While Keeping Old Browsers Happy?

[carld]

While doing a site completely in HTML and CSS (i.e.: no font tags are used, all styles defined by CSS), are there suggestions for having the site appear well in non-CSS browsers? I've seen sites use both (i.e.: font tags and CSS) formats for text at the same time, and I'm not happy with that solution because it creates messy duplicate code.

Thanks in advance.

[Catman]

The only sane solution is to create well-structured content with plain XHTML and to use Javascript to enable style sheets only for more capable browsers.

[brothercake]

You don't need javascript to degrade properly.

Well-structured XHTML will take care of the older browsers - it matters that the content is readable and comprehensible, and that the basic functionality works - you can click links and use forms.

Then CSS on top will make the newer ones look nice.

[carld]

I see. Basically the tags that would be used on non-CSS browsers (like <font> <b> <i>) should be left out --- a non-CSS browser will pretty much see the page in plain text? I guess <br><p><div><table><tr><td><a href> and the like should remain and those tags will be read by a non-CSS browser.

[brothercake]

Leave out <font> for sure, but <b> and <i> are okay.

Think about it like this - HTML tags have semantic meanings which are largely independent of what they look like:

<b> means bold, or empahasised in some way
<i> means italic, or emphasised in some way
<em> means emphasised in some way
<cite> means a literary citation
<small> means, er, small
<big>
<strong>

The way they look you can control with CSS; but it doesn't matter - what matters is that meaning of some kind is indicated - in a speaking browser <em> and <b> might be interpreted as "louder", while <i> might be a different tone of voice.

There are lots more tags which have semantic meaning - <cite> <address> <q> <blockquote>, <h1> - <h6> for headings, and so on. These are what you use to convey the structure, emphasis and content of the page. http://www.w3schools.com/xhtml/xhtml_reference.asp


Then use CSS afterwards, to control what they look like in visual browsers.

Oh, and I would avoid table-based layouts - use tables *only* for presenting tabular data.