SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    SitePoint Wizard silver trophy
    beley's Avatar
    Join Date
    May 2001
    Location
    LaGrange, Georgia
    Posts
    6,117
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)

    @import or link external stylesheet?

    I've been searching but haven't found anything tremendously useful about the difference between @import and link.

    I read that @import does not cache the stylesheet, so it is loaded again for each page that is viewed. Is this true?

    Also, is link XHTML compliant? Would it be okay to link all but some navigational elements and @import those (to keep them out of NS 4 and IE 4)?

    What are your thoughts?

  2. #2
    SitePoint Addict
    Join Date
    Jan 2004
    Location
    Colorado Springs
    Posts
    308
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I've noticed that @import is more compatible than link

    As per the DWMX compability report

  3. #3
    SitePoint Columnist
    Join Date
    Nov 2003
    Location
    Ohio
    Posts
    411
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I have always used it to override a default css for an entire site with special rules - like printer friendly pages. I.e. - you can have your standard style inline or linked and do an @import on a page or set of pages to add specific rules for those specified pages.
    Freelance System Administrator, Researcher, Writer
    Practical Applications
    Open Sourcery "SitePoint's Open Source Blog"

  4. #4
    SitePoint Wizard silver trophy
    beley's Avatar
    Join Date
    May 2001
    Location
    LaGrange, Georgia
    Posts
    6,117
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    What about the fact that it doesn't store in cache? Is this true?

  5. #5
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,235
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by beley
    What about the fact that it doesn't store in cache? Is this true?
    @imported stylesheets get cached just like <link />ed stylesheets do. The only difference is what you wrote in your page.

    The phenomenon I think you're referring to is the Flash of Unstyled Content that can happen in IE and Opera. There are ways around it though (read the article I linked to).

    Oh, and yes, <link /> is XHTML-compliant, just remember to add the trailing slash.

    Quote Originally Posted by nekeno12
    I've noticed that @import is more compatible than link
    Not true. Netscape 4 doesn't understand @import, and IE4 has trouble with it depending on how you @import your sheet. Even IE6 has trouble with @import if you include a media type after it like so:
    Code:
    @import "mystyles.css" screen;

  6. #6
    \m/\m/ karinne's Avatar
    Join Date
    Dec 2002
    Location
    Aylmer, QC, Canada
    Posts
    409
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    so... you're better to stick with <link ... />?

  7. #7
    SitePoint Wizard silver trophy
    beley's Avatar
    Join Date
    May 2001
    Location
    LaGrange, Georgia
    Posts
    6,117
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    Great article... Since it's cached I have no problem with it. It's easy enough to remedy the flash of unstyled content by just adding a linked print stylesheet, which I was planning to do anyway.

    Thanks!

  8. #8
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,235
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by karinne
    so... you're better to stick with <link ... />?
    Well, depends on what you want to do.

  9. #9
    SitePoint Wizard rbutler's Avatar
    Join Date
    Jul 2003
    Location
    Springfield, MO
    Posts
    1,867
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    True. If you want to hide certain styles from version 4 browsers, you use the @import syntax like so:

    Code:
    <style type="text/css">
    <!--
    @import "foo.css";
    -->
    </style>
    Some people are still using the url before the css stylesheet but some machines that shipped with Win98 and IE lower versions still see the URL and therefore see the other stylesheet. For maximum compatiblity, use the above.

    Or you could always just use one style sheet and watch out for inheritance and cascading issues but that becomes inheriently difficult for newbies or even advanced css coders. Paul doesn't like them, but I think different stylesheets provide a cleaner solution than hacking one stylesheet to death. These of course, are my opinions, except for the first code snippet, that is the truth.
    Ryan Butler

    Midwest Web Design

  10. #10
    \m/\m/ karinne's Avatar
    Join Date
    Dec 2002
    Location
    Aylmer, QC, Canada
    Posts
    409
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    oky doky... thanks for that ryan


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
  •