Using Javascript to change external css file at runtime ??

[GiJeet]

hello, is it possible to determine the browser and version using
javascript at runtime and apply a browser specific external .css
file? If so, I'd appreciate code sample so I can see how it's done.

TIA

G

 

[Jeremy J Starcher]

hello, is it possible to determine the browser and version using
javascript at runtime and apply a browser specific external .css file?
If so, I'd appreciate code sample so I can see how it's done.

If you are trying to load a separate style sheet for various versions of
IE, then look up "IE conditional comments."

 

[GiJeet]

...or even have a single stylesheet and just set an id on the body element.
However, depending on what you are trying to accomplish, this is almost
certainly the wrong solution. If you give us more details we may be able to
advise you of a better solution.

sure. different browsers display the same page differently. so
rather then tweak a single css that displays correctly in all
browsers, i figure i could have a separate css for the few different
browser types. i now have code in javascript which fires a function on
the onload event and determines the browser type then sets the version
of css for that browser type at runtime so it displays correctly.
there are only a few different types and i'd rather make 3 or 4
versions of the css then break my hump trying to get one version to
work in all browsers.

however, if you know of a better way, i'm open to suggestions.

TIA
G

 

[Gregor Kofler]

GiJeet meinte:

browsers, i figure i could have a separate css for the few different
browser types.

Normally two. IE and the rest of the world.

i now have code in javascript which fires a function on
the onload event and determines the browser type

Now that's interesting. How do you determine the browser - reliably? And
what if somebody has JS disabled?

however, if you know of a better way, i'm open to suggestions.

Jeremy has already mentioned conditional comments. 100% compatible, easy
to use, perfik!
Or tweak your markup/CSS so you don't need different stylesheets for
each and every browser. "Normal" designs hardly ever need that, anyway.

Gregor

 

[GiJeet]

Now that's interesting. How do you determine the browser - reliably? And
what if somebody has JS disabled?

if user has JS disabled then tons of other stuff won't work either so
with JS off, they may as well not browse the web...

Jeremy has already mentioned conditional comments. 100% compatible, easy
to use, perfik!
Or tweak your markup/CSS so you don't need different stylesheets for
each and every browser. "Normal" designs hardly ever need that, anyway.

hmmm...not sure I like the idea of having my css riddled with tons of
conditional comments. Makes it very hard to read. messy. With
separate css files coded per browser type the code is clean and making
a change in one does not effect the others.

Gi

 

[Gregor Kofler]

GiJeet meinte:

if user has JS disabled then tons of other stuff won't work either so
with JS off, they may as well not browse the web...

I suppose there's reason why quite a few FF extensions for controlling
JS exist.

hmmm...not sure I like the idea of having my css riddled with tons of
conditional comments. Makes it very hard to read. messy.

You need precisely *one*.

<!--[if IE]>
<link type='text/css' rel='stylesheet' href='css/ie.css'>

With
separate css files coded per browser type the code is clean and making
a change in one does not effect the others.

That's precisely what happens with cc.

Gregor

 

[Thomas 'PointedEars' Lahn]

GiJeet meinte:

hmmm...not sure I like the idea of having my css riddled with tons of
conditional comments. Makes it very hard to read. messy.

You need precisely *one*.

<!--[if IE]>
<link type='text/css' rel='stylesheet' href='css/ie.css'>
<![endif]-->

Iff we were living in a nearly perfect world (in a perfect world, there
would not be something like IE in the first place). Currently, with a
more-than-average accessible layout, you would need at least one CC for IE 6
and one for IE 7. But we are getting pretty much off-topic here, are we not?


PointedEars

 

[SneakyWhoami]

GiJeet meinte:

You need precisely *one*.

<!--[if IE]>
<link type='text/css' rel='stylesheet' href='css/ie.css'>
<![endif]-->

Yes and no. There are four types of browsers, really... IE6, IE7/8,
Other Legacy Browsers (NS4, IE4, O4 etc) and "everything else"
...
The guy is not interested in supporting Legacy Browsers (except IE)
which leaves three (types of) browsers.
Only IE will read the IE conditional comments.

Here is the MSDN documentation on them:
http://msdn.microsoft.com/en-us/library/ms537512.aspx
You see, you can filter any IE versions your heart desires.

SO: make a stylesheet. add it to your page. Then add a second
stylesheet and tweak it for IE7. Comment it out conditionally and do
it again for IE6.

This is the way _recommended_ by both _Microsoft_ AND the W3
Consortium. So in endorsing any other method for doing this, one would
be contradicting industry leaders (who is the W3C? Not just the
standards-setter, but also a collaboration of browser vendors and
others) AND the manufacturer of the browser in question.

This is NOT a problem for javascript! It absolutely isn't. Although
only maybe three percent of humans surf without it, javascript is not
a dead language and browsers are not dead either. If you write a
script to try to sniff out all the versions of all the browsers, you
will fail. Sooner or later you will fail and you shouldn't bother even
designing a layout in the first place.
You, human, do not have an encyclopedia of exactly how every single
version of every single browser reacts in every single situation. And
you don't know what they will do next week. If you had this kind of
information, you wouldn't be asking how to detect browsers in
javascript to offer alternate stylesheets.

Just set it in the proper way and forget it.

Here are some tips for making your page look the same in all browsers:
- use a doctype that triggers standards compliance mode
--- because each browser has a very different quirks mode
- validate all your markup (and your css, actually)
--- because every browser will treat it differently when it
breaks
- separate your behaviour, presentation and structure if you can at
all
--- because you don't bang in a nail with a saw now, do you??

If you follow these rules (which are easy if you haven't formed any
bad habits) you will find that all browsers treat your code almost
exactly the same -- with the notable exception that Internet Explorer
is almost totally unpredictable and can be crashed by CSS. But all the
other browsers will mostly behave.



Anyway, using javascript for something that MUST work is not very
clever. You should make sure it works without javscript (where
possible... I mean you can't make javascript ping pong with no
javascript), and then use javascript to enhance it. Not the other way
around, because javascript changes faster than humans can cope.
Check out dynamic drive for good examples of this.

Or try to find a browser detection script that already detects Google
Chrome. .......
You don't know how next year's browsers will handle it, so use
something that will stand the test of time.

Iff we were living in a nearly perfect world (in a perfect world, there
would not be something like IE in the first place).  Currently, with a
more-than-average accessible layout, you would need at least one CC for IE 6
and one for IE 7.  But we are getting pretty much off-topic here, are we not?

I agree wholeheartedly with all of this!! Definitely! Except for the
getting off topic bit. The original poster THOUGHT that it was a
javascript question, but it wasn't at all.

We're on topic but the thread is in the wrong group.