Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to determine if CSS has been loaded?

Tags:

How can i Assert that the CSS for a page has successfully loaded and applied its styles in Watin 2.1?

like image 490
Erik Funkenbusch Avatar asked May 10 '12 15:05

Erik Funkenbusch


People also ask

How are CSS files loaded?

The CSS file will be downloaded when the HTML file is parsing. The DOM(document object model) will be created by browser. DOM means the reference of the all the elements in the in HTML file. The parsing of the CSS will occur in two steps.

How do I check my CSS stylesheet?

On Chrome's Developer Tools tab (CTRL + SHIFT + I), go to Resources (you may have to enable Resource tracking on that page), and click on the sub-tab Stylesheets. That will show all css files loaded by that page.

Can CSS be loaded in body?

Unlike A , it may only appear in the HEAD section of a document, although it may appear any number of times.” In HTML5 it's totally OK to put a <link> or <style> in <body> . In fact, you can even have scoped <style> s that apply only to a part of your document!


1 Answers

After doing some research and writing up my answer, I stumbled upon this link that explains everything you need to know about CSS, when it is loaded and how you can check for it.

The link provided explains it so well, in fact, that I'm adding some quotes from it for future reference.
If you're curious, my answer was going to be #2 and a variation of #4.

When is a stylesheet really loaded?

...

With that out of the way, let's see what we have here.

// my callback function  // which relies on CSS being loaded function CSSDone() {     alert('zOMG, CSS is done'); };  // load me some stylesheet  var url = "http://tools.w3clubs.com/pagr/1.sleep-1.css",     head = document.getElementsByTagName('head')[0],     link = document.createElement('link');  link.type = "text/css";  link.rel = "stylesheet"; link.href = url;  // MAGIC  // call CSSDone() when CSS arrives head.appendChild(link); 

Options for the magic part, sorted from nice-and-easy to ridiculous

  1. listen to link.onload
  2. listen to link.addEventListener('load')
  3. listen to link.onreadystatechange
  4. setTimeout and check for changes in document.styleSheets
  5. setTimeout and check for changes in the styling of a specific element you create but style with the new CSS

5th option is too crazy and assumes you have control over the content of the CSS, so forget it. Plus it checks for current styles in a timeout meaning it will flush the reflow queue and can be potentially slow. The slower the CSS to arrive, the more reflows. So, really, forget it.

So how about implementing the magic?

// MAGIC   // #1    link.onload = function () {     CSSDone('onload listener'); };     // #2    if (link.addEventListener) {     link.addEventListener('load', function() {         CSSDone("DOM's load event");     }, false);    };     // #3    link.onreadystatechange = function() {     var state = link.readyState;     if (state === 'loaded' || state === 'complete') {         link.onreadystatechange = null;         CSSDone("onreadystatechange");     }    };  // #4    var cssnum = document.styleSheets.length; var ti = setInterval(function() {     if (document.styleSheets.length > cssnum) {         // needs more work when you load a bunch of CSS files quickly         // e.g. loop from cssnum to the new length, looking         // for the document.styleSheets[n].href === url         // ...          // FF changes the length prematurely :(         CSSDone('listening to styleSheets.length change');         clearInterval(ti);     }    }, 10);  // MAGIC ends 
like image 140
ShadowScripter Avatar answered Sep 19 '22 14:09

ShadowScripter