<head>
...
<script>
  // include loadCSS here...
  function loadCSS( href, before, media ){ ... }
  // load a file
  loadCSS( "path/to/mystylesheet.css" );
</script>
<noscript><link href="path/to/mystylesheet.css" rel="stylesheet"></noscript>
...
</head>

By default, loadCSS will inject the new CSS stylesheet after the last stylesheet or script in the page. This should retain your CSS cascade as you'd expect.

Optional Arguments

before: By default, loadCSS attempts to inject the stylesheet link after all CSS and JS in the page. However, if you desire a more specific location in your document, such as before a particular stylesheet link, you can use the before argument to specify a particular element to use as an insertion point. Your stylesheet will be inserted before the element you specify. For example, here's how that can be done by simply applying an id attribute to your script.

... ... ```

media: You can optionally pass a string to the media argument to set the media="" of the stylesheet - the default value is all.

Using with `onload`

Onload listener support with link elements is spotty, so if you need to add an onload callback, include onloadCSS function on your page and use the onloadCSS function:

function onloadCSS( ss, callback ){ ... }

var stylesheet = loadCSS( "path/to/mystylesheet.css" );
onloadCSS( stylesheet, function() {
	console.log( "Stylesheet has asynchronously loaded." );
});

Browser Support

LoadCSS attempts to load a css file asynchronously, while maintaining the CSS cascade, in any JavaScript-capable browser. However, some older browsers will block rendering while the stylesheet is loading. This table outlines css loading support and async loading support.

Browser	CSS Loads Successfully	CSS Loads without Blocking Render
Chrome Mac (latest and many recent versions)	Yes	Yes
Firefox Desktop (latest and many recent versions)	Yes	Yes
Opera Mac (latest and many recent versions)	Yes	Yes
Safari Mac (latest and many recent versions)	Yes	Yes
Safari iOS (latest and many recent versions)	Yes	Yes
Chrome Android 5.x	Yes	Yes
Chrome Android 4.x	Yes	Yes
Android Browser 2.3	Yes	No
Kindle Fire HD	Yes	Yes
Windows Phone IE 8.1	Yes	Yes
IE 11	Yes	Yes
IE 10	Yes	Yes
IE 9	Yes	Yes
IE 8	Yes	No
IE 7	Yes	No
IE 6	Yes	No

Usage Tips

We typically use loadCSS to load CSS files that are non-critical to the initial rendering of a site. See the EnhanceJS project Readme for examples of how we typically use it to improve page loading performance.

The reason this script is sometimes necessary is because there is no cross-browser means in HTML (currently at least) to load and apply a CSS file asynchronously. CSS references that use either link or import will cause browsers to block page rendering by default while their related stylesheet loads.

Contributions and bug fixes

Both are very much appreciated - especially bug fixes. As for contributions, the goals of this project are to keep things very simple and utilitarian, so if we don't accept a feature addition, it's not necessarily because it's a bad idea. It just may not meet the goals of the project. Thanks!

FAQs

What is fg-loadcss?

Is fg-loadcss popular?

Is fg-loadcss well maintained?

Last updated on 21 Oct 2015

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install