PDA

View Full Version : external CSS link rel= and @import trick


rdlaing
07-02-2003, 04:08 AM
Can someone please give me links to some different pages that use the external CSS link rel= and @import trick to create two stylesheets for a page, one for older and the other for newer browsers?

I'd like to see how designers are 'stripping down' their pages for the older browsers, and how to create one of these older browser stylesheets. I have some strong accessibility requirements and want to get a good grip on the best strategies.

Thanks!

-- rd

DCElliott
07-02-2003, 05:21 AM
<head>
. . .
<!-- Basic all browser styles go here -->
<link rel="stylesheet"
href="basic.css"
type="text/css">
<style type="text/css">
<!--
/*Advanced styles go here*/
@import "advanced.css";
-->
</style>
. . .
</head>


DE

rdlaing
07-02-2003, 05:43 AM
Hi there, thanks, sorry my post isn't clearer. i know how to do this trick, I just wanted to take a look at how designers are putting together different versions of the same page, choices they're making etc.

Is this code from a specific site? Can you give me some links to sites that employ this trick?

And wow, that is fast forum response time, great.

--rd

Astrolegoboy
07-02-2003, 11:02 AM
Not sure I can come up with specific sites but some of the sites I've seen that offer multiple versions of the same page (flash, dhtml, xml) usually present these options on a splash screen or intro page although this can probably be automated to a certain extent through use of code.

rdlaing
07-02-2003, 03:20 PM
DCElliot has the code right --

NN4.xx does not recognize the @import, so it uses the <link> style sheet. IE and NN6 merge both stylesheets, but by placing the @import sheet after the <link> style, you give it more importance, therefore IE and NN6 will give you the styles in the @import.

Therefore you can trick older browsers into using one stylesheet and newer ones a different stylesheet, and write them according to the appropriate standards they recognize.

I've read about this before, but just want to find some actual site examples of how it works.

thanks

-- rd

Astrolegoboy
07-02-2003, 04:23 PM
This Google Search Result Link should keep you busy for awhile:

Search Results CSS Stylesheet @Import (http://www.google.com/search?hl=en&ie=UTF-8&oe=UTF-8&q=css+stylesheet+%22@import%22&btnG=Google+Search)

rdlaing
07-02-2003, 08:38 PM
The article this thread links to was meant for you! HTH, David Bindel
Woah.

VERY nice article. THANKS!

:)