Loading different stylesheets for different browsers

Andries · Sep 8, 2003

I would like my pages to load a specific stylesheet determined by what
browser the pages will be displayed on. I have found scripts to tell
me exactly what browser, version etc. is being used, but I am a bit
confused on exactly what the code should look like to choose the
correct stylesheet file.

Any help?

Chris Morris · Sep 8, 2003

I would like my pages to load a specific stylesheet determined by what
browser the pages will be displayed on. I have found scripts to tell
me exactly what browser, version etc. is being used, but I am a bit
confused on exactly what the code should look like to choose the
correct stylesheet file.

Advice - don't do this. The HTTP User-Agent: header is not mandatory,
and may be incorrect even when it does exist. Depending on the
capabilities of your script, it may even incorrectly detect
identifiable agents such as Opera. Many browsers identify themselves
as something else and you can't tell the difference with the UA
header.

Instead, use the browsers' CSS-parsing capabilities to determine which
CSS they get to render. This way, you only need one stylesheet.

http://www.w3development.de/css/hide_css_from_browsers/

Toby A Inkster · Sep 8, 2003

Chris said:
http://www.w3development.de/css/hide_css_from_browsers/

Furthermore, these techniques may help eliminate (network, rather
than local) caching problems.

Sean Jorden · Sep 8, 2003

Instead, use the browsers' CSS-parsing capabilities to determine which
CSS they get to render. This way, you only need one stylesheet.

http://www.w3development.de/css/hide_css_from_browsers/

Here's a question... I want to hide a CSS entry on the HTML tag itself from
IE. Since this is the top of the tree, I don't think child selectors will
work. Any ideas?

Toby A Inkster · Sep 9, 2003

Sean said:
Here's a question... I want to hide a CSS entry on the HTML tag itself from
IE. Since this is the top of the tree, I don't think child selectors will
work. Any ideas?

Give the HTML a class or ID or some other attribute:

e.g. <html class="foobar">
<html id="foobar">
<html foo="bar">

and then use an attribute selector in the style sheet:

html[class=foobar] { color: red; }
html[id=foobar] { color: red; }
html[foo=bar] { color: red; }

In browsers that understand this syntax (only Opera and Gecko AFAIK), this
will count as more specific than just 'html {...}' in CSS and over-ride
any declarations made there. However, 'html.foobar {...}' and
'html#foobar {...}' are even more specific than that, so will over-ride
'html[class=foobar] {...}' and 'html[id=foobar] {...}'.

Sean Jorden · Sep 9, 2003

Give the HTML a class or ID or some other attribute:

doh! for some reason I was giving <HTML> special status in my mind, it
didn't even occur to me that it could have and id or class. thanks.

Position absolute different in different browsers	9	May 9, 2010
Link To .MJPG Stream: Different Browsers/Different Results	4	May 16, 2012
Docking electron desktop app above browsers and other applications.	7	Mar 11, 2022
HTML5 in Firefox and other browsers	1	Aug 24, 2012
Load different stylesheets at runtime	2	Mar 19, 2007
Sencha Touch--Support 2 browsers in just 228K!	64	Jul 16, 2010
HTML5 <video> and <audio> support for several browsers	15	Oct 4, 2010
Malicious Coding Help Please	5	Jul 17, 2023

Loading different stylesheets for different browsers

Andries

Chris Morris

Toby A Inkster

Sean Jorden

Toby A Inkster

Sean Jorden

Ask a Question

Similar Threads

Members online

Forum statistics

Latest Threads