Firefox is not adhering to the 'disabled' attribute for rel=stylesheet links
css, firefox, html, stylesheet
Solution
I found a workaround that seems to be functional in all browsers. This does NOT seem like it should be the best way to do it but I wanted to share.
This is not ideal for a few reasons but I tried to make it streamlined and without any external library dependency like jQuery because this needs to be placed in your `head` tag and you probably have not loaded your JS libraries at that point.
<script>
window.onload = function() {
var path = "css";
var style = document.createElement( 'link' );
style.rel = 'stylesheet';
style.href = '/your/css/url.css';
document.getElementsByTagName( 'head' )[0].appendChild( style );
style.disabled = true;
};
</script>
NOTE: Firefox seems to only respond to the disabled tag if it is applied to the stylesheet after it has been added to the DOM. I still feel like I'm missing something because that seems crazy.
So, if you were to put `style.disabled = true;` before you add the style to your document then Firefox does not recognize the disabled state of the stylesheet.
Problem
I have a site that requires two themes to be loaded. The second theme can be toggled on/off by the user. I'm currently accomplishing this by using the `disabled` tag in the link like so: ``` <link rel="stylesheet" href="{{main css}}"> <link rel="stylesheet" title="theme-white" href="{{2nd theme css}}" disabled> ``` I then toggle `disabled` in JavaScript. This works great in Safari (Mac), Chrome (Mac/Windows), and IE10. However, Firefox (both Mac and Windows) seems to ignore the `disabled` tag on page load and displays the second theme on initial load (as it is loaded second). When I manually toggle `disabled`, however, Firefox does respond to the tag and will begin to switch the second theme on/off. How can I accomplish this goal?