How could Javascript find what media-type related stylesheet has been selected?

September 1, 2006 3:24 PM

How could Javascript find what media-type related stylesheet has been selected by a Web browser?

I would like a particular piece of Javascript to 1) trigger after external cascading style sheets have been loaded, then 2) figure out, in some fashion, which style sheet has loaded (based on the media type, like "screen" or "handheld"). Essentially, I'm adding a lot of material via the DOM that I don't want cluttering up the HTML for handheld users, or the folks who have no CSS at all.

I'd like to keep this working with Internet Explorer, FireFox, Safari, Opera, etc. Using :before and :after to generate content via a rule like content: url(somejavascriptfunction), then accessing that, won't work for IE 6.0.

I thought about trying to wait a second for the sheets to load (with a timer), then access the style of some element, a style that would be changed by an external style sheet, and then use that as a signal to see which style sheet was loaded. For some reason, I'm failing to access any style that either wasn't 1) inline CSS, 2) added by Javascript later.

Looking at the stylesheet object for the disabled property didn't work, either. althought A List Apart had something that kinda-sorta looked helpful.

I'm out of the obvious ideas, and my Google searches have pointed me mostly at forcing style sheets, rather than figuring out which have been selected by a browser.

posted by adipocere to Computers & Internet (5 answers total)

Can you wait a second (using your timer function) and then call the function getActiveStyleSheet shown here? It basically checks to see if there's a link with an attribute style that's not disabled.
posted by null terminated at 3:33 PM on September 1, 2006

I thought about trying to wait a second for the sheets to load (with a timer), then access the style of some element, a style that would be changed by an external style sheet, and then use that as a signal to see which style sheet was loaded. For some reason, I'm failing to access any style that either wasn't 1) inline CSS, 2) added by Javascript later.

As far as accesing the current applied styles of elements, there's a whole different set of methods you'll want to use. Check out

http://www.quirksmode.org/dom/getstyles.html
posted by alana at 3:40 PM on September 1, 2006

Rather than blindly waiting x seconds, why not use an onLoad() event handler to tell you when the page has finished loading?

The Javascript Theme Switcher here might also give you some ideas for the rest.
posted by Pinback at 4:13 PM on September 1, 2006

(Ah, because IInowRC, onLoad() only waits for the main page to load, not any included styles etc. Silly me, though it'd be worth trying in case I'm wrong or it's changed in the last few years.)
posted by Pinback at 4:18 PM on September 1, 2006

Response by poster: I tried the method from A List Apart and failed miserably. Maybe my implementation is off. I will have to try this out tomorrow and see if I can't get these tips to work. I think the A List Apart method relies on setting styles, then altering the link tag's properties in such a fashion that you can tell what was going on later - which isn't exactly what I want.

Yeah, onload is kind of annoying that way. I was hoping that maybe something weird like ondocumentready would do the job, but I hadn't gotten to that one yet and I haven't found much about it.

It looks like the computed/currentStyles are what I was missing for an appropriate signalling method.

I will report back when I have something solid.
posted by adipocere at 11:30 PM on September 1, 2006