A user in UK report our site is broken. From the captured screen, it is easy to it is because CSS file fail to load. After testing using Webpage Test, I found out the machine in London fail to get the CSS file from MAXCDN. After long comunication with the customer support of CDN and lots of black box remote testing, they confirmed it is some local network error. MaxCDN and I can do nothing but wait until ISP fix the network.

I come up an idea, can we fallback to other CDN automatically if the current one is fail?

Javascript file detection

Actually, it is very common in Javascript files. Many dependency management tools ,like require.js and yepnope.js, have built in CDN fallback feature for javascript. The implementation is very simple. For example, !!window.jQuery can be used to check jQuery is loaded or not.

CSS file detection in fallback.js

CSS have nothing do with javascript, how can we detect the style is loaded or not? From the source code of fallback.js, we can use the style sheets web apis. We can get every single rules in the styleSheets by javascript. In fallback.js, selectorText is used to detect the style sheet. Notices that it use exact string matching, for example, if you only have a rules .css.is.loaded { display: none; } and the checking of .loaded will be fail, because the value of selectorText is .css.is.loaded

Style Sheets API fallback

IE 11 and Edge 14 still not support style sheets api, the fallback.js implementation does not works. In this article, it suggests to have a string match which the background color style: $('body').css('color') !== 'rgb(51, 51, 51)'). It looks not very reliable, as the css need to have exactly the same format as rgb(DD, DD, DD), I have check a few browser and the string format is exactly the same.