4

After the document.ready event fires, I load the stylesheet dynamically based on the user's resolution. This is what works in Chrome, Firefox and IE:

var TheFileName = '/SomeDirectory/SomeFileName.css';

if (document.createStyleSheet) { 

    //finally found something IE got right
    document.createStyleSheet(TheFileName);

} else {

    $('<style id="TestCSS" type="text/css"></style>').appendTo('head');

    $.get(TheFileName , function (TheCSS) {

        $("#TestCSS").append(TheCSS);
    });
}

The problem is that it doesn't work in Safari. I don't have a mac so I don't have the console error but all I know is that the stylesheet doesn't get added. What do I need to change to make it work in Safari?

PS: I don't want to use media queries.

Edit

I initially had a function that used a <link> tag that was added. My page is entirely dynamically generated and the problem is that adding the stylesheet after the DOM is rendered makes the elements unstyled if you use a <link> tag. So what I do is use a setTimeout to check for $('#TestCSS').length to see if the stylesheet loaded and then I fire the functions that create the HTML. With a tag, there's no way of knowing when the CSS is attached.

halfer
  • 19,824
  • 17
  • 99
  • 186
frenchie
  • 51,731
  • 109
  • 304
  • 510
  • possible duplicate of [How to load up CSS files using Javascript?](http://stackoverflow.com/questions/574944/how-to-load-up-css-files-using-javascript) – Benjamin Sep 10 '14 at 13:54
  • @Benjamin: no it's not a duplicate because the answer uses a tag. See edit. – frenchie Sep 10 '14 at 14:12
  • There is absolutely no way a style or link tag in the head doesn't also apply to dynamically generated elements. That's the beauty of CSS, it works on all present and future elements. – adeneo Sep 10 '14 at 15:02
  • @adeneo: no, once the HTML is generated, when I add the CSS stylesheet the HTML elements don't have the style. That may not be true in all browsers but that's what I've experienced. – frenchie Sep 10 '14 at 15:11

1 Answers1

9

Why not just insert the stylesheet as a link tag, instead of loading it with ajax, should be cross-browser ?

var link = document.createElement('link');
link.setAttribute('rel', 'stylesheet');
link.type = 'text/css';
link.href = '/SomeDirectory/SomeFileName.css';
document.head.appendChild(link);
adeneo
  • 312,895
  • 29
  • 395
  • 388
  • I had that initially. My page is entirely dynamically generated and the problem is that adding the stylesheet after the DOM is rendered makes the elements unstyled. So what I do is check for $('#TestCSS').length to see if the stylesheet loaded and then I fire the functions that create the HTML. With a tag, there's no way of knowing when the CSS is attached. – frenchie Sep 10 '14 at 13:57
  • Adding a stylesheet with a link or with a style tag, is the exact same thing, there's no way that there's any difference in what elements are styled, unless you're doing something else wrong, and a stylesheet in the head will be applied to dynamically created elements as well, so that's not an issue. – adeneo Sep 10 '14 at 15:00
  • This seems to work. I just remember that for some reason it wasn't working with a link tag and that's why I changed my code around to add a – frenchie Sep 10 '14 at 15:26
  • depending on the use case of course, if you add a script before the body in the head, and can determine what to load from either the url, or some data sent to the client from the server that's placed in a script tag above said script, it will be parsed before the dom renders(so not completely ideal, but hey what real life project is always ideal?) – Kelly Milligan Jul 27 '17 at 13:41