Alternate stylesheets not working in Chrome

Question

I need some help diagnosing a CSS problem in Chrome. I'm not even sure how to diagnose this issue. I'm just wondering what the next steps should be.

As far as solutions go, I have checked this question but it's not very clear. I have also tried this solution (disabling all styles and then enabling one) but it's not working. I don't think this question applies because we're not pulling from external domains so it's not a cross-domain issue.

The problem:

It appears that Chrome is ignoring our alternate stylesheet definitions. In our application we use alternate stylesheets and a Javascript routine to change the background color. This code was working, and is still working in Firefox and IE, but at some point it stopped working in Chrome. The stylesheets are defined like this:

    <link type="text/css" rel="stylesheet" title="white" property="stylesheet" href="/myapp/css/layer.css" />
    <link type="text/css" rel="alternate stylesheet" title="silver" property="stylesheet" href="/myapp/css/medium.css" />
    <link type="text/css" rel="alternate stylesheet" title="grey" property="stylesheet" href="/myapp/css/dark.css" />
    <link type="text/css" rel="alternate stylesheet" title="beige" property="stylesheet" href="/myapp/css/beige.css" />
    <link type="text/css" rel="alternate stylesheet" title="green" property="stylesheet" href="/myapp/css/green.css" />

The original body definition here:

body {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    color: #282828;
    height: 100%;
    background: #fff url(../images/header-bg.jpg) center top no-repeat;
    min-width: 1024px;
}

is supposed to be overridden with (for example) this, in one of the alternate stylesheets:

body {
    background: url("../images/header-bg-dark.jpg") no-repeat center top #919194;
}

But this is not working in Chrome. I've tried the following:

1) Traced through the JS code and verified that the CSS sheets are getting enabled/disabled correctly:

        if (document.styleSheets.item(i).href.indexOf("medium") > -1) {
            document.styleSheets.item(i).disabled = false;
        } else if (document.styleSheets.item(i).href.indexOf("dark") > -1
                || document.styleSheets.item(i).href.indexOf("beige") > -1
                || document.styleSheets.item(i).href.indexOf("green") > -1) {
            document.styleSheets.item(i).disabled = true;
        }

2) Looked at the computed styles, and only the base style is showing - it's like Chrome is ignoring the other styles.

3) Tried removing alternate from the rel="alternate stylesheet" part of the definitions.

4) Tried removing the title from the base definition (layer.css).

Anyone have any other ideas? If I find a solution I'll post it.

Burgener

Answer 1

The answer turned out to be removing the "title" attribute AND removing the "alternate" part of the stylesheet definition. So the stylesheets are now linked like this:

<link type="text/css" rel="stylesheet" property="stylesheet" href="<c:url value="/css/medium.css"/>" />
<link type="text/css" rel="stylesheet" property="stylesheet" href="<c:url value="/css/dark.css"/>" />
<link type="text/css" rel="stylesheet" property="stylesheet" href="<c:url value="/css/beige.css"/>" />
<link type="text/css" rel="stylesheet" property="stylesheet" href="<c:url value="/css/green.css"/>" />

No idea why the original definitions didn't work but the new ones work and can be turned on and off with JS, which is what we needed.

Burgener

This unfortunately also prevents firefox from allowing the user to select the style sheet they want to apply under View->Page Style. But I confirm that this is necessary to get chrome to switch stylesheets through javascript. – Mosby

Answer 2

Working with Alternative Style Sheets explained how to make it work predictably where it is working in unexpected ways. Alternate Style Sheets is also another good demo.

Descendent