A couple of years ago, I posted a question about how I could put domain-specific CSS in
my personal CSS style sheet. It mostly worked, but not if the page was being served by HTTPS.
I now have a need to serve such a style sheet from my server, as opposed to having it locally, because of the HTTPS issue. I need to distinguish between whether the style sheet is being served from my development and testing servers. I am also
now using Internet Explorer 9. Based on the answer to the previous question, I came up with the following code:
HTML {
behavior:expression( (function(el){
var _href = _doc.location.href.toLowerCase();
switch(_doc.location.host.toLowerCase()){
case '[redacted].com':
document.styleSheets[0].insertRule("#toolbar div.toolbar-menu {background-color:#800000 !important;}", 0);
break;
case 'www.sfmta.com':
document.styleSheets[0].insertRule("#toolbar div.toolbar-menu {background-color:#538012 !important;}", 0);
break;
}
el.runtimeStyle.behavior = 'none';
})(this));
}
where [redacted] is replaced with the development domain.
It isn't working. The toolbar is displaying as black as it always has, not the new dark red.
Can anyone suggest a fix? I've verified the style code is being served from the development server, and am using the code in another style sheet and having it change the color.
I cannot provide a link to the live CSS code as only logged-in staff will receive this code. The code will not be served to the general public.
Charles Belov
SFMTA Webmaster
SFMTA Webmaster
