SitePoint Sponsor

User Tag List

View Poll Results: To import or to link ... that is the question!

Voters
12. You may not vote on this poll
  • @import

    5 41.67%
  • link

    7 58.33%
Results 1 to 14 of 14
  1. #1
    SitePoint Zealot cwebmedia's Avatar
    Join Date
    Nov 2002
    Location
    Calgary, Alberta, Canada
    Posts
    180
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    A few CSS Questions

    I've been working on learning CSS positioning, standards compliance etc over the last little while.

    Despite the vast amount of superb resources on the Web in these areas, I've still got a few questions left un-answered:
    1. I've noticed that people use 3 digit codes for colours as opposed to the normal hex values. What's up with that? Shouldn't one stick to the hex values?
    2. The whole issue revolving around @import as opposed to link. What's the better choice? I like using @import as I can go CSS 2 compliant and leave it at that. Make sure you use your div tags correctly so your page displays nice sans style sheet and politly point people with out the more compliant browsers off the Webstandards.org or what?
    I've really been finding that CSS is a wonderful, beautiful thing and really want to start using it a lot more but what's best pratice?

    P.S ~ I really dig this new editor here at SitePoint! Coolio!
    Last edited by cwebmedia; Apr 15, 2003 at 07:21.

    Keep smiling ...
    It makes people wonder what you're up to ...

  2. #2
    SitePoint Wizard Bill Posters's Avatar
    Join Date
    Dec 2001
    Location
    UK
    Posts
    1,523
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    1)

    They are still hex values but presented in 'shorthand'.
    If hex values consist of three pairs (i.e. are within the basic 216 colour 'websafe' palette) then the value can be represented in shorthand.

    #ffcc00 > #fc0
    #ffffff > #fff
    #99cc00 > #9c0
    etc...

    'css shorthand' can be implemented in many other attributes (e.g. the various background-... attributes which can validly be condensed into a single background: attribute).

    For more info, check out the css2 reference at www.W3Schools.com and look for the font, border, padding, margin, background, list and outline attributes, all of which can support shorthand condensing of values.

    Also read:
    http://www.sitepoint.com/article/966
    http://home.no.net/junjun/html/shorthand.html

    ---


    2)

    I must admit, I've been using (read: playing with) css for quite a while now but I still have no idea what inc is. I clearly have missed the 'whole issue' revolving around it.

    If I understand you correctly, the only two methods of applying external css to a page is through either the use of a <link> tag or through the use of @import.

    Looks like I have some reading of my own to do.

    Do you have any urls where I can read up on the issue?
    Last edited by Bill Posters; Apr 15, 2003 at 08:04.
    New Plastic Arts: Visual Communication | DesignateOnline

    Mate went to NY and all he got me was this lousy signature

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,274
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,
    I still have no idea what inc is. I clearly have missed the 'whole issue' revolving around it.
    So have I ! What's inc?

    Paul

  4. #4
    SitePoint Zealot cwebmedia's Avatar
    Join Date
    Nov 2002
    Location
    Calgary, Alberta, Canada
    Posts
    180
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Blargh ... my apologies ... @import is what I meant. My head was swimming a bit when I posted that from copious amounts of online reading!

    I got the original post changed but not the poll. So just pretend I didn't mess that up!

    Keep smiling ...
    It makes people wonder what you're up to ...

  5. #5
    SitePoint Zealot cwebmedia's Avatar
    Join Date
    Nov 2002
    Location
    Calgary, Alberta, Canada
    Posts
    180
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    P.S ~ Bill Posters: Thanks for the explination on the colour issue. I take it that means using the full HEX code really makes no difference?

    Keep smiling ...
    It makes people wonder what you're up to ...

  6. #6
    SitePoint Enthusiast abbey's Avatar
    Join Date
    Apr 2003
    Location
    Chicago
    Posts
    89
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I use full hex code more out of habit. Shorthand is always nice, but I'm just not used to it.

    @import works nicely and does many of the same things as the link. It's primarily used as a hack since NNv.4 does not import. So, all those lovely positioning rules that really get mucked up by NNv.4, hide'em by putting them into the @import.

    Couple of additional CSS resources in addition to w3schools.com:
    - http://positioniseverything.net/
    - http://www.meyerweb.com/eric/css/edge/
    - http://nemesis1.f2o.org/
    - http://www.mako4css.com/index.htm
    <abbey />
    HTML/XHTML/CSS coding
    Abbey Ink

  7. #7
    ********* Shroom mydster's Avatar
    Join Date
    Nov 2002
    Location
    tpyge
    Posts
    1,085
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    @import... indeed it does work with NN4, though I don't even see why people are still using NN4... :$

  8. #8
    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)
    @import becomes interesting once you start working with alternate stylesheets...basically, you can have all your styles just importing other css files, whilst still retaining the apperance - to the browser - of a single stylesheet per style....if that makes any 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

  9. #9
    SitePoint Wizard silver trophy TheOriginalH's Avatar
    Join Date
    Aug 2000
    Location
    Thailand
    Posts
    4,810
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by redux
    @import becomes interesting once you start working with alternate stylesheets...basically, you can have all your styles just importing other css files, whilst still retaining the apperance - to the browser - of a single stylesheet per style....if that makes any sense at all

    Erm - nope - Next on my .css hitlist, I really only use @import for non-compliant browser workaround.

    I've edited yer poll btw (and made it xhtml compliant )
    ~The Artist Latterly Known as Crazy Hamster~
    922ee590a26bd62eb9b33cf2877a00df
    Currently delving into Django, GIT & CentOS

  10. #10
    SitePoint Guru silver trophy Luke Redpath's Avatar
    Join Date
    Mar 2003
    Location
    London
    Posts
    794
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    A more basic stylesheet can be presented using link, which all CSS capable (not compliant) browsers can read, and the @import should only work in non-CSS compliant browsers, thus hiding the more complete, and complex CSS from these browsers. There are various ways of hiding CSS files from some browsers and not others. Look here:

    http://w3development.de/css/hide_css...wsers/summary/

  11. #11
    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 TheOriginalH
    Erm - nope
    ok, despite copious intake of alcoholic beverages tonight, i'll try to clarify. imagine the scenario in which you want to offer 2 stylesheets for a page (a standard one, and an alternate - for those browsers supporting stylesheet switching). furthermore, imagine that both stylesheets share 90% of the styles, differing only in the last 10% (which could be something as trivial as the background colour of various divs and text sections). now, instead of replicating the 90% in both stylesheets, only have the 10% in each of the two stylesheets, and have the "common" style definitions in a third stylesheet which is imported in both the previous stylesheets stylesheets. any clearer ?
    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

  12. #12
    SitePoint Enthusiast vischo's Avatar
    Join Date
    Mar 2003
    Location
    Chicago, IL
    Posts
    75
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The &lt;link&gt; method works in IE4, so most likely you'll need to block that and NN4. This is done with the @import rule.

  13. #13
    SitePoint Zealot cwebmedia's Avatar
    Join Date
    Nov 2002
    Location
    Calgary, Alberta, Canada
    Posts
    180
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by redux
    ok, despite copious intake of alcoholic beverages tonight, i'll try to clarify. imagine the scenario in which you want to offer 2 stylesheets for a page (a standard one, and an alternate - for those browsers supporting stylesheet switching). furthermore, imagine that both stylesheets share 90% of the styles, differing only in the last 10% (which could be something as trivial as the background colour of various divs and text sections). now, instead of replicating the 90% in both stylesheets, only have the 10% in each of the two stylesheets, and have the "common" style definitions in a third stylesheet which is imported in both the previous stylesheets stylesheets. any clearer ? [img]images/smilies/wink.gif[/img]
    There's a lesson learned for me! I've got 3 style sheets that are identical aside from colours and I never used the common thing.

    How do you make the common deal work?

    I've got a style switcher on my site but am having problems making it work with the @import method. I got it from ALA but as soon as I put it to work, the whole idea of @import goes out the window.

    Lots o' learning to do!

    Keep smiling ...
    It makes people wonder what you're up to ...

  14. #14
    SitePoint Zealot cwebmedia's Avatar
    Join Date
    Nov 2002
    Location
    Calgary, Alberta, Canada
    Posts
    180
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by abbey
    I use full hex code more out of habit. Shorthand is always nice, but I'm just not used to it.

    @import works nicely and does many of the same things as the link. It's primarily used as a hack since NNv.4 does not import. So, all those lovely positioning rules that really get mucked up by NNv.4, hide'em by putting them into the @import.

    Couple of additional CSS resources in addition to w3schools.com:
    - http://positioniseverything.net/
    - http://www.meyerweb.com/eric/css/edge/
    - http://nemesis1.f2o.org/
    - http://www.mako4css.com/index.htm
    Cool! I'll stick to the complete HEX too. Really makes no difference to me.

    Thanks for the links! Awesome!

    Keep smiling ...
    It makes people wonder what you're up to ...


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
  •