Question:

Is there a Javascript code that would allow me to show a different css style depending on the browser?

by | earlier

Is there a Javascript code that would allow me to show a certain css style if the person was using Firefox and another if they were using Firefox??

Tags:

Report

Answer The Question I've Same Question Too

Follow Question

2 ANSWERS

Sort By: Date | Rating

You shouldn't use JS to fix CSS problems

You can use IE conditional



Other browser specific CSS selectors

http://www.sitepoint.com/article/browser...

Or my personal fail safe method is user agent selection

If you have a server running perl(linux server this is easy to setup) you may find this useful:

http://www.scss.com.au/family/andrew/web...

then all CSS targeting can be done server side.

eg

body{

background-color:#ff0000;

-uacss-gecko-background-color:#0000ff;

}

which would have the effect of all browsers will give a red background for the body except those with gecko rendering engine (that Mozilla products eg Firefox) which would have a blue background body

Bottom line is that if you use CSS propery you can fix browser incompatability without JS. Consider what will happen is user has JS turned off, a CSS fix would always work, where as JS fix would be unusable (many companies I've worked with have JS turned off on there internal machines for security reasons, so there sites must be developed minimal JS and for the site to work fully even without JS, this is where CSS solution wins hands down)
Report (0) (0) | earlier
If you mean Firefox vs. IE, yes. There are a number of ways to do this with JavaScript. I offer a couple of prototypes for managing styles. One handles individual CSS declarations:

http://home.comcast.net/~richarduie/samp...

The other manages entire alternate style sheets:

http://home.comcast.net/~richarduie/samp...

However, if you just need to do FF vs. IE things, I recommend that you look into IE's conditional comments. Style the page perfectly for FF and put conditional comments into the page for the differences you want IE to reflect.

http://msdn.microsoft.com/en-us/library/...

Added: Here's a simple sample of the CssManager in action.

<html>

<head>



<link rel="stylesheet" href="default.css" type="text/css" />



<script type="text/javascript" src="CssManager.js"></script>

<script type="text/javascript">

// create a page local instance of the CssManager prototype

var cssMgr = new aryooeye.CssManager();

// call CssManager instance to decide whether to override

// the default style sheet based on the current browser

cssMgr.stylePageByBrowser();

</script>

</head>

<body>

<h2>this header is red in Firefox, blue in IE7, green in IE before 7</h2>

<p>

This is the simplest usage. There are three style sheets named default.css (for Firefox and all browsers other than IE), IE7.css (for IE7), and IE.css (for all versions of IE prior to 7). The creation of the page local object cssMgr from the CssManager prototype automatically handles all of the style inclusions for the page, according to which browser is detected.

</p>

</body>

</html>

These are the contents of the three style sheets.

default.css

~~~~~~~~~~~

h2 { color: red}

IE7.css

~~~~~~~~~~~

h2 { color: blue}

IE.css

~~~~~~~~~~~

h2 { color: green}
Report (0) (0) | earlier