Cascading style sheets are, without doubt, the most important improvement made to HTML since the introduction of tables. With CSS you can separate how the content should be presented from the actual content itself. You can also make changes to the layout and fonts of a single HTML document or an entire site from a single file rather than having to recode each and every page.
I have discussed CSS before in this column and introduced the basic concepts. However, there are several inconsistencies in the standard that make it problematic for many developers to use. This is especially true when it comes to matching font sizes between Windows and Mac. Actually, the problem is not with CSS itself, but in the way in which the Mac operating system (OS) and Windows OS define point sizes for fonts. Without getting into the history and technical details, the problem is that Windows will display the same size font larger than a Mac will. Another problem is that Windows machines display colours darker than Mac's.
The answer? Using a JavaScript and CSS files tailored to the OS, we can deliver the right file sizes and colours for the OS that our audience is viewing our site in.
The CSS
The first thing to do is set up external CSS files. These are text files that will contain the CSS definitions and be imported for use in the HTML document using the <link> tag. Since the Mac OS and Windows OS have different font and colour standards, we will set up three different CSS files: one that will contain definitions that are common for both (default), one with definitions specific to the Mac, and one with definitions specific to Windows.
Place the following code in its own text file and save it as "default.css":
.copy { font-family: times, serif; width: 600px; line-height: 1.5; color: #000000; }
This file sets up a class called "copy" which will be used to set the appearance of the text on the HTML page.
This class sets the font to Times (or the generic serif font if Times does not exist on the visitor's computer), the colour of the text to black, and the width of the column to 600 pixels. In addition, it sets the space between the lines of text (line height) to one and a half.
If we desired to have the text double-spaced, we would use a two instead.
What has not been set by this rule is the actual size in which the text will appear. In addition, since the colour on a Windows machine will be darker than on a Mac, we need to set the colour to be lighter to compensate.
Next, create the Mac version of the CSS by saving the following code in its own file. Call this file "mac.css"
.copy { font-size: 12pt; color: #999999; }
This sets the font size for the class "copy" to 12pt and the colour to a medium grey.
The last CSS file that needs to be created is the Windows version of the CSS. Save the following code in its own file. Call this file "other.css"
.copy { font-size: 10pt; color: #cccccc; }
This sets the font size for the class "copy" to a smaller 10pt and a lighter colour of gray than the Mac version.
All of these files (default.css, mac.css, and other.css) should be saved in the same directory as the file that will contain our actual content, which, in this case, will be called "index.html".
The JavaScript
In the <head> of the of index.html, place the following JavaScript:
<script language="JavaScript">
document.write('<link href="default.css" rel="styleSheet" type="text/css">');
if ((navigator.appVersion. indexOf('Mac') != -1)) {document.write('<link href="mac.css" rel="styleSheet" type="text/css">'); }
else {document.write('<link href="other.css" rel="styleSheet" type="text/css">'); }
</script>
This script first "writes" in the link tag that will attach the standard style sheet to the document and then checks to see whether the browser being used is on a Mac. If it is, then the Mac version of the CSS is linked to the page. If not, then the Windows version is used. Notice that the script does not check to make sure that the OS is Windows. That is because this code will be used if the browser is UNIX-based or on any other OS other than the Mac.
So why doesn't the definition of "copy" in the Mac or Windows CSS file replace the definition in the standard css file? The "Cascading" in Cascading Style Sheets refers to the ability to "blend" definitions together even if they are coming from different sources.
Notice, however, that although we defined the colour of the text in standard.css, it gets redefined by the later colour rules in either mac.css or other.css. The last version of a rule listed in a CSS definition is the one that gets used.
The HTML
Now for the easy part: the HTML. Anywhere that you want to use the class "copy," set up your <p> tags like this:
<p class="copy">text here</p>
All of the content between the <p class="copy>...</p> tags will obey the CSS rules that have been set up and linked to the document using the above JavaScript. The JavaScript trick shown above can actually be used for many different purposes. For example, if you wanted to deliver a different stylesheet depending on a preference expressed by the visitor, you could use a JavasScript variable to control which stylesheet is loaded.
This script gives the Web designer and the site visitor a lot more control over exactly how the page is displayed, without having to make a new page for each version.
Jason Cranford Teague is the author of DHTML for the World Wide Web. Visit his website, Webbed Environments.
Comments