fg-loadcss
Version:
A function for loading CSS asynchronously
47 lines (38 loc) • 2.04 kB
HTML
<html>
<head>
<title>LoadCSS Diagnostic Test Files</title>
<meta charset="utf-8">
<style>
/* a few demo styles */
body {
font-family: sans-serif;
margin: 50px auto;
max-width: 40em;
padding: 0 20px;
line-height: 1.5
}
</style>
</head>
<body>
<h1>CSS Loading Diagnostic Tests</h1>
<p>This directory contains a variety of files that employ various CSS loading techniques.
Most files reference a CSS file that may include a 5-second server delay to mimic latency, when tested on a node server.
The delay makes it easier to determine if content is rendered before the CSS loads.</p>
<p><a href="recommended.html">Recommended Pattern</a></p>
<h2>Standard Loading Tests</h2>
<ul>
<li><strong><a href="control.html">Link in Head</a>:</strong> Does a link to a stylesheet from the head of the page block page rendering?</li>
<li><strong><a href="body.html">Link in Body</a>:</strong> Does a stylesheet link in the body of the page block all page rendering, rendering of content that comes after it, or not block at all?</li>
<li><strong><a href="import-head.html">@import in Head</a>:</strong> Does an inline @import reference from the head of the page block rendering?</li>
<li><strong><a href="import.html">@import in Body</a>:</strong> Does an inline @import reference from the body of the page block rendering of content below it?</li>
<li><strong><a href="dom-append.html">DOM appendChild</a>:</strong> Create a link element and append to the document.</li>
<li><strong><a href="attributes.html">Link attributes</a>:</strong> Do browsers supporting Subresource Integrity correctly handle link attributes?</li>
</ul>
<h2>LoadCSS Assisted Loading</h2>
<ul>
<li><strong><a href="test.html">loadCSS Dynamic Load</a>:</strong> Stylesheet loaded with loadCSS() dynamically.</li>
<li><strong><a href="test-onload.html">loadCSS Dynamic Load with onload handler</a>:</strong> Same as above with onload script handler.</li>
</ul>
</body>
</html>