Browsers and CSS
| For CSS to work as described in this book, you must use a CSS-enhanced browser, that is, a browser that supports CSS. A CSS-enhanced browser recognizes the STYLE element as a container for a style sheet and presents the document accordingly. Most browsers in use today support CSS, including Microsoft's Internet Explorer (IE), Firefox (FF), Opera (O), Safari (S), and Konqueror (K). CSS is also supported by most Web authoring tools, and the Prince (P) formatter prints CSS beautifully. The symbols in parenthesis identify the browser in the capability charts you will see later in this book. It wasn't always this way. CSS was first published in 1996, so browsers created before then have a valid excuse for not supporting style sheets. Also, the first generation of browsers that supported CSS (Internet Explorer 3 and Netscape Navigator 4) were filled with bugs. (A few people still use these browsers.) Also, some browsers on special devices do not support style sheets. For example, on a mobile phone where the connection speed is limited, a Web browser may ignore style sheets to speed up the Web. For these reasons, it is important that HTML pages can be displayed even if the style sheet is not taken into account. CSS was designed with this in mind, and all content remains visible even if the style sheet is ignored. This is because of the fundamental principles of style sheets: the separation of content and presentation. By only describing the presentation of documents, all the content of the documents are available even if the style sheets are ignored. If you expect that your pages will be viewed in older browsers, you may want to use a special trick to hide the style sheet. Because older browsers do not know about style sheets, they display the content of the STYLE element. Thus, the user ends up with the style sheet printed on the top of the canvas. At the time of writing, less than one percent of Web users experience this problem. To avoid this, you can put your style sheet inside an HTML comment, which we discussed in Chapter 1. Because comments don't display onscreen, by placing your style sheet inside an HTML comment, you prevent the oldest browsers from displaying the STYLE element's content. CSS-enhanced browsers are aware of this trick and treat the content of the STYLE element as a style sheet. Recall that HTML comments start with <!-- and end with -->. Here's an excerpt from the previous code that shows how you write a style sheet in an HTML comment. The comment encloses only the STYLE element content: <HTML> <TITLE>Bach's home page</TITLE> <STYLE> <!-- H1 { font-style: italic } --> </STYLE> <BODY> .. </BODY> </HTML>
The browser also needs to be told that you are working with CSS style sheets. CSS is currently the only style sheet language in use with HTML documents, and we don't expect this to change. But, just as there is more than one image format (GIF, JPEG, and PNG come to mind), there could be more than one style sheet language. So, it's a good habit to tell browsers that they are dealing with CSS. (In fact, HTML requires you to.) This is done with the TYPE attribute of the STYLE element. The value of TYPE indicates what type of style sheet is being used. For CSS, that value is text/css. The following excerpt from our previous sample document shows you how to write this (in combination with the use of the HTML comment): <html> <title>Bach's home page</title> <style type="text/css"> <!-- h1 { font-style: italic } --> </style> <body> .. </body> </html> When the browser loads a document, it checks to see if it understands the style sheet language. If it does, it tries to read the sheet; otherwise, it ignores it. The TYPE attribute on the STYLE element is a way to let the browser know which style sheet language is being used (see Chapter 1 for a discussion on HTML attributes). The TYPE attribute must be included. To make the examples easier to read, we chose not to wrap style sheets in HTML comments, but we do use the TYPE attribute throughout this book. |
EAN: 2147483647
Pages: 215