If the style are appended to the head it works just fine.

Here I am not sure I get why the div is created nor why the span
variable is declared (probably snippet of code and it is use somewhere
else i assumed)

<body>
  <p id="test">This test should have border and padding!</p>
  <script type="text/javascript">
    var div = document.createElement('div');
    // <br/> added to avoid a bug in IE
    div.innerHTML = '<br /><style>#test { border:2px solid #000;
padding:1ex; }</style>';
    var span = div.getElementsByTagName('span')[0];
    document.body.appendChild(div);
  </script>
</body>

But from your plugin you seems to add them to the head in the end,
which should be fine, i tried redoing the above code in JQuery, just
using:

<body>
  <p id="test">This test should have border and padding!</p>
  <script type="text/javascript">
    // <br/> added to avoid a bug in IE
    $('head').append('<style type="text/css">#test { border:2px solid
#000; padding:1ex; }</style>');
  </script>
</body>

and it work fine in safari as well. Safari might have issue with
cascading stylesheet injected in the <body> after the DOM is loaded if
they are not in the <head> tag. So basically if some <style> or
<script> are added to head it load them.

For the fcase where you have inline @import('foo.css'); you could
simply convert that to a <link href="foo.css"...> and the problem
might go away.

Also I don't understand:

In Safari and Chrome, the style isn't removed when loading 1) after 3)
or 5).
After 2) or 4) it works ok.

You say the style sin't remove, yet your list show:

1) <p>Default, no style</p>
2) <style type="text/css">#test { color:red; }</style>
3) <link rel="stylesheet" href="remote.css" /> and remote.css #test
{ color:red; }
4) <style type="text/css">@import url("remote.css")</style>
5) <link rel="stylesheet" href="import.css" /> and import.css @import
url("remote.css")

where 1) doesn't actually have a style anyway, so surely it's normal
it doesn't get removed.

Not sure all my newbie advices will help or point you in the right
direction, but thought i share them anyway :)

On Mar 31, 10:08 am, Berny Cantos <xpher...@gmail.com> wrote:
> Hello to all jQuery developers and enthusiasts. This is my first post
> in this list.
> I hope I'm not breaking the rules replying to this two months old
> thread, but I'm highly interested in this topic.
>
> I'm developing an internal web app that makes intense use of AJAH,
> with HTML responses coming from all kind of sources.
> That means I have no control over the presence of <style> tags nor
> <link> ones, but I want to apply them nonetheless.
> Also, I'd like those rules to be cleaned when the related style/link
> tags are removed from the body.
> This could happen if I replace completely the content of the parent
> node i.e. via another AJAH request.
>
> The inconsistencies among browsers are THIS big. Even bigger.
> But I need to be as cross-browser as posible, so I tried feature
> detection on this.
> I finally developed a plugin that modifies $.fn.html to relocate style
> and link tags, but it has some issues.
>
> IE browsers choke on stylesheets containing import declarations.
> Also, removing stylesheets containing import declarations doesn't work
> in Chrome and Safari.
>
> See the code athttp://tinyurl.com/djsmln
>
> I thought this topic would be interesting for lots of web developers,
> but I barely found 1 thread about it.
> Can somebody please help me with this?
> Thanks in advance
>
> Berny
>
> On 6 feb, 12:51, ajp <alistair.po...@gmail.com> wrote:
>
> > Apologies - I was using release 2.0.160.0 of Chrome, not the 1.0
> > branch; but injecting arbitrary styles into the body _does work_ on
> > this build.
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups 
"jQuery Development" group.
To post to this group, send email to jquery-dev@googlegroups.com
To unsubscribe from this group, send email to 
jquery-dev+unsubscr...@googlegroups.com
For more options, visit this group at 
http://groups.google.com/group/jquery-dev?hl=en
-~----------~----~----~----~------~----~------~--~---

Reply via email to