Open jfbrennan opened 8 months ago
Do you realy need a CSSStyleSheet object for disabled stylesheets ? Or are you just looking for a simple way to list enabled/disabled stylesheets?
const AllStyleSheets = document.querySelectorAll('link[rel~="stylesheet"], style')
AllStyleSheets.forEach((sEl) => {
console.log(sEl.disabled) // changeable boolean value
console.log(sEl.sheet) // CSSStyleSheet or null
})
If it's a performance issue, you probably wants to disable some stylesheets after their load. Then you don't have to download them again. Ex with a custom attribute data-to-disable :
const AllStyleSheets = document.querySelectorAll('link[rel~="stylesheet"][data-to-disable], style[data-to-disable]')
AllStyleSheets.forEach((sEl) => {
sEl.addEventListener('load', (ev)=>{
ev.target.disabled = true;
})
})
Not tested, but should work...
There is maybe another alternative. LinkHTMLElement is designed to load external ressources (not only CSS). I don't know how browsers caches them, and make it reusable later, but you can try to put the "stylesheet" on the rel attribute later.
A last idea : Try to use rel="preload", then add the as="style" attribute later, or remove a disabled attribute later. see https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel/preload
I hope it will help you.
@flavi1 thank you, there are many ways to do what we needed to do and we did. I opened this issue because of the inconsistent behavior, which I believe is incorrect and unintuitive for a developer.
For example, a developer includes this at the top of their document:
<link rel="stylesheet" href="https://assets.com/a.css">
<link rel="stylesheet" href="https://assets.com/b.css" disabled>
<link rel="stylesheet" href="https://assets.com/c.css" media="screen and (max-width: 600px)">
That results in:
// document.styleSheets
{
0: {
type: 'text/css',
href: 'https://assets.com/a.css',
media: {mediaText: "", ...},
disabled: false,
...
},
1: {
type: 'text/css',
href: 'https://assets.com/c.css',
media: {mediaText: "screen and (max-width: 600px)", ...},
disabled: false,
...
}
}
Note that b.css
is not there at all and the others have defaulted to disabled: false
.
Two of my three <link>
elements were parsed and constructed into CSSStyleSheet
objects and added to document.styleSheets
. Feels like a bug that b.css
was not. I 100% expected to find:
{
0: {
type: 'text/css',
href: 'https://assets.com/a.css',
media: {mediaText: "", ...},
disabled: false,
...
},
1: {
type: 'text/css',
href: 'https://assets.com/b.css',
media: {mediaText: "", ...},
disabled: true, // <-- In the disabled state, but <link> was still parsed and constructed like the others
...
},
2: {
type: 'text/css',
href: 'https://assets.com/c.css',
media: {mediaText: "screen and (max-width: 600px)", ...},
disabled: false,
...
}
}
That seems very much like the way it should be.
Now, does a browser download a disabled link stylesheet or not? Well, no, browsers do not. Ok, I agree with the reasoning for that, but why does that mean we shouldn't include b.css
as a disabled CSSStyleSheet
in document.styleSheets
? There are three reasons why I think that behavior is wrong and unintuitive:
disabled
on a CSSStyleSheet
and it doesn't get removed from document.styleSheets
, so it's not like all disabled stylesheets are excluded from this lista.css
and c.css
are fake files that never downloaded (they 404'ed), and yet those link elements are still parsed and constructed into objects and included in the stylesheet lista.css
downloaded successfully but was empty, are also includedYes, I agree. Since a CSSStyleSheet can effectively refer to a not yet downloaded CSS, and the disabled property exists, it seems more consistant to have an instance for each StyleSheets, including disabled StylesSheets.
What problem are you trying to solve?
I am trying to disable a stylesheet on page load with HTML -
<link rel="stylesheet" href="..." disabled>
- but once a condition is met at runtime, enable that stylesheet with JavaScript viadocument.styleSheets.item(i).disabled = false
.Currently,
<link disabled>
prevents the stylesheet from inclusion indocument.styleSheets
. I find this odd. Developers must resort to interacting with the<link>
elements directly instead of theCSSStyleSheet
objects, like they can with stylesheets that weren't initially disabled in the document.What solutions exist today?
Disable a stylesheet on page load with HTML
<link disabled>
then use a selector API, likegetElementById
, to remove the disabled attribute.How would you solve it?
My intuition was that I could disable a stylesheet with HTML -
<link disabled>
- and it would become aCSSStyleSheet
object with itsdisabled
property set to true and still be included indocument.styleSheets
and its styles NOT applied to the document.Setting
sheet.disabled = false
would then apply the styles. When the browser first downloads a disabled stylesheet is not a concern assheet.cssRules
could be null or already set when the stylesheet is enabled. Always downloading could avoid a delay when first enabling, but then again delaying the download may be desirable as well.Anything else?
No response