CODEWITHSUNDEEP
c#cssasp.net-mvc
Pomster
Pomster

Reputation: 15207

Where and how do i call different CSS for different browsers in my MVC website?

I am developing a website and have noticed that it does not preform correctly on all the browsers.

I Would like to create a different CSS style sheet for each browser, mainly IE.

My problem comes in on how to call the different style sheets with the different browsers.

I also cant find where the main site.css is called in my MVC website, if someone could show me where the site.css is called in a MVC website that would be great.

So where and how do i call different style sheets for different browsers in a MVC website?

Upvotes: 5

Views: 4718

Answers (4)

Matthew Layton
Matthew Layton

Reputation: 42390

Your approach is actually not best practice. You should not target specific browsers, rather you should target standards (e.g. HTML5 & CSS3).

If you believe that your target audience is likely to use older browsers, then target HTML4 and CSS2.

Also...consider using CSS normalization, as opposed to having different stylesheets for different browsers.

From personal (and indeed professional) experience, I have found that when using CSS normalization, if I even have to write a browser specific stylesheet, then my global stylesheet is poorly implemented...therefore its better to build something on top of CSS normalization that works globally, than writing hacks for browsers!

Google : HTML5 Boilerplate | CSS Normalization

You might like to try here... http://html5boilerplate.com/

Another bit of research you might like is Google Chrome Frame

Upvotes: 2

Fred
Fred

Reputation: 21

You can try this for IE:

<!--[if IE]>
According to the conditional comment this is IE<br />
<![endif]-->
<!--[if IE 6]>
According to the conditional comment this is IE 6<br />
<![endif]-->
<!--[if IE 7]>
According to the conditional comment this is IE 7<br />
<![endif]-->
<!--[if IE 8]>
According to the conditional comment this is IE 8<br />
<![endif]-->
<!--[if IE 9]>
According to the conditional comment this is IE 9<br />
<![endif]-->
<!--[if gte IE 8]>
According to the conditional comment this is IE 8 or higher<br />
<![endif]-->
<!--[if lt IE 9]>
According to the conditional comment this is IE lower than 9<br />
<![endif]-->
<!--[if lte IE 7]>
According to the conditional comment this is IE lower or equal to 7<br />
<![endif]-->
<!--[if gt IE 6]>
According to the conditional comment this is IE greater than 6<br />
<![endif]-->
<!--[if !IE]> -->
According to the conditional comment this is not IE<br />
<!-- <![endif]-->

Note the special syntax:

gt: greater than
lte: less than or equal to

Upvotes: 2

robasta
robasta

Reputation: 4701

Using a browser specific stylesheet is no different in ASP .NET MVC. You put the if statement and point to the stylesheet. See more here. You can put your stylesheet statements in the _Layout.cshtml file in the Views\Shared folder

In ASP .NET MVC, the stylesheet is in the Content folder.

ASP .NET MVC 4 uses Minification and Bundling. Look inside the App_Start folder, you will see a BundleConfig.cs file, and inside, you will see the bundles that contain the css and javascript. In the _layout.cshtl file, you will see code that references these bundles ,which is something like @Styles.Render("~/Content/css").

"So where and how do i call different style sheets for different browsers in a MVC website?"

In the Layout file which has your <head> tags. like this:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>@ViewBag.Title - My ASP.NET MVC Application</title>
        <link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
        <meta name="viewport" content="width=device-width" />
        @Styles.Render("~/Content/css")
        @Scripts.Render("~/bundles/modernizr")
        <!--[if IE]>
        <link rel="stylesheet" type="text/css" href="iespecific.css" />
        <![endif]-->

    </head>
    ....

Upvotes: 4

Damien Overeem
Damien Overeem

Reputation: 4529

Use conditionals:

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

or

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

or

<!--[if gte IE 6]> (greater then IE6)
<link rel="stylesheet" type="text/css" href="iespecific.css" />
<![endif]-->

I have no clue where your css would be located in "MVC website", since i have no clue what framework you are using.

Upvotes: 3

Related Questions