Firefox is not adhering to the 'disabled' attribute for rel=stylesheet links

问题

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?

回答1:

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.

回答2:

Late to the party here, but I just encountered this problem as well in Firefox. Turns out it had to do with HOW the disabled attribute is applied to the stylesheet via Javascript.

See the below code, assuming some trigger to swap disabled state between two stylesheets. The first function is what I tried first, and the latter is what ended up working for me.

var myStyles = document.getElementById('my-default-style');
var myOtherStyles = document.getElementById('my-other-style');

function thisFailsInFirefox() {
  myStyles.setAttribute('disabled', true);
  myOtherStyles.removeAttribute('disabled');
}

function thisWorksInFirefox() {
  myStyles.disabled = true;
  myOtherStyles.disabled = false;
}

The thisWorksInFirefox function seemed to do the trick, maintaining functionality in Chrome / Safari / Edge, while making Firefox match in its behavior.

回答3:

This is fixed in Firefox 68. You can now set the disabled attribute on <link> elements that also contain the ref=stylesheet attribute value. This will prevent the browser from loading that stylesheet until the disabled attribute is set to false or removed via JavaScript or some other method.

This brings Firefox in line with Chrome, Edge, Safari on support for this feature.

More info on MDN: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link#Attributes

Bugzilla report: https://bugzilla.mozilla.org/show_bug.cgi?id=1281135

回答4:

Everything in your theme stylesheet could be prefixed with a class. For instance, if you have the following in your theme css:

h1 {color: red;}
h2 {color: green;}

It becomes something like:

.theme-white h1 {color: red;}
.theme-white h2 {color: green;}

Then, to toggle your theme, you can use the following:

if (show theme) {
    $('body').addClass('theme-white');
} else {
    $('body').removeClass('theme-white');
}

来源：https://stackoverflow.com/questions/18237591/firefox-is-not-adhering-to-the-disabled-attribute-for-rel-stylesheet-links

标签

html

css

firefox

stylesheet