Last active
October 8, 2021 08:34
-
-
Save mmazzarolo/8a2e73f1c80669dbe722a35db5dbb970 to your computer and use it in GitHub Desktop.
Is Chrome enable stylesheets asynchronously?
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <html> | |
| <body> | |
| <link | |
| rel="stylesheet" | |
| href="https://unpkg.com/purecss@2.0.6/build/pure-min.css" | |
| integrity="sha384-Uu6IeWbM+gzNVXJcM9XV3SohHtmWE+3VGi496jvgX1jyvDTXfdK+rfZc8C1Aehk5" | |
| crossorigin="anonymous" | |
| id="purecss" | |
| /> | |
| <p>Hello world</p> | |
| <button id="btn">Toggle CSS</button> | |
| </body> | |
| <script> | |
| const stylesheet = document.querySelector('#purecss'); | |
| const btn = document.querySelector('#btn'); | |
| btn.addEventListener('click', async () => { | |
| // Notice we're within an async function | |
| stylesheet.disabled = !stylesheet.disabled; | |
| debugger; // 👈 At this point, the stylesheet should reflect the state set in the previous line | |
| }); | |
| </script> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
In Chrome (on the right), when we hit the breakpoint after re-enabling the stylesheet it still shows the unstyled content (and the pending network request???)
In other browsers the stylesheet is enabled/disabled synchronously.