/    Sign up×
Community /Pin to ProfileBookmark

CSS/Browser related question

How would I go about using a different source file depending on which browser the user is using?

to post a comment
JavaScript

12 Comments(s)

Copy linkTweet thisAlerts:
@konithomimoFeb 22.2006 — There are many ways. On way is to check what browser they are using, and then just take in the code for your page and replace the source value with the one for their browser.
Copy linkTweet thisAlerts:
@JPNKauthorFeb 22.2006 — What would the code for that be?
Copy linkTweet thisAlerts:
@KravvitzFeb 23.2006 — Don't. User-Agent sniffing is a bad idea.

If you want to give IE5+/Win its own stylesheet than use conditional comments.

[url=http://msdn.microsoft.com/workshop/author/dhtml/overview/ccomment_ovw.asp]About Conditional Comments[/url]

[url=http://www.positioniseverything.net/articles/multiIE.html]Some more information on conditional comments can be found on this page.[/url]

[url=http://www.quirksmode.org/css/condcom.html]QuirksMode.org : Conditional comments[/url]

http://www.google.com/search?q=IE+conditional+comment
Copy linkTweet thisAlerts:
@JPNKauthorFeb 23.2006 — Using that, would the code be:

[CODE]
<!--[if !IE]>
<link type="text/css" rel="stylesheet" href="style.css">
<![endif]-->
<!--[if IE]>
<link type="text/css" rel="stylesheet" href="style2.css">
<![endif]-->[/CODE]


Within the head tag?
Copy linkTweet thisAlerts:
@benycFeb 23.2006 — Why use conditional comments?

IE 5 is the only browser you should need to use a seperate stylesheet for. And who cares about IE 5 users anymore. Anyway, if you do need to cater to them, use Tantek's mid pass filter:

http://css-discuss.incutio.com/?page=BoxModelHack

http://www.tantek.com/CSS/Examples/midpass.html

Also, the underscore hack is a great way to pass specific rules to IE (any version) only.

div {

border: 1px solid red;

_border: 1px solid blue;

}

Will give a blue border in IE, red in every other browser.
Copy linkTweet thisAlerts:
@JPNKauthorFeb 23.2006 — Well, I'm using an external style sheet, and when I viewed it in Firefox, it worked fine, but when I viewed it in IE, the text was huge.
Copy linkTweet thisAlerts:
@KravvitzFeb 23.2006 — Using that, would the code be:

[CODE]
<!--[if !IE]>
<link type="text/css" rel="stylesheet" href="style.css">
<![endif]-->
<!--[if IE]>
<link type="text/css" rel="stylesheet" href="style2.css">
<![endif]-->[/CODE]
[/QUOTE]

No. The stylesheet for other browsers can not be in the conditional comment because they think it is a normal HTML comment and ignore it.

Within the head tag?[/QUOTE]
Yes.

Why use conditional comments?[/code]

Because it is a safe way to give rules to IE5+/Win. You can even specify which versions will use the rules. They have fixed several of the bugs that were in IE6 so several CSS hacks will not work in IE7.

IE 5 is the only browser you should need to use a seperate stylesheet for. And who cares about IE 5 users anymore.[/QUOTE]
"should need"... well IE6 is still buggy and lacks support for much of CSS2.

There is still a significant number of IE5 users. Ignoring them is a bad idea in my book.

Anyway, if you do need to cater to them, use Tantek's mid pass filter:

http://css-discuss.incutio.com/?page=BoxModelHack

http://www.tantek.com/CSS/Examples/midpass.html[/QUOTE]

Yes, there are plenty of CSS hacks available. Use them carefuly.

http://css-discuss.incutio.com/?page=CssHack

http://centricle.com/ref/css/filters/

http://www.dithered.com/css_filters/css_only/

Also, the underscore hack is a great way to pass specific rules to IE (any version) only.

div {

border: 1px solid red;

_border: 1px solid blue;

}

Will give a blue border in IE, red in every other browser.[/QUOTE]

That's not valid CSS.
Copy linkTweet thisAlerts:
@JPNKauthorFeb 23.2006 — Kravitz: So what would I put there if firefox ignores them as comments? If I leave the Firefox tag out of the comments, and open it in IE, it'll have two <link> tags.
Copy linkTweet thisAlerts:
@KravvitzFeb 23.2006 — So?

Just make sure that the rules for IE will override the rules for other browsers when necessary.

Remember, the C in CSS stands for cascading.
Copy linkTweet thisAlerts:
@benycFeb 23.2006 — div {

border: 1px solid red;

_border: 1px solid blue ;

}

It may not validate. But it fits the spec (http://www.w3.org/TR/CSS21/syndata.html#tokenization).

And really, what is the point of validation. There are plenty of reasons to write markup/css that doesn’t validate. I think it’s more important to understand the ramifications of the markup/css choices you make, and to have valid reasons for making those choices, than it is to write code that validates for the sake of validation.

But thats just me.

And, how is an IE conditional comment any less hack-y then a CSS hack.
Copy linkTweet thisAlerts:
@KravvitzFeb 23.2006 — A lot of the CSS hacks are based on bugs or lack of support for something in one browser or another. Bugs can be fixed and support can be added.

I agree, validating for the sake of validation is silly.

CSS2.1 is only a working draft.
Copy linkTweet thisAlerts:
@JPNKauthorFeb 23.2006 — Alright. I can get it from here now. Thanks for your help.
×

Success!

Help @JPNK spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 5.4,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,

tipper: @Samric24,
tipped: article
amount: 1000 SATS,
)...