Style switcher (php-based) - conflict with browser style option

built in browser option no longer works

[luispunchy]

I am using a style switcher that utilizes php, based on a version found on the sitepoint website. Basically the way the code works is a visitor selects a style via a hyperlink. That hyperlink invokes the php script which sets a cookie to remember the selected style and then hardcodes that selection into the page as the stylesheet.

I tweaked the installation slightly by also hardcoding (static) the alternate style sheet into the doc header with a "link" tag, so that visitors can still select a style via the built-in option available in standards-compliant browsers (Gecko-based, Opera, etc - non-IE).

The pages are DOCTYPE XHTML 1.0 Transitional, and everything validates.

Ok so the problem: But the browser built-in option for selecting alternate stylesheets doesn't work anymore - seems to be in conflict with the switcher code.

So the php switcher works fine. But I get a mash-up of conflicting rules between the stylesheets when I use the browser option. Very strange, as the way it all gets hardcoded and read by the browser, the stles should not be overlapping at all.

Below is some code snippets for review. My markup and CSS is rather complex (floats, positioning, etc) - but again that shouldn't matter. Anybody see what might be
making the stylesheets get meshed together as opposed to remaining mutually exclusive?

// SITEPOINT SWITCHER - saved as "switcher.php"

<?php
$theStyle = $HTTP_GET_VARS["style"]; /* querystring */
setcookie("style", $theStyle, time()+36000, "/", "", "");
header("Location: ".$_SERVER["HTTP_REFERER"]);
exit;
?>

********

// THE STYLE LINKS THAT SHOULD BE USED - put in head of HTML doc

<?php // HARDCODE SELECTED STYLE INTO HEAD
$styleCookie = $HTTP_COOKIE_VARS["style"];
switch($styleCookie)
{
case "alternate":
break;
case "default":
case "":
$styleCookie = "default";
break;
}

$styleSheet = "<link rel=\"stylesheet\" type=\"text/css\"
href=\"css/$styleCookie.css\" media=\"screen\" />\n";

echo $styleSheet;
?>

*********

// ADD THE ALTERNATE LINK FOR COMPLIANT BROWSERS

<link rel="alternate stylesheet" type="text/css" media="screen" title="Spidey theme" href="css/alternate.css" />

*******

// THE HTML LINKS THAT ARE USED TO INVOKE SWITCHER

<ul>
<li><a href="switcher.php?style=default">default theme</a></li>
<li><a href="switcher.php?style=alternate">alternate theme</a></li>
</ul>

Any help would be appreciated!

[SuzyUK]

luispunchy..

where you hard code the alternate stylesheet you should add both/all your sheets as alternate ones.. the manipulation that is done via PHP variables is not known by the browser, which is why the browser switch choice is not available - offering both/all sheets as alternate ones will keep the browser style choice option intact, offering the best of both worlds..

// ADD THE ALTERNATE LINKS FOR COMPLIANT BROWSERS
<link rel="alternate stylesheet" type="text/css" href="css/default.css" title="Default Theme" />
<link rel="alternate stylesheet" type="text/css" href="css/alternate.css" title="Spidey Theme" />

[luispunchy]

Hi Suzy -

Thanks for the reply. To clarify, the problem isn't that the browser switch choice isn't available or working per se. The problem is that when you use the browser switcher (as oppposed to the php switcher), the display of the page breaks. Instead of just showing one of the style sheets and switching between them, the browser switch actually combines rules from the two available stylesheets, resulting in a hodgepodge of my intended designs.

It is very strange. Obviously, the easiest way to demonstrate what I'm seeing is by posting the link to this particular page. But in addition to this being against the forum rules, it is a client and needs to be kept confidential for now.

I will therefore try to replicate the problem with a simplied test case scenario and paste that code in here if I can.

Otherwise, send me a private email, anybody who would be willing to take a look, and I'll send you the url.

Thanks.