Skip to content

Instantly share code, notes, and snippets.

@mmazzarolo

mmazzarolo/test.html

Last active October 8, 2021 08:34
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save mmazzarolo/8a2e73f1c80669dbe722a35db5dbb970 to your computer and use it in GitHub Desktop.
Save mmazzarolo/8a2e73f1c80669dbe722a35db5dbb970 to your computer and use it in GitHub Desktop.
Download ZIP
Is Chrome enable stylesheets asynchronously?
Raw
test.html
<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>
@mmazzarolo
Copy link
Author

mmazzarolo commented Oct 7, 2021 •
edited

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.

Screenshot 2021-10-07 at 7 18 23 PM

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment