Web Standards in Dreamweaver Part 3 - Browser and Device Issues
(Page 9 of 12 )
Browser issues are cited as the main reason that people do not implement CSS on their web sites; however, this excuse is fast becoming outdated. Even so, we will look at how to address these issues in this section.
Although browsers with no support for CSS should render your content in areadable fashion, there are problems with browsers that have partial or buggy support for CSS, and it is these browsers, particularly Netscape 4, that you need to consider.
Versions of Netscape 4 may crash or render your page unusable or just plain ugly when encountering certain valid CSS declarations. Thankfully, there are ways around this problem.
Netscape 4
Earlier, we looked at two ways of attaching a stylesheet to a page: linking it and importing it. Netscape 4 does not recognize the @ Import directive, and you can use this fact to your advantage by attaching two stylesheets to the page: one basic, Netscape 4–friendly stylesheet that you link to your page, and another, more advanced stylesheet that you attach using @ Import, making it invisible to Netscape 4.
1. To attach two stylesheets to your page in this way using Dreamweaver, attach the basic Netscape 4–friendly stylesheet first, using the link method, as shown in Figure 2-45.
Figure 2-45. The link method
2. Attach the second stylesheet with the declarations for newer browsers using @ Import, as shown in Figure 2-46.
Figure 2-46. The import method
3. Specify the imported stylesheet after the linked stylesheet so that the Netscape 4–friendly CSS is overridden by the second stylesheet. In Code view, the generated code looks like this:
<link href="oldbrowsers.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<!--
@import url("newbrowsers.css");
-->
</style>
Any CSS that you want to be different for newer browsers must be included in the imported stylesheet. The browser will use the values in the linked stylesheet if no values are found in the imported one for that element.
JavaScript Techniques
It is possible to use JavaScript to detect what browser is being used, and then write an appropriate stylesheet for that browser. This method relies on the user having JavaScript turned on, but it can be very useful if you find that a bug in a particular browser causes a crash or other problem and you need to isolate that browser by attaching a stylesheet designed to be friendly to it.
You can also use JavaScript to detect whether the user is visiting with a newer, more standards-compliant browser or a version of the browser earlier than 5, and display stylesheets accordingly. This method checks to see whether the browser supports the W3C DOM and then writes the appropriate stylesheet into the page:
<script language="javascript" type="text/javascript">
if (!document.getElementById) {
document.write('<link rel="stylesheet" href="oldbrowsers.css" type="text/css" />');
}
else
{
document.write('<link rel="stylesheet" href="newbrowsers.css" type="text/css" />');
}
</script>
The first stylesheet in the code just shown should be the stylesheet for those older browsers that do not support the W3C DOM; the second stylesheet is for all newer browsers.
 This chapter is from ASP.NET Web Development with Macromedia Dreamweaver MX 2004, by Costas Hadjisotiriou (Apress, 2004, ISBN: 1590593480). Check it out at your favorite bookstore today.
Buy this book now. |
Next: Media Descriptors >>
More Web Standards Articles
More By Apress Publishing
/ 4 
