Giters

micahwave / loadCSS

A function for loading CSS asynchronously

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

loadCSS

A function for loading CSS asynchronously [c]2014 @scottjehl, Filament Group, Inc. Licensed MIT

Usage

Place the loadCSS function inline in the head of your page (it can also be included in an external JavaScript file if preferable).

Then call it by passing it a stylesheet URL:

<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>

Optional Arguments

  • before: By default, your stylesheet will be inserted before the first script tag in the DOM (which may be the one shown above). This is risky because users' browser extensions can place scripts in the head of your page and unintentionally change the insertion point for the CSS, which can mess up your intended CSS cascade. If possible we recommend, using the optional before argument to specify a particular element to use as an insertion point. The 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. 
    

    • 



...
<script id="loadcss">
  // include loadCSS here...
  function loadCSS( href, before, media ){ ... }
  // load a file
  loadCSS( "path/to/mystylesheet.css", document.getElementById("loadcss") );
</script>

...

```

    

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

  • callback (deprecated): pass an onload callback. Instead of using this callback, we recommend binding an onload handler to the returned link element by using the onloadCSS function in this repo.
    • 



Using with onload


Include onloadCSS function on your page.


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 in most any JavaScript-capable browser, but some older browsers will still 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 first 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 native way 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!


About
A function for loading CSS asynchronously
License:MIT License
Languages
Language:JavaScript 79.7%Language:HTML 14.3%Language:CSS 6.0%