SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    Fully Sweet Car noddy's Avatar
    Join Date
    Aug 2002
    Location
    Perth, Western Australia
    Posts
    759
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    How does this work

    I have just found this peice of code in a webpage I was viewing. Can someone please explain how the @import works in this stylesheet.

    or is this surposed to be a function that didn't get processed?

    Code:
     <style type="text/css" media="all">
    @import url(styles/TopNav.css);
    </style>@import url(styles/TopNav.css);
    I haven't seen css presented like that before is someone able to explain how this bit of code is working and possible what it is actually doing?

    The site it came from was http://www.christian-web-masters.com

    Thank you

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    The @import rule allows users to import style rules from other style sheets. It is similar to the Link tag but is css and not html and allows users to import a number of style sheets.

    Code:
     
    <style type="text/css" media="all">
    @import url(styles/TopNav.css);
    </style>@import url(styles/TopNav.css);
    I think you've copied the code above incorrectly as it should be :

    Code:
     
    <style type="text/css" media="all">
    @import url(styles/TopNav.css);</style>
    If you wanted to add mores style sheets you could use:

    Code:
    <style type="text/css" media="all">
    @import "style1.css";
    @import "style2.css";
    </style>
    This method is meant as a way to add partial stylesheets to your main sheets, which combine as one. It is only supported by browsers of versions 5 and above. Netscape and Internet Explorer 4 can't read these stylesheets so you can use it to hide advanced CSS from those browsers.

    e.g.<link rel="stylesheet" type="text/css" href="basicstyle.css" media="screen" />

    <style title="Default" type="text/css" media="screen">
    @import url(advancedstyles.css);
    </style>

    Hope this helps.

    Paul
    Last edited by Paul O'B; Feb 27, 2003 at 17:05.

  3. #3
    Fully Sweet Car noddy's Avatar
    Join Date
    Aug 2002
    Location
    Perth, Western Australia
    Posts
    759
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yeah that does cool, thanks thats a big help I will use it from now on thank you

  4. #4
    SitePoint Guru quenting's Avatar
    Join Date
    Dec 2002
    Location
    Switzerland
    Posts
    735
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    you seem to say that @import is to add styles to previous ones, is there anything bad ni having multiple <link> elements ? (i've been doing like that so far, and was not aware of the first-css -> link / additional-css -> @import thing).

    Quentin

  5. #5
    Incoherent drivel since 1975 Zopester's Avatar
    Join Date
    Feb 2003
    Location
    UK
    Posts
    215
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    There's no problem with using multiple <link> elements...as far as I know, anyway. Not that I use <link> elements, (except for print/projector stylesheets).

    Just be careful there is nothing in your <link>ed stylesheets that could make NN4.x barf a big one. That's why I use multiple @import sheets. Much safer for complex CSS designs, and @import isn't supported by NN4.x, so all it gets is a completely unstyled document.
    Recommended Reading:
    Why we won't help you - An article by Mark Pilgrim.

    http://www.zopester.com - Coming Soon!

  6. #6
    SitePoint Wizard Ian Glass's Avatar
    Join Date
    Oct 2001
    Location
    Beyond yonder
    Posts
    2,384
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Zopester
    ...I use <link> elements [only] for print/projector stylesheets...
    You could also use @import for that, too:
    Code:
    @import (...URI4...);
    @import (...URI1...) print;
    @import (...URI2...) handheld;
    @import (...URI3...) projector;
    @import (...URI4...) screen;
    The order is important too since latter ones override the earlier and the rules in the rest of that style sheet override the imports, notwithstanding !importants and such...

    Also, give you three guesses to figure out the only major browser that doesn't support it. ;-)

    EDIT: One drawback of @imports is that you can't switch between them for alternate styles like you can with <link>s. But...you could do that using HTTP headers to associate stylesheets (and other link types) with a page without embedding <link>s (i.e. what happens if you make more styles?). Don't know about browser support on that one, just kinda neat. :-)

    ~~Ian
    Last edited by Ian Glass; Feb 28, 2003 at 13:36.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •