How to Call Browser Based CSS

how to call browser based css?

There are two ways:

Client side: you need to use Javascript to detect the browser and import the appropriate CSS style. Have a look at this article. (link no longer available)

Server side: you need to detect the user agent and serve the appropriate HTML. Here's a PHP source link for this.

Is there a way to set any style for a specific browser in CSS?

For example, if I want to set the corner radius in Webkit, Firefox and other than I can use the following CSS

No, that isn't how it works.

Vendor prefixed properties are used for experimental features. Either because the specification for the property hasn't been locked down or because the browser implementor knows their are problems with the implementation.

In general, you shouldn't use them in production code because they are experimental.

Support for the vendor prefixed versions is removed as support stabilises.

Is there a way to set any style for a specific browser in CSS?

There are several methods that have been used for that effect.

Parser bugs

By exploiting bugs or unsupported features in specific CSS engines (e.g. some versions of IE will ignore a * character on the front of a property name while other browsers will (correctly) discard the entire rule).

Conditional comments

Older versions of Internet Explorer supported an extended HTML comment syntax that could be used to add <link> or <style> elements specifically for certain versions of IE.

Support for this has been dropped.

JavaScript

Classes can be added to elements (typically the body element) using JavaScript after doing browser detection in JS.

Different CSS for each browser?

Ideal solution you want does not exist:

Unfortunately, a cross browser solution does not exist IF you are trying to do it on the HTML itself. However, it will work for most versions of IE. Like such:

<!--[if IE]>
<link rel="stylesheet" type="text/css" href="includes/myIEGeneralStyle.css" />
<![endif]-->
<!--[if IE 6]>
<link rel="stylesheet" type="text/css" href="includes/myIE6Style.css" />
<![endif]-->
<!--[if IE 7]>
<link rel="stylesheet" type="text/css" href="includes/myIE7Style.css" />
<![endif]-->
<!--[if IE 8]>
<link rel="stylesheet" type="text/css" href="includes/myIE8Style.css" />
<![endif]-->

So the best solution:

How about a Javascript solution like such: Browser Detection. Read a bit about this class to better clarify, what that file is basically doing is simply the concept like such:

var browser = navigator.userAgent.toLowerCase().indexOf('chrome') > -1 ? 'chrome' : 'other';

Obviously, it does more than just detect type of browser. In fact, it knows the version, OS, and much more detail that you can read about in that link. But, it does go and check all the types of browsers by replacing 'chrome' with 'mozilla', 'explorer' and so on...

Then to add your css files, just follow up with conditional statements like so:

if (BrowserDetect.browser.indexOf("chrome")>-1) {
document.write('<'+'link rel="stylesheet" href="../component/chromeCSSStyles.css" />');
} else if (BrowserDetect.browser.indexOf("mozilla")>-1) {
    document.write('<'+'link rel="stylesheet" href="../component/mozillaStyles.css" />');
} else if (BrowserDetect.browser.indexOf("explorer")>-1) {
    document.write('<'+'link rel="stylesheet" href="../component/explorerStyles.css" />');
}

Good luck and hope this helps!

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

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>
    ....

load different css file based on browser

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);
    }

Loading Browser Specific Style Sheets in Modern Browsers

Some suggestions:

Server-side detection

Depending on the server serving the CSS files, you may configure/customize it to serve the file you want depending on the User-Agent header.

Link to CSS depending on the browser

See answer from scunliffe

Single CSS with class on body and overridden rules

Detect the browser, and add a class on the body according to the browser, for example document.body.className += " msie"

Then override the rules you want in your css

body.msie someTag { /*msie specific rules*/ }

---

I recommend to use a library for browser detection, they are usually more tested. I just found WhichBrowser which seems to do that very well.

Put browser specific condition in CSS selector

Try this out:

*line-height:10px;  //* is hack for IE7
line-height:10px\0/;  //\0/ is hack for IE8
line-height:10px\9; //\9 is hack for IE9
//below is the hack for chrome and safari browsers 
@media screen and (-webkit-min-device-pixel-ratio:0)
{
    line-height:10px;
}

---

Related Topics