|
gorilla -> Use @ import to achieve many useful things (11/3/2003 14:01:15)
|
Many people don't seem to understand how useful @ import is - so here are some tips and tricks that Mhaircaish taught us and that all of us now use all the time.
"Tricking" noncompliant browsers:
The advantage to use @import is that noncompliant browsers don't understand it.
You can take advantage of this and (almost) get a btrowser sniffer. Do like this:
1. Create the stylesheet that you want for example Netscape 4 to use and write the standard <link> tag into the HEAD section of the HTML to bring it in.
2. Create the stylesheet that you want all the more compliant browsers to use (EG Netscape 6 and up, IE5.5 and up. Opera 5.12 and up, Mozilla).
3. Bring the stylesheet you created in step 2 AFTER the first one, and use the @import method -
a. Either by @import "stylesheet2.css" or
b. @import url("stylesheet2.css") - ( DO NOT use another <link> tag.
Doing this makes that more compliant browsers will get the second set of styles, because the cascade
will "overwrite" the first, linked stylesheet. IOW as Netscape 4.x doesn't support @import, it "sees" only the first set of rules. So - you've tricked @import into working like browser sniffer that zeros in on very buggy browsers.
Explanation of how cascade works is here:
http://www.w3.org/TR/REC-CSS1
For Different sections of a site:
Say you want a "section specific" look for your site - very useful if you sell different types of things or as I use use it lecture on different courses.
You use @ import to create a different look for different sections like this:
Consider the following:
Imagine you have a menu that's contained in a div like this:
<div id="menu">
Menu stuff here...
</div>
In your default stylesheet you have styled it as follows:
#menu {
background-color: #000000;
color: #FFFFFF;
}
Imagine further that you have a section where you want to override that rule you can do it like this:
<link rel="stylesheet" type="text/css"
href="normalstyles.css" />
<style type="text/css">
@import url(type2.css);
</style>
In type2.css you would, override the normal rule like this:
#menu {
background-color: #FFFFFF;
color: #000000;
}
Why does this work? - To put it in laymans terms it works because the imported sheet is closer to the element you are styling. Therefore it is more important.
Some further points about usage and validity:
Strictly speaking @import must be used within a stylesheet- whether embedded, linked or @imported.
However if you are not so worried about being 100% valid you can declare it in the head section in the normal way rather than from within a stylesheet the advantage to this is that is easier to maintain and you can see at a glance where styles are coming from. IOW they aren't buried somewhere down in a lenghty chain of documents.
If you are worried about being 100% strcitly compliant you can use this method to develop test and debug and then embed in a stylesheet.
|
|
|
|
