SitePoint Sponsor

User Tag List

Results 1 to 11 of 11
  1. #1
    SitePoint Evangelist
    Join Date
    Jan 2002
    Posts
    457
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    What is the benefit of using @ import?

    I visited webstandards.org and they recommend to use CSS for layout, and xhtml for coding, which I have done. I have also included an invisible paragraph which recommends users to upgrade their browsers. I haven't viewed my site in anything less than IE 5.5, so I am not sure how it looks in older browsers, but I know my code validates to xhtml 1.0 standards. What is the purpose of using the @ import method of including stylesheets? Do some browsers not understand that? If they don't but they do understand the standard way, what is the benefit of using the @ import method? Is is because older browsers do not do a good job with CSS level 2, or is it just for the purpose of making the page look bad in their browser so they will be more likely to upgrade?

  2. #2
    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)
    yup, older browsers don't understand @import and usually make a hash of CSS 2. using the @import, you can first feed the pages a very basic stylesheet, then import your "true" styles. old browsers will just apply the basic stuff, whereas the new ones will use the imported stylesheet (which, in most cases, redefines and overrides whatever has been done in the basic style).
    try installing netscape 4.7, and you'll see the effects of this (you can get it from http://browsers.evolt.org )
    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

  3. #3
    SitePoint Evangelist
    Join Date
    Jan 2002
    Posts
    457
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    After looking at my pages in NN 4.7, I definately want to use the @ import rule. I found a site that described what the code is.
    Code:
     <style type="text/css" media="all">
    @import "style.css";
    @import "advanced.css";
    </style>
    The only problem is, I have a seperate styelsheet for printing. The site did not tell me how to specify that each stylesheet is for a different media.

  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)
    Quote Originally Posted by Joshua Clinard
    The only problem is, I have a seperate styelsheet for printing. The site did not tell me how to specify that each stylesheet is for a different media.
    something like
    Code:
     <style type="text/css" media="print">
    @import "printstyle.css";
    </style>
    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
    SitePoint Evangelist
    Join Date
    Jan 2002
    Posts
    457
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    So basically, I have to type in that whole bit of code twice? Once for my main stylesheet, and once for my print stylesheet?
    Last edited by Joshua Clinard; Mar 16, 2003 at 12:55.

  6. #6
    SitePoint Zealot
    Join Date
    Dec 2001
    Location
    USA
    Posts
    106
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yea, just make sure media is equal to "print" for your print stylesheet.

  7. #7
    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)
    josh, you can also add media specific sections in the same css file (i prefer that method). so, in your main stylesheet

    Code:
    /* yadda yadda normal style stuff */
    
    body {
        /* etc etc */
    }
    
    /* and now some print styles */
    
    @media print {
    	#header {	background-color: #fff; }
    	#header form {	display: none;	}
    	#navbar {	background-color: #fff;	}
    	#footer {	display: none;	}
    
    	a 	{	text-decoration: underline; color: #000;	}
    	#content a:link:after, #content a:visited:after {
       			content: " (" attr(href) ") ";
       			font-size: 90%;
       	}
    }
    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

  8. #8
    SitePoint Evangelist
    Join Date
    Jan 2002
    Posts
    457
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok, that is a better idea. Thanks.

  9. #9
    SitePoint Evangelist
    Join Date
    Jan 2002
    Posts
    457
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok, that works. There is one thing, however, that I am stuck on.

    My content is being printed on the right side of the page, with a blank column about the size of the navbar on the left.

    I think it may have something to do with this.

    Code:
     body { background: url("images/navbar.gif" ) repeat-y; }
    How do I deal with this?

    I also just found out there is a blank space where the header would be.

    Here is a sample page.

    http://student.acu.edu/~jdc00a/books.html

    http://student.acu.edu/~jdc00a/styles.css
    Last edited by Joshua Clinard; Mar 19, 2003 at 10:38.

  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)
    the thing with adding the print style to the main stylesheet is that the styles will be added together, i.e. all your normal "display" styles are still in effect, and the print styles only extend and override only the attributes you specify. so, a longwinded way of telling you: re-specify the position of the content div in your print section.
    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
    SitePoint Evangelist
    Join Date
    Jan 2002
    Posts
    457
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks. We'll see how that works.


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
  •