Firefox: style sheet appears multiple times in developer tools

Question

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?

Answer 1

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

Answer 2

This is obviously a bug in the Style Editor. And it looks like it is going to be fixed in an upcoming Firefox version .