Async CSS w/ link[rel=preload]

This is a test page that references a slow-loading stylesheet using the new standard link[rel=preload].

That markup looks like this:

<link rel="preload" href="slow.css.php" as="style" onload="this.rel='stylesheet'">

In supporting browsers (such as Chrome Canary at time of writing), this markup will cause the browser to fetch the CSS file in an asynchronous, non-render-blocking manner, and once loaded, its onload event handler will change its rel property to "stylesheet" causing it to apply visibly in the page (the CSS file will color the page background green once loaded).

For browsers that do not yet support link[rel=preload], this page includes a small script, loadCSS.js, and a feature-test-based polyfill function (cssrelpreload.js) to fetch all link[rel=preload] stylesheets asynchronously and apply them to the page. The function polls the document for new links to preload until the window's onload event fires, and requires no configuration to work.

Note: 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.