1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

CSS - @import or <link>?

Discussion in 'Off Topic' started by James, Aug 30, 2010.

  1. James

    James Well-Known Member

    I'm still debating with myself about this one. I'm not sure whether @import or <link> works best, or both the same.

    I heard a rumour that @import works better for caching, but I'm not sure.

    Which method do you use?
     
  2. Brandon_R

    Brandon_R Guest

    I think link is the better choice because it's clean and nice and the order doesn't matter. The import rules must come before all the others.
     
  3. Forsaken

    Forsaken Well-Known Member

  4. Shadab

    Shadab Well-Known Member

    Brandon, the order in which you specify the stylesheets does matter!

    The rules specified in stylesheets linked later in the webpage take precedence over the rules in stylesheets linked earlier (unless you break this precedence by using !important). That's the whole point of 'C' in css: Cascade :)
     
  5. Brandon_R

    Brandon_R Guest

    I guess either the article was wrong, or i misinterpreted it :D Im going to go with me misinterpreting it.

    Since import rules must precede all other rules [order matters] and this is a comparison of the two, i assumed the LINK must be the opposite [order doesn't matter]
     
  6. Shadab

    Shadab Well-Known Member

    The article is explaining that the @import rules must be specified right at the top of a <style> block or an external stylesheet. So while something like this would work:
    Code:
    @import url('style.css');
    .foo { font-size: 48px; }
    This won't:
    Code:
    .foo { font-size: 48px; }
    @import url('style.css');
    The browsers (Firefox & IE, in my case) silently ignore the @import rule when it's not at the beginning of a block. It's important to note that the rules in the imported and linked stylesheets still cascade as usual, though.
     
  7. Floris

    Floris Guest

    It's very simple, use link. Put your css in a .css file.
     
  8. Mike

    Mike XenForo Developer Staff Member

  9. Anthony Parsons

    Anthony Parsons Well-Known Member

  10. dutchbb

    dutchbb Well-Known Member

    My understanding is that @import is mainly used for importing one style sheet into another. You can use it to hide CSS from browsers that don't support @import.
     
  11. Forsaken

    Forsaken Well-Known Member

    All modern browsers support @import.
     
  12. dutchbb

    dutchbb Well-Known Member

    Yes, I'm saying that you can use it on the old ones to make them ignore CSS they can not render properly.
     
  13. Forsaken

    Forsaken Well-Known Member

    There is maybe a .05% marketshare for those users.
     
  14. dutchbb

    dutchbb Well-Known Member

    Well you're right about it being not very relevant anymore, I should have made that more clear.
     
  15. Floris

    Floris Guest

    Still should use <link> :)
     
  16. Brandon_R

    Brandon_R Guest

    Source?
     
  17. Forsaken

    Forsaken Well-Known Member

    You do realize the browsers that didn't support @import are about 13 (Nearly 14) years old.

    The only reason IE6 is still widely used is due to corporate use, due to needing to support legacy programs.

    Netscape is long gone, IE5.5 was created for previous OS's (Before XP).
     
  18. Brandon_R

    Brandon_R Guest

    That isn't a source but ok.
     
  19. Lee

    Lee Well-Known Member

    Why did he need a source for something that is practically common knowledge? :p
     
    Forsaken likes this.
  20. Forsaken

    Forsaken Well-Known Member

    Because I call him out on his random statements that he has yet to backup once.
     

Share This Page