Firefox: style sheet appears multiple times in developer tools

user_1413856 0
Viewed 39

I have a few linked style sheets on a sample site (https://responsive.webcraft101.com/index.html). One of the links is to be toggled on and off, so it includes an id:

<link id="sketch" rel="stylesheet" type="text/css" href="styles/sketch.css">

I jave some JavaScript on the header element which disables and enables the style sheet. A simplified version is:

var ss = document.querySelector('link#sketch');
var header = document.querySelector('header');
header.onclick = event => { ss.disabled = !ss.disabled; } ;

It works well enough. However, when I look at the style sheets in Firefox’s developer tools, the sketch.css style sheet is added to the list every time disabled is set to false.

Does that indicate something wrong with the process? How can I stop this from happening?

Edit

This is the case both on my Mac with lots of addons, and on my Windows, even with addons disabled.

firefox-developer-tools css javascript
2 Answers
user_4326810

I can see it happening in firefox but not brave. I am not sure if it actually has that many copies or whether it's just showing a log of as they were applied. Personally, I wouldn't do it this way. I think that you can do it by having one class in the body that you toggle. I don`t think this was an intended design parameter. It is not a visual element.

I have only seen this used as a way to lazy load the style sheet. And then they add a link instead of enabling it.

Usage Example here

user_47794720
Related