SitePoint Sponsor

User Tag List

Results 1 to 21 of 21
  1. #1
    SitePoint Evangelist dhtmlhelp's Avatar
    Join Date
    May 2003
    Posts
    575
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Advantages of @import over link

    Hi,

    can anyone explain what are the advantages of including a style sheet as @import rather than a <link href...>?

    DH

  2. #2
    Ceci n'est pas Zoef Zoef's Avatar
    Join Date
    Nov 2002
    Location
    Malta
    Posts
    1,111
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    with @import you can 'import' a stylesheet in a stylesheet. Or in other words, <link...> is html code, @import is CSS code.

    One very interesting fact is that NN4.X doesn't understand @import so you can use it to hide styles from these browsers.

    Rik
    English tea - Italian coffee - Maltese wine - Belgian beer - French Cognac

  3. #3
    I am obstructing justice. bronze trophy fatnewt's Avatar
    Join Date
    Jul 2002
    Location
    Ottawa, Canada
    Posts
    1,766
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Netscape 4 also doesn't understand the media attribute of the link element, and it will ignore stylesheets that are called using that attribute.

    Code:
    <link href="stylesheet.css" type="text/css" media="all" .. />


    By combining @import (or the media attribute) with a stylesheet that Netscape 4 understands, you can provide your NN4 users a backup, simplified stylesheet, while still taking advantage of the latest web standards.


    Code:
    <link href="/basic.css" type="text/css" rel="stylesheet" />
     
    <style type="text/css" media="all">
    		@import "/advanced.css";
    </style>

    In this code, newer browsers will read in the advanced stylesheet, while old ones, like Netscape Navigator 4, will ignore it and load only the baisc information.


    Otherwise, you can just use @import without a backup for old browsers and NN4 will load the markup without any styles (unless they are defined using the style attribute)
    Colin Temple [twitter: @cailean]
    Web Analyst at Napkyn


  4. #4
    gingham dress, army boots... silver trophy redux's Avatar
    Join Date
    Apr 2002
    Location
    Salford / Manchester / UK
    Posts
    4,838
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    even slicker way (imho anyway) than fatnewt's: 3 stylesheets. the first is the basic one, the second one only containing the import statement, and the third one containing the advanced styles...this way you don't have to have
    Code:
    <link href="/basic.css" type="text/css" rel="stylesheet" />
    <style type="text/css" media="all">
      @import "/advanced.css";
    </style>
    and simply replace it with
    Code:
    <link href="/basic.css" type="text/css" rel="stylesheet" />
    <link href="/advanced.css" type="text/css" rel="stylesheet" />
    where advanced.css would then look something like
    Code:
    @import url(/advanced_proper.css)
    ...if that makes sense at all
    re·dux (adj.): brought back; returned. used postpositively
    [latin : re-, re- + dux, leader; see duke.]
    WaSP Accessibility Task Force Member
    splintered.co.uk | photographia.co.uk | redux.deviantart.com

  5. #5
    "Of" != "Have" bronze trophy Jeff Lange's Avatar
    Join Date
    Jan 2003
    Location
    Calgary, Canada
    Posts
    2,063
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    or...

    Code:
    <link href="/basic.css" type="text/css" rel="stylesheet" />
    <link href="/advances.css" type="text/css" rel="stylesheet" media="all" />
    should that not work? considering NN4 will ignore the second one? or will that cause CSS errors?
    Who walks the stairs without a care
    It shoots so high in the sky.
    Bounce up and down just like a clown.
    Everyone knows its Slinky.

  6. #6
    SitePoint Evangelist dhtmlhelp's Avatar
    Join Date
    May 2003
    Posts
    575
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi People,

    thanks, I was aware of the above but I am still unclear as to the real advantages of @import. All I know so far is that it does not work in NS4 and that it has a limit of 3 imported files in IE. I haven't found a single advantage except maybe camouflaging the css file.

    My question is, what is the true advantage of the @import over the <link href ...>. As far as I know I can have as many <link href> as I want, while that is not the case with @import. Is @import simply the new way of linking to a stylesheet because <link href ...> was originally meant for other things (ie separate navigation toolbar in supporting browsers)?

    DH

    Edit: Redux, I think your method is the best one of all because it avoids bugs in Netscape 7, Mac/IE5 and Safari/Konqueror, ie always use a separate stylesheet to import another style sheet with @import

  7. #7
    Ceci n'est pas Zoef Zoef's Avatar
    Join Date
    Nov 2002
    Location
    Malta
    Posts
    1,111
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'm not sure what else you are expecting?

    <link.. > is an html element and is used, in the head section of your html, to link from within a html document to (amongst others) an external CSS document.

    @import is a CSS directive which is used from within a stylesheet (be it a seperate stylesheet, or a stylesheet thats contained within <style> tags in the head of a html document) to import another stylesheet.

    So, the difference (or advantage if you want) is just that: @import is used from within a stylesheet.

    What more can you want from life?

    Rik
    English tea - Italian coffee - Maltese wine - Belgian beer - French Cognac

  8. #8
    I am obstructing justice. bronze trophy fatnewt's Avatar
    Join Date
    Jul 2002
    Location
    Ottawa, Canada
    Posts
    1,766
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    redux, I never thought of doing that... sounds better.

    There's no obvious advantage to using @import. It's just the CSS way of doing it, while <link> is an (X)HTML element. So the only real "advantage" I guess is as, Zoef points out, @import can be used in a stylesheet (or within your markup file using the <style> element. )

    If you're just going to be dealing within your markup file, the only obvious difference is that older browsers will ignore @import completely. That can be used to your advantage if you have accessibility concerns.
    Colin Temple [twitter: @cailean]
    Web Analyst at Napkyn


  9. #9
    SitePoint Evangelist dhtmlhelp's Avatar
    Join Date
    May 2003
    Posts
    575
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi guys,

    ok thanks, Zoef, I am a happy man, I would have been happier if there was more to it. I can see the relative advantages of nesting @import within css files BUT @import should not be used in a css file with other style properties as that is renown to generate bugs. What is the whole point ?!?! Hope those at W3 have more in mind, alternatively hit me on the head, maybe then I'll get it.

    DH

  10. #10
    gingham dress, army boots... silver trophy redux's Avatar
    Join Date
    Apr 2002
    Location
    Salford / Manchester / UK
    Posts
    4,838
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by dhtmlhelp
    BUT @import should not be used in a css file with other style properties as that is renown to generate bugs.
    not sure about what bugs you're referring to, but...let me just mention that @import needs to be at the beginning of a css file, before any other style definitions...otherwise it won't work (as expected). this is flagged up if you run css through the validator http://jigsaw.w3.org/css-validator/
    re·dux (adj.): brought back; returned. used postpositively
    [latin : re-, re- + dux, leader; see duke.]
    WaSP Accessibility Task Force Member
    splintered.co.uk | photographia.co.uk | redux.deviantart.com

  11. #11
    I am obstructing justice. bronze trophy fatnewt's Avatar
    Join Date
    Jul 2002
    Location
    Ottawa, Canada
    Posts
    1,766
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    using @import in style sheets might have benefit when using a server-side language (like PHP) to dynamically generate the sheet.

    Or something.. I've never done this before but I hear that some people have been playing with this....
    Colin Temple [twitter: @cailean]
    Web Analyst at Napkyn


  12. #12
    SitePoint Evangelist dhtmlhelp's Avatar
    Join Date
    May 2003
    Posts
    575
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    cool, thanks fatnewt! Can anyone submit some good links to some tutorials for generating css server side?

    Redux, as far as I know stylesheets which contain a mixture of @import and other style declarations are vulnerable to bugs in Netscape 7, Mac/IE5 and Safari/Konqueror

  13. #13
    I am obstructing justice. bronze trophy fatnewt's Avatar
    Join Date
    Jul 2002
    Location
    Ottawa, Canada
    Posts
    1,766
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I found this one:
    http://www.phpbuilder.com/columns/po...22.php3?page=1

    Remember you have to configure your server to parse .css files as PHP. There was a thread about this on SitePoint too, but I can't seem to find it.

    This site has a browser detection script (2, actually - one in PHP, one in JavaScript) that will choose a Style Sheet based on the user's browser/version.
    http://www.digiways.com/articles/php/dyncss/

    While we're at it, here's something on switching stylesheets via JavaScript.
    http://www.alistapart.com/stories/alternate/
    Colin Temple [twitter: @cailean]
    Web Analyst at Napkyn


  14. #14
    if($awake){code();} PHP John's Avatar
    Join Date
    Jul 2002
    Location
    Along the Wasatch Fault line.
    Posts
    1,771
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You can also store your CSS files as .php files, if you are using php for creating dynamic CSS pages.

    <link rel="stylesheet" type="text/css" href="style.php" />

    This format has worked fine for me.

    Does anyone know of any problems I could encounter with this?
    John

  15. #15
    ☆★☆★ 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 PHP John

    Does anyone know of any problems I could encounter with this?
    Make sure this is at the top of your CSS-generating PHP files:
    PHP Code:
    header('Content-type: text/css'); 

  16. #16
    if($awake){code();} PHP John's Avatar
    Join Date
    Jul 2002
    Location
    Along the Wasatch Fault line.
    Posts
    1,771
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you. Added.
    John

  17. #17
    Ceci n'est pas Zoef Zoef's Avatar
    Join Date
    Nov 2002
    Location
    Malta
    Posts
    1,111
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by dhtmlhelp
    alternatively hit me on the head, maybe then I'll get it.



    Did it help?

    Rik
    English tea - Italian coffee - Maltese wine - Belgian beer - French Cognac

  18. #18
    SitePoint Evangelist dhtmlhelp's Avatar
    Join Date
    May 2003
    Posts
    575
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Zoef,

    yes!, more or less. I'll be looking into this dynamic generation, it sounds very interesting but I don't see much application for it at the moment. Hard headed hey?

    DH

  19. #19
    ☆★☆★ 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 dhtmlhelp
    Thanks Zoef,

    yes!, more or less. I'll be looking into this dynamic generation, it sounds very interesting but I don't see much application for it at the moment. Hard headed hey?

    DH
    How about random background images, or personalizing content? Example: an Aqua style for Mac users, an XP style for Windows users, etc.

  20. #20
    Ceci n'est pas Zoef Zoef's Avatar
    Join Date
    Nov 2002
    Location
    Malta
    Posts
    1,111
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by vgarcia
    Example: an Aqua style for Mac users, an XP style for Windows users, etc.
    A hairy style for monkeys.

    A thin style for models.

    A hidden style for Saddam.

    Rik
    English tea - Italian coffee - Maltese wine - Belgian beer - French Cognac

  21. #21
    SitePoint Evangelist dhtmlhelp's Avatar
    Join Date
    May 2003
    Posts
    575
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Personalising content is the only real useful application, I agree. Can you thing though how it would look like if a site requested favourite colours etc, or guessed favourite layout and colour on the basis of purchases and pages seen. I am sure it sounds really clever but in actual fact real web AI is quite a way away, even for the most resrouceful sites. I'll be ready by then though!

    thanks,

    DH


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
  •