jquery selection of @import url()

https://github.com/NV/auto_update_stylesheets

I am trying to update this great script to work with cruel css imports like:

<style type="text/css" media="all">@import url("http://192.168.1.238/system.base.css");
</style>

The script only works f开发者_运维知识库or normal inclusions of css like:

<link href="stylesheets/bundle_github.css" media="screen" rel="stylesheet" type="text/css" />

I understand the logic of this script but my problem is how can I select @import url ('foo'), the part inside the url(), in this sample foo. If I know if this is even possible I could fix my problems.

Thank you.

There really isn't a good cross-browser way of doing this. See QuirksMode for details about the way browsers implement CSS rules.

You'll have to identify the correct way to get an @import rule in order to parse it.

For IE, you'll need to get document.styleSheets[0].imports[0] assuming the first style or link rel="stylesheet" reference on your page contains the @import rule as its first rule. Looks like you need to call document.styleSheets[0].removeImport(0); and document.styleSheets[0].addImport("URL"); to modify.

Other browsers would seem to use document.styleSheets[0].cssRules[0] assuming the same structure. For those you'll need to use document.styleSheets[0].deleteRule(0) and document.styleSheets[0].insertRule('@import url("URL")'). Those are standard DOM Level 2 rules; see here.

Hope that helps.