Leaking styles

Alternative stylesheets affecting each other!

[Hester]

I have discovered a strange effect that occurs when using alternative stylesheets. These are the ones you can select to change the look of a page. Each one is a separate file, yet I have found that a style set in one can be applied when a different style is chosen! So a page becomes a mix of the two! Even though the styles are not all applied at once.

In the first stylesheet I defined a class called "leaktest" and set it to use a red border and a white background. I then set the class on a variety of HTML tags on a page.

Then I put in a second stylesheet with the class "leaktest" having only a blue bottom-border set.

I found that when switching to the second stylesheet, I still got the red border and white background! So the styles from sheet one appeared to be leaking into the second one!

The styles are set up as follows. As you can see, they are not loaded and applied one after the other. I am using a piece of Javascript to apply the styles only when the user clicks on a link. The styles also get listed in certain browser's menus.

<link rel="stylesheet" type="text/css" media="screen, projection" href="../css/css6.css" />

<link rel="alternate stylesheet" type="text/css" media="screen, projection" title="leaktest" href="../css/leaktest.css" />

Note I do not give a title to the first stylesheet as Mozilla 1.0 has a bug that causes it to lose the style if title="normal" is used.

The odd thing is that the effect occurs in all three major browsers I tested it in - Mozilla 1, Opera 7 and Explorer 6 on Windows XP. This leads me to think it's deliberate behaviour. But why?

I imagined that an alternative stylesheet was completely separate from another stylesheet. So you could have different layouts and colour schemes. Now it looks like the first one dominates the rest! (I added a third stylesheet to test this.) So if the first one sets a border, you'll have to take the border off in the other stylesheets!

Have I got this wrong? Or is it a new bug to avoid? The browser apparently isn't clearing the screen and cache of all styles first, but painting over the page with any new styles it is fed afterwards. I know styles can cascade, but surely not between sheets!

Note: you can see a test page of this effect on my website.

[pageoneresults]

Hester, what you are seeing is correct behavior and is referred to as the Cascade [w3.org].

[Hester]

Yeah I know about that. But cascades should only happen when stylesheets are loaded on top of another.

Which is actually what is happening! I tried my code again with the first link having

title="normal"

and now everything works!

I didn't realise you could have a basic stylesheet, then the alternative ones could be cascaded on top of that. The way to do it is to leave out the title! I always thought stylesheets done in this way were completely separate.

This is good news though. It means I no longer have to duplicate lines and lines of identical code in each sheet. I can only include the lines that differ. Could save a lot of bytes!

Remember, I only took the title out due to a Mozilla bug.

[pageoneresults]

I'm also using a similar setup and a styleswitcher script. Leaving out the title in the main stylesheet link was something that had me stumped for a little bit when I first installed the script. Works like a charm.

I'm testing on a couple of different sites, one with colors, the other with font-families and it definitely has its advantages. I'll be testing with font sizing next week.

P.S. I am using the Persistent method...

Persistent
These style sheets are always enabled (they are always “on”) and are combined with the active style sheet. They can be used for shared rules common to every style sheet. To make a style sheet persistent, the rel attribute is set to “stylesheet” and no title attribute is set.

To make the style sheet main.css persistent, the following link element would be included in the head:

<link rel="stylesheet" type="text/css" href="main.css" />

Yes, your alternate stylesheets will only contain the rules necessary to initiate the changes for that alternate style.

The best way to handle the link and alternate stylesheet links is through an include into your <head></head> section. This way you have only one file to maintain when making changes to the link references.