Is it possible to access a web page’s unparsed CSS text?

Question

I want to parse the CSS files that are loaded with an HTML page but I don’t want to make AJAX calls to reload the CSS files that have already been loaded. Is there any way to access the pages unparsed CSS text?

For example, it would allow one to access -moz-* declarations in Safari.

Answer 1

I think you want to look at document.styleSheets.

Answer 2

Did you actually try to get it by AJAX? Most likely it will be loaded from browsers cache.

Answer 3

You could load your CSS using AJAX.

1. Load your CSS
2. Parse the CSS
3. Inject the CSS into the DOM (in full or in part)

This can be done using LazyLoad:

"LazyLoad is a tiny (only 1,541 bytes minified), dependency-free JavaScript library that makes it super easy to load external JavaScript and CSS files on demand."

Answer 4

Ivan said:

Did you actually try to get it by AJAX? Most likely it will be loaded from browsers cache.

Mazniak said:

Loading by AJAX always results in at minimum an HTTP request having to be sent and returned, plus the time to load the CSS file if the response code is not something like a 304. I really don’t want any extra latency as I want to modify some styles before the page loads

I say... why not just override the styles you want to change? For example:

/* here is your normal css: styles.css */
body {
    color: black;    
}

/* and you want to switch to red text instead... */

/* dynamically add this on page load */
body {
    color: red !important;
}