javascript - Adding a stylesheet dynamically -

after document.ready event fires, load stylesheet dynamically based on user's resolution. works in chrome, firefox , ie:

var thefilename = '/somedirectory/somefilename.css';  if (document.createstylesheet) {       //finally found 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 doesn't work in safari. don't have mac don't have console error know stylesheet doesn't added. need change make work in safari?

thanks.

ps: don't want use media queries.

**edit:** 

i had function used <link> tag added. page entirely dynamically generated , problem adding stylesheet after dom rendered makes elements unstyled if use <link> tag. use settimeout check $('#testcss').length see if stylesheet loaded , fire functions create html. tag, there's no way of knowing when css attached.

why not insert stylesheet link tag, instead of loading ajax, should cross-browser ?

var link = document.createelement('link'); link.setattribute('rel', 'stylesheet'); link.type = 'text/css'; link.href = '/somedirectory/somefilename.css'; document.head.appendchild(link);