load different css file based on browser

Question

How to load different css based on browser type. I want to load different css for IE and Firefox in asp.net I'm usng IE8 and above and forefox 3 and above. please help me.

score 6 · Accepted Answer · answered Jul 16 '11 at 06:43

6

Request.Browser will give you complete browser information, where you can check version, browser name, browser type etc.

if(Request.Browser.Browser == "IE")
    {
        HtmlLink css = new HtmlLink();
        css.Href = ResolveClientUrl("~/style/StyleSheet.css");
        css.Attributes["rel"] = "stylesheet";
        css.Attributes["type"] = "text/css";
        css.Attributes["media"] = "all";
        Page.Header.Controls.Add(css);
    }

answered Jul 16 '11 at 06:43

Muhammad Akhtar

51,913
37
138
191

Did you check link of Request.Browser, you have get every information from, Secondly I have give you code, how you can include css at runtime. – Muhammad Akhtar Jul 16 '11 at 06:49
In the same you can do for Mozilla and chrome browser, if anyone other as well. – Muhammad Akhtar Jul 16 '11 at 06:54

score 4 · Answer 2 · answered Jul 16 '11 at 06:41

You can use the following css conditional statement to load a css file for IE after the main css file for Firefox and other browsers. This allows you to re-use a lot of the same css code and only overwrite those properties that IE doesn't get right:

<!--[if lte IE 6]>
<link rel="stylesheet" type="text/css" href="styles/browser.css" />
<![endif]-->

The conditional statement above applies to versions of IE less than or equal to IE6, but you can set this to whatever you like.

You can learn more about CSS conditional statements here: http://www.quirksmode.org/css/condcom.html

score 3 · Answer 3 · answered Jul 16 '11 at 06:40

3

Your main CSS should be the one that is supported by most browsers (including Firefox). Then you can use HTML conditional statements to load IE specific stylesheets

    <!--[if gt IE 7]>
    According to the conditional comment this is Internet Explorer greater than IE8<br />
<link rel="stylesheet" type="text/css" href="IEgreatethan7.css">

    <![endif]-->

or if you want to be specific

    <!--[if IE 8]>
    According to the conditional comment this is Internet Explorer equal to IE8<br />
<link rel="stylesheet" type="text/css" href="IE8.css">

    <![endif]-->

answered Jul 16 '11 at 06:40

Michal

13,439
3
35
33

Where should I place this code either in javascript or stylesheet? – Ram Jul 16 '11 at 06:45
Just in html in the head section – Michal Jul 16 '11 at 08:07

score 2 · Answer 4 · answered Jul 29 '11 at 10:24

2

You can use like this.

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

Thanks.

answered Jul 29 '11 at 10:24

Sami

3,956
9
37
52

score 0 · Answer 5 · edited May 23 '17 at 12:11

0

If you google your question, you will find your answer:

Client-side(javascript):

Server-side(asp.net): http://msdn.microsoft.com/en-us/library/3yekbd5b.aspx

Also search on stackoverflow: Browser detection

edited May 23 '17 at 12:11

Community

1
1

answered Jul 16 '11 at 06:47

StefanNch

2,569
24
31

load different css file based on browser

5 Answers5

Linked