Tue, 2004-05-25 03:36
Using the method written about on A List Apart and implemented on Simplebits and W3C Remix, I'm trying to get a stylesheet switcher working on my site.
This is what's in the head of my document:
<link rel="stylesheet" type="text/css" media="screen" title="small" href="edu2.css" /> <link rel="alternate stylesheet" type="text/css" media="screen" title="medium" href="medium.css" /> <link rel="alternate stylesheet" type="text/css" media="screen" title="big" href="big.css" /> <script type="text/javascript" src="styleswitcher.js"></script> <link rel="stylesheet" type="text/css" href="print.css" media="print" />
This is what's contained in edu2.css (the default stylesheet):
/* (hide from older browsers) */ @import url(small.css);
(I tried with and without "" around the URL with the same result.)
Using the method above, my page displays no CSS styling at all. When I revert back to <style type="text/css" media="screen">@import "small.css";</style>, it works fine. Maybe there's something really obvious that I'm doing wrong, but I can't see what it is? :?
Also, with the alternate stylesheets, can you just include the bits that you want to change (font size in my case), or do you have to reproduce the entire stylesheet again? On Simplebits, he seems to be using just the bits that are different but on W3C Remix, it looks like they've reproduced the whole thing.
Tue, 2004-05-25 07:53
#1
Stylesheet switcher problem
Hi Tyssen,
Yes you can just change the thing you want to change, as long as all the default styles are in the default stylesheet.
Can you post a link to the page you are working on so we can see whats going on.
Tue, 2004-05-25 22:02
#2
Stylesheet switcher problem
I switched it back again when I couldn't get it to work, but I've created another page to show what the problem is:
Wed, 2004-05-26 03:14
#3
Stylesheet switcher problem
I did this page for someone on another forum some time ago and included a styleswitcher to show how you could separate the structural and presentational CSS. http://www3.ns.sympatico.ca/d.elliott/semiotics/TAJSindex-dce.html
It uses a basic presentation plus the W3C core styles for switchable appearance and a basic header, three column, footer structure. Steal what you want of the code although the actual content is copyrighted. If you are using a mozilla family browser, the layout style may be interesting since it outlines and labels all the structural elements.
DE
Wed, 2004-05-26 03:29
#4
Stylesheet switcher problem
Thanks for the link, but my problem at the moment is not that the switcher doesn't work, but that when I try linking to my stylesheets like this:
<link rel="stylesheet" type="text/css" media="screen" title="small" href="edu2.css" /> <link rel="alternate stylesheet" type="text/css" media="screen" title="medium" href="medium.css" /> <link rel="alternate stylesheet" type="text/css" media="screen" title="big" href="big.css" />
with edu2.css containing:
/* (hide from older browsers) */
@import url("small.css");
the page has no styling at all and I can't figure out why cos I just looked at the code of your page and I'm doing exactly the same thing. :?
When I revert back to:
<style type="text/css" media="screen">@import "small.css";</style>
it's fine.
Wed, 2004-05-26 07:30
#5
Stylesheet switcher problem
Hi Tyssen,
Is there anything else in edu2.css ?
Wed, 2004-05-26 21:52
#6
Stylesheet switcher problem
Nope, just:
/* (hide from older browsers) */
@import url("small.css");