SitePoint Sponsor

User Tag List

Results 1 to 13 of 13

Thread: link vs import

  1. #1
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,812
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)

    link vs import

    I was just wondering...
    All things being the same ( that is assuming you are targeting the same media, and not trying to hide stuff from v4 browsers?!?) what is the benefit of using a link reference to a style sheet vs using an @import?

  2. #2
    SitePoint Enthusiast Aken's Avatar
    Join Date
    Oct 2007
    Location
    Racine, Wisconsin, USA
    Posts
    99
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    There is no benefit to using either. The major difference is that @import is ignored in some cases by older browsers.

    @import you also have to define inside a <style> tag, so it's more to write.

    I personally think <link> works just fine, no need to change how I work.

    http://webdesign.about.com/od/beginn...mport_link.htm
    Last edited by Aken; Apr 8, 2009 at 22:03. Reason: Added link.
    Eric Roberts - Racine, WI Web Design & Development
    www.cryode.com

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

    As mentioned above there is not much difference except that import allows you to import other stylesheets from inside the actual stylesheet.

    The link element can be used to set alternate, preferred and persistent stylesheets which import cannot do and which are used in styleswitchers.

    I very rarely use import since the fouc days.

    The Sitepoint reference has a section on linking to css to a web document.

  4. #4
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,708
    Mentioned
    7 Post(s)
    Tagged
    0 Thread(s)
    No real difference...though if you want to cater to netscape it doesn't recognize the import function.........use either or.
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  5. #5
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,861
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    Netscape 6+ does recognise import, it is only the really old versions of Netscape that no one uses any more that don't.

    Somewhere in one of the standards it says that there is only supposed to be one active <link> to CSS in a web page at a time with the others being treated as alternates (or for other media) but none of the web browsers I have seen actually treat it that way.

    Using @import would make things easier if you are offering alternate stylesheets through having several link tags and allowing people to switch between them from their View menu.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,467
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by felgall View Post
    Somewhere in one of the standards it says that there is only supposed to be one active <link> to CSS in a web page at a time with the others being treated as alternates (or for other media) but none of the web browsers I have seen actually treat it that way.
    I've never seen that written anywhere in the specs Are you sure you are not confusing it with "preferred" or "alternate" stylesheets of which there can only be one (or one group) active.

    "Persistent" stylesheets on the other hand can be many.

  7. #7
    SitePoint Enthusiast Aken's Avatar
    Join Date
    Oct 2007
    Location
    Racine, Wisconsin, USA
    Posts
    99
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    This element defines a link. Unlike A, it may only appear in the HEAD section of a document, although it may appear any number of times.
    http://www.w3.org/TR/html401/struct/...html#edef-LINK
    Eric Roberts - Racine, WI Web Design & Development
    www.cryode.com

  8. #8
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,861
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    I've never seen that written anywhere in the specs Are you sure you are not confusing it with "preferred" or "alternate" stylesheets of which there can only be one (or one group) active.

    "Persistent" stylesheets on the other hand can be many.
    I must have misread it then. I am sure you are far more familiar with the specs than I am.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  9. #9
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,812
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    so an import is to .. for the sake of argument... create "nested" styles?

  10. #10
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,467
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by Stephen
    I am sure you are far more familiar with the specs than I am.
    lol -I wouldn't bet on it. Every time I look back at the specs I find something I'd missed before.

  11. #11
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,467
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by dresden_phoenix View Post
    so an import is to .. for the sake of argument... create "nested" styles?
    Yes you can import another style sheet from inside an imported style sheet (or from inside a linked style sheet of course).

    The link element can link your page to other documents and not just CSS documents.

    Link is an html element and import is CSS rule.

  12. #12
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,812
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    I suppose the practical reason why I brought this up was because someone commented on all the @imports i had on my HTML code ( I guess I neglected the fact I could use @imports within a style sheet) and also because I wondered if that was a more elegant way to override "active" rules. By that I mean, let say you have a landing page, the internal pages have slightly different styles ( let's say background colors, for example) and or maybe altered layout elements. The way I currently handle this is to have a @import main.css followed by an @import overide1.css, @importoverride2.css, and so on.

  13. #13
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,708
    Mentioned
    7 Post(s)
    Tagged
    0 Thread(s)
    You can override anyway you like but it all depends on specificity and if it has enough weight to override the previously set style. Just because you call an override stylesheet after the main one doesn't mean it will work.
    Always looking for web design/development work.
    http://www.CodeFundamentals.com


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
  •