Cannot use inline 'onload' because of CSP

[petervtzand]

Cannot use inline 'onload' because of CSP

[Macleykun]

Here is a variant if you have multiple styles

    <script nonce>
        Array.prototype.slice.call(document.querySelectorAll("[data-loadcss]")).map(function (e) {
            e.addEventListener("load", function() {
                this.media = "all"
            });
        })
    </script>

or shorter es6 syntax

    <script nonce>
        [...document.querySelectorAll("[data-loadcss]")].map((e) => e.addEventListener("load", (e) => e.target.media = "all"));
    </script>

Sorry for necromancing an old issue with a (unrelated) question.
But using the es6/other variant like just including it to the bottom will async/inline onload but not cause csp to break?
Like no adjustments needed? Just chug it to the bottom? Or should it be placed in the header?

Again, sorry for reviving an issue with a unrelated (noob) question. I do look forward to your reply!

I've tried to implement it here: https://github.com/TheVoxSiren/voxsiren.net/blob/main/index.html#L7
But i feel like it's not really doing anything?

[scottjehl]

Looks good! Thanks for noting. It should work the same yes, but I'm not sure if there's a possibility of the CSS loading from cache before the onload event is bound. It does make me wonder if a timeout might be more dependable, since it's not onload in particular that needs to be used so much as some event that happens after the CSS file is requested.

Worth testing.

Anyway, I'd love a readme edit if you'd like to. Otherwise we'll aim to get to it when we can.

[gr8bit]

Nice find & workaround @petervtzand ! One question though, why don't you "activate" the stylesheet in the link by setting the rel-attribute to "stylesheet" rather than changing the media attribute?

[petervtzand]

I've used this example of the filament group: https://www.filamentgroup.com/lab/load-css-simpler/. This seems to be their new and simpler approach.

[lubomirblazekcz]

Here is a variant if you have multiple styles

    <script nonce>
        Array.prototype.slice.call(document.querySelectorAll("[data-loadcss]")).map(function (e) {
            e.addEventListener("load", function() {
                this.media = "all"
            });
        })
    </script>

or shorter es6 syntax

    <script nonce>
        [...document.querySelectorAll("[data-loadcss]")].map((e) => e.addEventListener("load", (e) => e.target.media = "all"));
    </script>

[lubomirblazekcz]

Btw, I've noticed a weird bug where event listener did not trigger in Edge 18. So I've had to add this workaround. Works with onchange though, weird.

            if (navigator.userAgent.match("Edge/")) {
                e.media = "all";
            }