Safari 5.1 won't load "alternate stylesheets" properly

I have the same problem in Safari 5.1. A user here http://www.neowin.net/forum/topic/996092-how-to-use-alternative-stylesheets-in-c hromesafari/ says it doesn't work in Chrome either. It works in my version 12.0.742.122 though.

I solved my problem by using the jquery script here: http://www.marcofolio.net/webdesign/create_a_better_jquery_stylesheet_switcher.h tml

But instead of using the alternate <style type="text/css">@import url("style.css");</style> method at the bottom of the page, I gave the extra stylesheet a title:

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

<link title="videostyle" href="green.css" rel="stylesheet" type="text/css" />

And added a title selector in the jquery script:

// Color changer

$(".colorblue").click(function(){

$("link[title=videostyle]").attr("href", "blue.css");

return false;

});

See working version here: http://www.tv-glad.dk/video/_latest.php

This way is does not display i e.g. Firefox as an alternate stylesheet.

I have the same problem in Safari 5.1 but it don't seem to be caused by the property rel="alternate stylesheet" of the "link" tag. Javascript is unable to load the stylesheet by setting the "disabled" property to true (normally used to activate the style).

function setActiveStyleSheet(title) {

var i, a, main;

for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {

if(a.getAttribute("rel").indexOf("alternate stylesheet") != -1 && a.getAttribute("title")) {

a.disabled = true;

if(a.getAttribute("title") == title) a.disabled = false;

}

}

}

I hope the bug will be corrected very soon because it concerns a lot of sites.

Test here the problem:

http://www.ecst.csuchico.edu/~bertucci/csci245/styleswitcher.htm

(it works fine with any Firefox, Chrome and Safari versions except Safari 5.1)

Same problem here. It seems that Safari 5.1 has problems with enabling the alternate stylesheets via javascript.

We used a workaround to fix this problem.

First we added a extra link in the HTML:

<link rel="stylesheet" title="switch" href="default.css">

Then we changed the setActiveStyleSheet function to the following:

function setActiveStyleSheet(title) {

/*

* This method was rewritten to provide a fix for Safari 5.1,

* because of a bug in this browser that does not process "a.disabled = false"

*/

var a;

var link;

var href = '';

for (var i = 0; (a = document.getElementsByTagName("link")[i]); i++) {

// If this object is the link element that will hold the link to the enabled stylesheet, store the reference

if (a.getAttribute("title") == "switch")

link = a;

if (a.getAttribute("rel").indexOf("style") != -1 && a.getAttribute("title")) {

if (a.getAttribute("title") == title) {

href = a.href;

}

}

}

// Set href attribute of the link element

link.setAttribute("href", href);

}

Rob,

I tried your suggestion which got the stylesheets switching in Safari however none of the cookies will stick now. Every time I reload the page it defaults back.

Are your cookies working fine and saving style sheet choices?

Do you have a link to your page where you have it working so I could compare code to see where I'm going wrong?

Many thanks.

Thank you Rob for the solution.

I clarify that we are talking about changing the following scripts to achieve compatibility with Safari 5.1.

http://www.alistapart.com/articles/alternate/

http://www.ecst.csuchico.edu/~bertucci/csci245/styleswitcher.htm

I changed something else to distinguish the alternative styles and to avoid reloading the current style.

function setActiveStyleSheet(title) {

var styleTag;

var styleSwitch;

var styleHref='';

for(var i=0; (styleTag = document.getElementsByTagName("link")[i]); i++) {

if(styleTag.getAttribute("title")=="switch") {styleSwitch=styleTag;}

if(styleTag.getAttribute("rel").indexOf("alternate stylesheet")!=-1 && styleTag.getAttribute("title")) {

if(styleTag.getAttribute("title")==title) {styleHref=styleTag.getAttribute("href");}

}

}

if (styleSwitch.getAttribute("href") != styleHref) {styleSwitch.setAttribute("href",styleHref);}

return false;

}

James,

to use cookies you can try to replace also that function:

function getActiveStyleSheet() {

var styleTag;

var styleSwitch;

var styleTitle='';

for(var i=0; (styleTag = document.getElementsByTagName("link")[i]); i++) {

if(styleTag.getAttribute("title")=="switch") {styleSwitch=styleTag;}

}

for(var i=0; (styleTag = document.getElementsByTagName("link")[i]); i++) {

if(styleTag.getAttribute("rel").indexOf("alternate stylesheet")!=-1 && styleTag.getAttribute("title")) {

if(styleTag.getAttribute("href")==styleSwitch.getAttribute("href ")) {styleTitle=styleTag.getAttribute("title");}

}

}

return styleTitle;

}

I used that solution on the website

http://www.umrio.com

My first solution didn't save the users setting by setting/reading a cookie. With help from this page: http://jasonlau.biz/home/jquery/jlstylesheet-a-css-stylesheet-changer-for-jquery our site now also saves the users choise.

See the working version here: http://www.tv-glad.dk/video/

Click on the small links: Liste and Kompakt

First I want to thank you all for helping to solve this problem.

James: Do you have it working?

Vito : I saw the script on your website and it didn't set the cookies.

In the global.js you had 2x the function setActiveStyleSheet(title)

I deleted the 2nd one, and after that the cookies were set.

I can see the cookies are set, but the script doesn't read the cookies, so cookies don't work 100%

Does anybody have a working script?

Thank you all very much. RGM de Block

I haven't got it working properly yet no, but I haven't had a chance this week to sit down and work through it. I may get that opportunity this weekend so will have to see how far I get.

As things stand, I had to temporarily choose between everything working (with cookies) on all but Safari 5.1 or working on all browsers (sans-cookies). I went for the former for now.

I have found annother workaround: if you remove the title attribute and restore the rel attribute to "stylesheet" then Safari 5.1 seems happy again and this does not seem to break other browsers.

Something like:

function setActiveStyleSheet(title) {

var i, a, main;

for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {

if(a.getAttribute("rel").indexOf("alternate stylesheet") != -1 && a.getAttribute("title")) {

a.disabled = true;

if(a.getAttribute("title") == title) {

a.disabled = false;

a.setAttribute("rel","stylesheet");

a.removeAttribute("title");

}

}

}

}

Of course this means that you can only swich once but in my context that is fine.

Hi, guys - I'm a webmaster but not a programmer, having a similar problem with a different styleswitch script. The below-linked script, which I'm using in random mode (selecting a random stylesheet upon each visit to the page), works fine in every single browser except Safari for Mac. I don't suppose any of the tricks you're discussing above could be applied to this script?

http://www.dynamicdrive.com/dynamicindex9/stylesheetswitcher.htm

Here it is in action (or inaction in Safari):

http://www.sacredfools.org/2011/

Alternatively, if you could recommend a different script to use that works similarly, I'd appreciate it! (The ones you link to here all seem to be scripts that allow the user to switch the styles rather than one where the stylesheet is randomly chosen.)

I have not read all posts on this question in all detail, but it seems to me that it is a bug deeper down than Safari.

I restored previous versions of Safari that I know work with alternate sheets because I am running them on a different machine.

However, that did not solve the problem. The difference between both machines is in recent OS updates, esp. Java, which leads me to suspect that the bug is in some Java engine.

The fact that my alternate sheet scripts are also not working in Chrome and Firefox, whereas before they did and I have not updated either of those browsers, seems to confirm a bug in a deeper-down, common layer.

For what this is worth.

Robert.

(dank je wel Rob Houben voor de oplossing!)(thank you very much Rob Houben for the solution!)

Hello Robert, it is a Safari problem, in all the other browsers it works.

I'm using the script from Vito now, and I have it working. I use it in a Facebook App, and it only works because of an extra script that Facebook usues to refresh the page, but anyway, it works! Have a nice weekend 🙂

Feel free to ignore m'post... was just provided with a fix by the folks at the dynamic drive forum... if you're curious to compare the code for this method, you can grab the altered version here:

http://www.dynamicdrive.com/forums/showthread.php?p=259202