1

I'd like to be able to run a regex over all the CSS files that are loaded on a page for an internal tool. This allows me to lint the CSS files and check for any conflicting declarations.

This works fine for local files by iterating over document.stylesheets and getting the values of cssRules.

However, for CSS that is loaded from external sites such as Typekit, Google Fonts etc returns null for cssRules (see image).

cssRules

I tried using JSONP to get the file, but it returns an invalid token as it is presumably expecting JSON and is getting CSS in response. Is there a way around this that I have not considered yet?

For completeness, here is the JSONP test I tried:

$.ajax({
    type: 'GET',
    url: "path/to/file.css",
    jsonp: "callback",
    dataType: "jsonp",
    success: function(response) {
        var test = JSON.stringify(response);
        console.log(test);
    }
});

Is it possible to get the CSS from these stylesheets as a string which I can pass through my regex?

sideshowbarker
  • 81,827
  • 26
  • 193
  • 197
Joe W
  • 998
  • 6
  • 16
  • 36
  • 1
    There is no way around this, css is not JSON, nor is it JSONP, and unless cross origin sharing is enabled by the host you're getting the files from, you can't get them with clientside javascript. – adeneo Dec 16 '14 at 21:33
  • You could create a PHP script which fetches a stylesheet using (curl, for example), the returns it to your page (via AJAX) for you to process. – James Hibbard Dec 16 '14 at 21:53

1 Answers1

0

try to use complete css link and just use url attribute for ajax.

Demo : jsFiddle

$.ajax({
    url:"//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.1/css/bootstrap-theme.min.css"
})
.done(function(result){
    $('.style').html(result);
});


    

.style {
  max-width: 300px;
  max-height: 300px;
  overflow:auto;

<div class="style"></div>
Community
  • 1
  • 1
rasah_dipikir_jerojero
  • 155
  • 5