THE CONTEXT OF THE BOOK S EXAMPLES | Bulletproof Web Design(c) Improving flexibility and protecting against worst-case scenarios with XHTML and CSS

THE CONTEXT OF THE BOOK'S EXAMPLES

All of the examples assume a basic page structure that surrounds them. In other words, what is shown in each chapter in terms of XHTML and CSS code happens within an assumed, existing HTML document in between the <body> and </body>.

For instance, the basic framework for the book's examples could be set up like this:

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> <head>   <title>Page Title</title>   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />   <style type="text/css">     ... example CSS goes here ...   </style> </head> <body>   ... example markup goes here ... </body> </html>

note

I'm using the XHTML 1.0 Transitional DOCTYPE here, but you could choose any XHTML DOCTYPE flavor you'd like. Wondering what the heck a DOCTYPE is? Not to worry, I'll talk more about them in the "How to validate" section of Chapter 6.

While the CSS is placed in the <head> of the page for convenience, it should eventually be hidden from old, tired browsers (Netscape Navigator 4.x, for example). This hiding is quite common, enabling designers to use advanced CSS for layout (as we do throughout the book), while offering older browsers that can't handle it a fully readable, CSS-free view of the document.

Hiding CSS from older browsers is commonly done by using the @import method for referencing external style sheets. For example, if we placed all of our styles into a file named screen.css, we could use the @import method to reference that external style sheet by its URL. Because older browsers (like Netscape 4.x) don't understand @import, the styles contained within screen.css will be hidden to them.

 <head>   <title>Page Title</title>   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />   <style type="text/css">     @import url("screen.css");   </style> </head>