All CSS files (array) are loaded instead of just the first in the array

[myhonor16]

The following code loads BOTH css files instead of just the first that successfully loads

'normalize': [
    'https://cdnjs.cloudflare.com/ajax/libs/normalize/2.1.3/normalize.min.css', 
    'css/third-party/normalize-2.1.3.min.css'
]

If it helps i've included a screenshot of the chrome devtools network panel

As you can see both files are loaded

If this was the intended behavior then how would I go about doing this myself?

[myhonor16]

So I've solved my problem by writing some javascript that detects if certain styles have been applied and then loads the local version if the cdn didn't load.

I still want to know if the behavior in my first post is intended or not

[sgarbesi]

@myhonor16 No, it's not intended. It should only load one and not both if the first was successful.

[sgarbesi]

@myhonor16 Try setting the key to be a css attribute within the file.

Ex:

'#test': 'test.css'

Test.css

#test {}

Detecting the CSS is tricky when loading it on the fly. After a CSS file actually loads, it's CSS values are not always immediately present in the document's styleSheets. You sometimes have to wait a few ms for them to appear.

So after complete or loaded is fired, it may have loaded successfully, but since the style is not there (in code terms when it immediately does the check) it poses as a detection problem.

Thoughts?

I have some code rewritten for the next revision to handle this, but I'm hesitant because I'm not sure it will work properly.

[myhonor16]

Well what I did for normalize.css was check for a margin of 0px on the body since normalize applies a margin of 0px to the body
https://github.com/necolas/normalize.css/blob/master/normalize.css#L76

Here's the code I wrote for my html template -> https://github.com/myhonor16/html-template/blob/master/js/normalizeLoad.js

Hope it helps :)

[sgarbesi]

@myhonor16 I'm leaving this open, as it's on the list for the next revision.

I'm working on re-writing the whole library with a full unit test suite along with a CSS plugin to address the issues I previously mentioned.

[danSteinway]

I don't know if this will help any or not, but I came across an implementation of a "is this stylesheet loaded" checker and thought I'd throw it your direction, just in case.

function cssLoaded(href) {
    var cssFound= false;
    for(var i=0;i<document.styleSheets.length;i++) {
        sheet= document.styleSheets[i];
        if((sheet['href'].indexOf(href)>=0)&&(sheet['cssRules'].length>0)) cssFound= true;
    };
    return cssFound;
}

This was part of one of the interim solutions that I came across before stumbling upon your library here. Anyhow, best of luck.

[sgarbesi]

@danSteinway The problem with that block of code is that it doesn't always work (in legacy/current browsers).

If you try lazy loading a decent size stylesheet in Google Chrome, the callback will fire off but the document.styleSheets index will not immediately exist (in turn causing the code to go haywire and load the fallbacks). If you wait X (could be ms, or seconds), it then shows up as you'd expect it to.

I'm assuming this is due to the browsers rendering engine still processing the actual CSS rules into the DOM. The way I figured it to work was by using an interval/timeout and allow users to manually configure how long they deem worthy of waiting for a stylesheet before forcing it to fail out.

Thoughts?

[danSteinway]

Using some kind of setTimeout will generally work. I just don't like using them if at all possible because of the seemingly random nature of the timing of loading external files. Is there a way to attach an onChange event to the document.styleSheets array that would work? That's the only other possibility that has come to mind since my last post.

[sgarbesi]

@danSteinway Not that I'm aware of. That's the main problem with getting this working, it's unreliable. If you had 3 fallbacks for a stylesheet you wouldn't want the script loading all 3 on your website if the first was actually successful.

[sgarbesi]

@myhonor16 Did you try making the key a style attribute from the CSS file? Example:

'template': [
    'https://cdnjs.cloudflare.com/ajax/libs/normalize/2.1.3/normalize.min.css', 
    'css/third-party/normalize-2.1.3.min.css'
]

[sgarbesi]

@myhonor16 Provide a plnkr.

I believe the library is working, you simply need to specify a css style for the CSS you're loading as the key; this way the library can check in browsers such as IE to make sure it was loaded properly.