fg-loadcss
Version:
A function for loading CSS asynchronously
37 lines (31 loc) • 1.17 kB
HTML
<html>
<head>
<title>CSS link media toggle</title>
<link rel="stylesheet" href="slow.css" media="print" onload="this.media='all'; this.onload=null;">
<noscript><link rel="stylesheet" href="slow.css"></noscript>
<style>
/* a few demo styles */
body {
font-family: sans-serif;
margin: 50px auto;
max-width: 40em;
padding: 0 20px;
line-height: 1.5
}
pre {
white-space: normal;
background: #fff;
padding: 15px;
border: 1px solid rgba(0,0,0,.3);
color: #333;
}
</style>
</head>
<body>
<p>This is a test page that references a stylesheet using a standard <code>link[rel=stylesheet] with a print media type, which is swapped to all media when loaded.</code>.<p>
<p>That markup looks like this:</p>
<pre><code><link rel="stylesheet" href="slow.css" media="print" onload="this.media='all'"></code></pre>
<p>Note: When run locally, the CSS file has a 5 second delay built into its server response time. If it is loaded in a non-blocking manner as desired, you should be able to read this text before the page is styled as white text on green background.</p>
</body>
</html>