Debugger script
Dhtml css
|
|
When using styles, you need to be conscious of both backward and forward compatibility. Earlier browsers provide less support for CSS than current browsers, whereas later browsers may provide more support for CSS.
Current browsers use a technique called DocType switching to help provide for both backward and forward compatibility. Browsers that use DocType switching use a document's DocType declaration to determine whether to switch into quirks mode (or bugwards-compatibility mode) or standards mode. If in quirks mode, the browser reduplicates the quirks, bugs, and non-standard features of earlier browser versions; if in standards mode, the browser displays the page according to the latest HTML standards, even if that might cause earlier browsers to display the page in ways the author did not intend.
To cause a browser to switch into quirks mode, simply do not include a DocType declaration. You can also include a foreshortened DocType declaration for the transitional definition of HTML 4:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
To cause a browser to switch into standards mode, just include a full DocType declaration for the transitional definition of HTML 4:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
Any DocType declaration, full or foreshortened, for the strict definition of HTML 4 will also cause supporting browsers to switch into standards mode.
Some earlier browsers that do not recognize the STYLE element will display style sheet content as raw text within the browser viewport. Some search engines will also list the contents of a page's style sheet, rather than text, in its introductory paragraph, when listing a page that contains a CSS style sheet. The way to prevent this from happening is to bracket the content of the STYLE element inside of HTML comments:
<style type="text/css">
<!--
body { color: navy; background: #ffffcc url(b_whitesand.gif);
margin: 0em 1em; }
[...]
ul { list-style-image: url('ball_gold.gif'); margin-left:
15px; padding-left: 15px; }
-->
</style>
This means, however, that you cannot use HTML comments to comment out lines or blocks of codes in your style sheet. To do that, CSS uses comment codes, taken from the C programming language, which start with /* and end with */. Here is an example of including CSS comments in a style sheet:
/* Before IE 5.5 centered box fix: */
/* div.centerbox { width: 300px; margin-right: auto; margin-
left: auto; border: 6px blue double; color: navy; back-
ground: #ccffcc; font-size: 14px; text-align: center;
padding-top: 10px; } */
/* Start of IE 5.5 centered box fix: */
div.centerbox { width: 300px; margin-right: auto; margin-
left: auto; color: navy; background: #ccffcc; font-size:
14px; text-align: center; }
div.centerboxout { text-align: center; }
div.centerboxin { border: 6px blue double; padding-top: 10px;
}
/* End of IE 5.5 centered box fix */
FIND IT ONLINE
There are a number of methods and techniques you can use to shield users of earlier browsers from being negatively affected by styles set in your pages and alert them that they should upgrade their browsers. Two of the easiest to implement are the Invisible Object method and the DOM Sniff method, which were originally introduced by the Web Standards Project (www.webstandards.org/).
If your page is still readable and accessible, but simply does not display as you want in earlier browsers, you can use this method to alert users that your page will look much better in a browser that supports Web standards. In the alert message, you can include a link to an upgrade page listing addresses visitors can access to upgrade their browsers. Save tutor7.html as tutor7_invisible.html, so you will have a separate example of this, and then add the following to your document:
.hide { display: none; }
</style>
</head>
<body>
<iframe class="hide">
<p><big><big><big>Attention:</big> This site will look much
better in a browser that supports Web standards, but should
still be accessible to any browser or Internet device. For
links to where you can upgrade your browser, please visit my
<a href="upgrade.html">browser upgrade</a>
page.</big></big></p>
<hr>
</iframe>
If you're using a current browser, this message will not be displayed. That is because the display: none style property turns off display of the IFRAME element. Earlier browsers, however, that do not recognize the display property (Internet Explorer 3, for example) or do not recognize the IFRAME element (Netscape 4, for instance) will display the alert message. Figure 8.19 shows the Netscape 4 browser displaying the alert message.
An example browser upgrade page, upgrade.html, is included with the example files in your MyHTML folder. Just open it in your browser or text editor to view or edit it.
If your use of styles does render your page unreadable or difficult to access in earlier browsers, you can use this method to automatically redirect users of browsers that are less than standards-compliant to an upgrade page, on which are displayed upgrade links for their browser. Visitors, however, must have JavaScript enabled in their browsers to use this method. For that reason, it is a good idea to combine this method with the Invisible Object method, so that older browsers without JavaScript enabled will still display the alert message. So you will have a reference page showing how to utilize this method, save your page as tutor7_domsniff.html in your MyHTML folder. To utilize this method, just insert the following JavaScript script in the page's HEAD element:
<title>The Good Egg Company: Egg Facts and Figures</title> <script type="text/javascript" language="javascript"> <!-- //
if (!document.getElementById) {
window.location = "upgrade.html"
}
// -->
</script>
The script works by checking to see if the user's browser supports the W3C's DOM standard, and then redirects them to an upgrade page if it does not. Browsers that do not support the W3C's DOM standard include Internet Explorer 3/4 and Netscape 4. This example uses the same example page, upgrade.html, that was used with the DOM Sniff method.
FIND IT ONLINE
In most cases, either the Invisible Object method or the DOM Sniff method should be sufficient for dealing with visitors using older browsers that do not support current Web standards. The main argument in favor of their use is their simplicity and universality. They don't require that you jump through innumerable hoops to make sure that a relatively small number of visitors can still view and access your site. There are quite a few other methods and techniques that can be used to shield users of earlier browsers from accessing specific styles or style sheets. For an excellent rundown on all of them, see Eric Meyer's "Tricking Browsers and Hiding Styles" page at www.ericmeyeroncss.com/bonus/trick-hide.html.
|
|
Debugger script
Dhtml css