6 replies [Last post]
Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 6 years 6 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

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.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 1 day 5 hours ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5343
Points: 2964

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.

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 6 years 6 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

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:

http://www.kbs.com.au/education/education2.asp?pCode=HEC35

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

DCElliott
DCElliott's picture
Offline
Leader
Halifax, Canada
Last seen: 3 years 28 weeks ago
Halifax, Canada
Timezone: GMT-3
Joined: 2004-03-22
Posts: 828
Points: 0

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

David Elliott

Before you ask
LearnXHTML|CSS
ValidateHTML|CSS

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 6 years 6 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

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.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 1 day 5 hours ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5343
Points: 2964

Stylesheet switcher problem

Hi Tyssen,
Is there anything else in edu2.css ?

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 6 years 6 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

Stylesheet switcher problem

Nope, just:

/* (hide from older browsers) */ 
@import url("small.css");

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference