Importing Style SheetsImported style sheets are a lot like linked style sheets, in that you create a separate file for the styles you want to import. Then you can either import those sheets into a primary style sheet that is then linked to the document, or import directly into the document. Importing Directly into a DocumentImporting into a document actually involves two types of style sheets: the separate style sheet that's to be imported (I'll call that import.css) and an embedded style sheet in the document. This is because importing isn't done with an element such as link; instead, the CSS directive @import is used (see Example 7-4). Example 7-4. Importing style with an embedded sheet
<head>
<head>
<title>working with style</title>
<style type="text/css">
@import url(import.css);
</style>
</head>
The style sheet @import.css will be imported directly into the document. Imagine the style element being filled with all the style rules within the import.css filethat's exactly what happens. So now the style is actually embedded in this file. You can use this technique for as many documents as you want, but typically this technique is used primarily in workarounds. A number of browsers, particularly Netscape 4 versions, do not support the @import directive, yet they do support the link element. Because Netscape 4.x has limited support for CSS and you have to take care to send styles to it, separating out those styles that you don't want it to misinterpret and those styles you know it can support into linked and imported allows Netscape users to see some, but not all, styles. This is very effective as a workaround when you must support Netscape 4 versions. Another workaround using the @import directive is to simply place all styles into the imported sheet. Then any browser that doesn't support the @import simply won't read the styles, and a plain, unstyled document gets sent to the browser instead. QUANTUM LEAP: FLASH OF UNSTYLED CONTENT (FOUC) If you are using the @import technique and have no link or script element in the head of your document, Internet Explorer will often display the unstyled content first and then redraw the page with the style. It's an annoying bug but is easily avoided by adding a link or script element to the head of the document. For more about FOUC, see http://www.bluerobot.com/web/css/fouc.asp. Most of the time, you won't be using the @import in an embedded sheet unless you have a very specific reason to do so. Importing Style into a Linked Style SheetAnother use for the @import directive, and the real reason @import exists, is to be able to modularize your styles and then import them into the primary style sheet. Consider Figure 7-5. Figure 7-5. Importing styles into a main sheet.
Imagine that each module file (mod1.css, mod2.css, and mod3.css) contains styles specific to a feature or function within your site. As an example, you might have styles set to manage ads, styles specific to tables, and styles specific to forms. You could place these in separate module files and then import them into the styles.css file, which is then linked to index.html. The rationale behind this approach is that you could make modifications to the modules independently or cut them out easily when they are no longer needed. This technique is most effective when you have very large sites with lots of styles to manage. QUANTUM LEAP: HACKING CSS Although CSS is now in widespread use, hacks sometimes must be employed to achieve cross-browser consistency. You can use the modular import method described for your hacks. This way, as soon as you no longer need the hack, you can simply delete the imported file and the @import directive, removing the hack completely and getting your CSS as clean as possible. For more about hacking CSS, see my InformIT article "Strategies for Long-Term CSS Hack Management," at http://www.informit.com/articles/article.asp?p=170511. |
