CODEWITHSUNDEEP
javascripthtmlcssdom
mazniak
mazniak

Reputation: 5879

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

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.

Upvotes: 3

Views: 344

Answers (4)

Daniel Vassallo
Daniel Vassallo

Reputation: 344311

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

Upvotes: 5

nickf
nickf

Reputation: 546055

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

Upvotes: 0

Ivan Nevostruev
Ivan Nevostruev

Reputation: 28723

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

Upvotes: 1

Annie
Annie

Reputation: 6631

I think you want to look at document.styleSheets.

Upvotes: 2

Related Questions