11. Backward Compatibility and CSS
We know that older browsers (version 3 or older of all the major browsers) don't support style sheets. How can we design sites based on style sheets for appearance that don't look too plain in older browsers? It's a complex issue, but one I want to discuss a little in this lesson. Along the way we'll learn about the one important kind of selector we haven't yet seen.
Legacy Code
You've got a long-standing site, which uses presentational HTML (elements like FONT, B, etc.) How do we design a style sheet and use it in conjunction with this page?
Let's look at the problem in a little more detail.
Recently, I remember this question from the style sheets newsgroup
"If I have a web page that uses presentational markup (like the FONT tag) then style sheets don't override these. I have to remove them. Why is that?"
Let's take a look at the HTML here, to see what is really happening.
Imagine we have the following HTML in our page
<P><Font face="Arial">here is the text of the paragraph.</Font></P>
and a style sheet rule that says
P {font-family: Verdana}
pop quiz
Why will a browser still show the paragraph in Arial, not in Verdana?
Think about it. The text is in fact in a font element, which itself is contained inside the paragraph. The rule selects the paragraph, but the text doesn't inherit the style of the paragraph, because there is some more specific information associated with the FONT, namely the face="Arial" attribute.
How do we make our paragraphs Verdana?
Our first attempt is to say, well, I'll select the FONT elements, and set the font of these to Verdana. This will work. But it isn't ideal.
pop quiz
What happens if we also have
<H1><FONT face="Times">Important Announcement</FONT></H1>
Suddenly, all our headings are also in Verdana. Not a good outcome.
How can we get around this? Logically, we'd like a rule that selects only FONT elements when they are inside Paragraphs, and set these to be in Verdana, and another rule, that selects FONT elements only when they are inside Headings of various levels, and set these to be in Times.
And we can do exactly that, which is the last important subject we'll cover in these lessons.
Context
So far, we've seen that rules can have
- simple selectors, which select HTML elements like every paragraph or every heading
- link selectors (pseudo class selectors for the pedantic), which select links in various states
- class selectors, which select elements on the basis of their class attribute value
- groups of selectors, which apply the same properties to a number of different types of element at once
The last selector we are going to learn about in these lessons is the Contextual Selector. It lets us make a rule that only applies to an element when it is contained inside another element. For example FONTs only when they are inside Headings, or FONTs only inside Paragraphs.
The form of these selectors is simple, just a list of the selectors, in order of containment, separated by a space.
For example, the selector for FONTs inside Paragraphs would be
P FONT
Exercise 1
Create a series of rules that achieve our desired effect of having all the paragraphs in Verdana, and all the Headings (just do level 1, 2, and 3) in Times.
Answers at the foot of the lesson.
Here is a slightly modified version of the example web page for testing whether these rules are working. Create a new file, paste it in, and save it in the same folder as the other web page.
<HTML>
<HEAD>
<TITLE>Choux</TITLE>
<LINK REL=STYLESHEET TYPE="text/css" HREF="core-style.css">
</HEAD>
<BODY>
<H1><FONT FACE="Times">Classic Patisserie Recipes</FONT></H1>
<H2><FONT FACE="Times">Pastry Cream</FONT></H2>
<P><FONT FACE="Arial">Also known as creme patissiere, this is the
traditional filling for fresh fruit tarts. It is also used to fill
choux puffs.</FONT></P>
<H3><FONT FACE="Times">Ingredients</FONT></H3>
<P><FONT FACE="Arial">2 cups milk</FONT></P>
<P><FONT FACE="Arial">1 vanilla bean</FONT></P>
<P><FONT FACE="Arial">6 egg yolks</FONT></P>
<P><FONT FACE="Arial">175g castor sugar</FONT></P>
<P><FONT FACE="Arial">50g cornflour</FONT></P>
<H3><FONT FACE="Times">Method</FONT></H3>
<P><FONT FACE="Arial">Scald milk with vanilla bean. Beat egg yolks
with cornflour until thick. Pour in milk and whisk until quite
smooth.</FONT></P>
<H1><FONT FACE="Times">More Information</FONT></H1>
<P><FONT FACE="Arial">to contact the author, email me on
john@masterchef.org</FONT></P>
<P><FONT FACE="Arial">to download all my recipes in acrobat format,
click here</FONT></P>
<P><FONT FACE="Arial">for other recipes, see biodynamic recipes from
http://www.biodyn.nu</FONT></P>
</BODY>
</HTML>
Next
We have really covered some ground now, and we are coming to the end of our lessons. By now, we have covered most commonly used ways of selecting elements on a page, and many of the key styles at our disposal with style sheets. At the end of the lessons there are suggestions of where to go from here.
We are going to wrap up by discussing in more detail the issue of linking and embedding style sheets, how to do it, and what's best.
Answer to Exercise 1
P FONT {font-family: Verdana, sans-serif}
H1 FONT {font-family: Times, serif}
H2 FONT {font-family: Times, serif}
H3 FONT {font-family: Times, serif}
Did you add the generic font family as recommended?
