Stylesheet for different browsers

**ta158897** · 08-06-2008, 01:37 AM

Hi,

I am new to web development and getting puzzled by incompatible browsers.

1) Should I have different stylesheets for different browsers? If yes, can I have the piece of code that sniffs the browser and choose appropriate stylesheets?

2) How should I deal the problem for every page? Should I set it in session variable? What is the efficient way to handle this?

Thanks

**jscheuer1** · 08-06-2008, 05:42 AM

If your page is well designed with a valid URL DOCTYPE of HTML 4.01 strict, you should only need one or two stylesheets, at the most three, unless you are trying to also support earlier IE versions (5 and 5.5).

Generally it breaks down like so:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" href="main.css" type="text/css">
<!--[if IE]>
<link rel="stylesheet" href="ie.css" type="text/css">
<![endif]-->
</head>
<body>

</body>
</html>

You can name them whatever you like. The main.css styles will be used by all browsers. The ie.css styles will add to or modify those.

**TheJoshMan** · 08-06-2008, 11:16 AM

Originally Posted by jscheuer1

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" href="main.css" type="text/css">
<!--[if IE]>
<link rel="stylesheet" href="ie.css" type="text/css">
<![endif]-->
</head>
<body>

</body>
</html>

You forgot to mention that since CSS is in Cascading Order, if they want to completely override the styles of the "main.css" file they would need to put the conditional statement ABOVE the link to the "main.css" file.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<!--[if IE]>
<link rel="stylesheet" href="ie.css" type="text/css">
<![endif]-->
<link rel="stylesheet" href="main.css" type="text/css">
</head>
<body>

</body>
</html>

**TheJoshMan** · 08-06-2008, 11:17 AM

This could be important to prevent from having to use a lot of "!important" additives to the attributes.

**Medyman** · 08-06-2008, 12:45 PM

You forgot to mention that since CSS is in Cascading Order, if they want to completely override the styles of the "main.css" file they would need to put the conditional statement ABOVE the link to the "main.css" file.

Actually, the opposite is true. Styles are applied top-down. Something at the bottom of a stylesheet takes precedence over that same style applied at the beginning of a stylesheet.

So, if your intent is to override a style with the IE-specific stylesheet, you should place it BELOW the main stylesheet.

**jscheuer1** · 08-06-2008, 03:34 PM

Originally Posted by Nyne Lyvez

This could be important to prevent from having to use a lot of "!important" additives to the attributes.

Originally Posted by Medyman

Styles are applied top-down. Something at the bottom of a stylesheet takes precedence over that same style applied at the beginning of a stylesheet.

So, if your intent is to override a style with the IE-specific stylesheet, you should place it BELOW the main stylesheet.

Quite correct Medyman. The !important hack and others don't really apply in this situation. Conditional comments are not hacks and do not depend upon either quirksmode or any particular browser quirks from a given version of a browser. In fact, with a valid URL HTML 4.01 strict DOCTYPE as mentioned in my previous post, many browser specific hacks will not work as expected.

**TheJoshMan** · 08-06-2008, 04:17 PM

OOPS! sorry to give wrong info

**allahverdi** · 08-06-2008, 04:31 PM

hmm, what about djr's guide? In tutorials forum. But it is with php. But it helps I think.

**jscheuer1** · 08-06-2008, 05:16 PM

Originally Posted by allahverdi

hmm, what about djr's guide? In tutorials forum. But it is with php. But it helps I think.

No good for browser specific stylesheets, unless you can get the user to tell you what browser they are using (not that bad of an idea). At least as far as I know, PHP cannot reliably detect the user agent (browser). And there could be server side delays (minor to unnoticeable, but this has been a consideration in this thread). You could perhaps use javascript to get that value. However, then you are relying on the client side in an unreliable manner again. Conditional comments have none of these issues. And from the looks of it are easier to implement than what is proposed in djr33's thread (though it is a good method for what he recommends it be used for).

**TheJoshMan** · 08-06-2008, 05:45 PM

Originally Posted by jscheuer1

No good for browser specific stylesheets, unless you can get the user to tell you what browser they are using (not that bad of an idea).

I think it might be a small issue to get the user to input what browser they are using, (not much, but noticeable) as the average Joe who just uses the computer to surf may not know what browser they are using.

I know that they may know the difference between FF and IE and so on, but what if you are trying to implement this for "version specific", I can tell you for a fact that if you asked my mom what version of IE she uses, she'd just look at you with that "deer in the headlights" look. LOL