@import rule...

[TheJoshMan]

Ok, so I've just recently come across the @import rule in CSS, and I'm having a hard time finding any information about how to implement it... Does anyone have any idea how to do this? I looked on w3c.org but the only info they give doesn't really tell how to let users pick the style. It simply tells what to put in the external SS... I'm looking for info on how to implement it into the site so the user can pick and choose things like link colors and such. Unless my understanding of this rule is wrong, then that's exactly what it's designed for correct?

[codeexploiter]

@import is another way of using external stylesheets like <LINK>

<STYLE TYPE="text/css">

  @import url("yourcssfile.css");

</STYLE>

You can safely drop the url( ) notation. The following example therefore has the same effect as the previous one:

<STYLE TYPE="text/css">

  @import "yourcssfile.css";

</STYLE>

When you are importing CSS using @import you need to specify <style></style> and the @import statement must be the first line.

The most common use of @import is to hide incorrectly implemented CSS from IE4/NS4/O5 as they don't support @import so you can take advantage of that to present one type of CSS for them and different CSS for other browsers.

Check this article to get more idea about hiding the CSS from some browsers

[mwinter]

Ok, so I've just recently come across the @import rule in CSS, and I'm having a hard time finding any information about how to implement it ... I looked on w3c.org but the only info they give doesn't really tell how to let users pick the style.

Users? Which users would those be? The import at-rule isn't meant to allow an end-user to select a style sheets, it's meant to be used to import rules from one style sheet so that the importing style sheet can build on them. That is, the imported style sheet contains some rules that the importing style sheet would like to use. Rather than copy the rules into the style sheet, it simply references them via the import at-rule.

I'm looking for info on how to implement it into the site so the user can pick and choose things like link colors and such. Unless my understanding of this rule is wrong, then that's exactly what it's designed for correct?

No. What you're looking for is alternate style sheets, which are controlled via link elements. I've described this a couple of times, and have posted both server-side (PHP) and client-side code that can be used to switch between style sheets for lesser browsers that don't give the user the option. See the three threads, style switching not work on IE, but works on everything else, looking for a minimal js styleswitcher script with cookies, and Dynamically changing ref to linked css file.

@import is another way of using external stylesheets like <LINK>

Except at the style sheet level, not the markup level.

When you are importing CSS using @import you need to specify <style></style>

Not at all.

and the @import statement must be the first line.

Import at-rules must occur early, but not necessarily the first line: a charset at-rule can proceed them, as well as any number of comments. The important thing is that import at-rules must occur before rules, and media and page at-rules.

Mike

[codeexploiter]

Quote:
When you are importing CSS using @import you need to specify <style></style>
Not at all.

Can you please tell me how to use the @import without the <style></style>?

Quote:
and the @import statement must be the first line.
Import at-rules must occur early, but not necessarily the first line: a charset at-rule can proceed them, as well as any number of comments. The important thing is that import at-rules must occur before rules, and media and page at-rules.

By the above statement i meant the following, i am sorry if it was ambiguous.

"Any @import rules must precede all other rules (except the @charset rule, if present)."

I think nobody consider the comments as actual style rules.

[djr33]

I believe the issue of the style tags is that you must have ANY CSS within style tags in html markup, but you don't need specific tags around the @import. For example, you don't need style tags when it isn't in html, such as the case with any standalone .css stylesheet


I think the point of all this.... @import is to be used within other css, whereas <link....> is meant to be used to import css for html in general.


One example of a situation that would be helped with this:
You have several layouts for a page, or several pages with similar layouts.
Let's assume that a good portion of the code remains the same, but only a few elements change, such as, perhaps, colors.

What you could do is specify within each page (or through a style switcher) which color .css you want to use <link...> to set that .css file, as usual.
However, in each of those specific color .css files, you can include the @import rule. That would allow you to include a third .css sheet containing all of the common traits of the layouts, without including in each of the variations based on color.

[codeexploiter]

understood it completely and thanks for the explanation

[djr33]

Now, I'm not sure why it's "wrong" to use the rule just to replace the link markup, but I don't see why you should either. Generally, sticking to standards makes the most sense, "Just 'cause".
And sure. Glad to help.

[mwinter]

Now, I'm not sure why it's "wrong" to use the rule just to replace the link markup, but I don't see why you should either.

I didn't write that it was "wrong", but it's not the purpose. Using import at-rules in style elements is more-or-less a parsing hack.

Mike