Load Different CSS File Based on Browser

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

Different CSS files for Different Browsers

I know only for ie:

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

also js detection

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!

how do i include css based on screen size of the device

If you want to have only one css per page, but in that css file you want to import other css files that have differences based on screen size, you can do it like for example for screens less than 960px

@media screen and (max-width: 960px) 
{

/* your imports */
@import url('/css/styles1.css');
@import url('/css/styles2.css');

}

Also if you want to use only two css files in general, you might want to search for media queries and work on that a little :)

There are different methods for using different styles for different devices and screens, you might find this article useful about that http://css-tricks.com/resolution-specific-stylesheets/

Which says, e.g, you can specify in which screen size you want to show a css file like this;

<link rel="stylesheet" media="screen and (min-device-width: 800px)" href="800.css" />

<link rel='stylesheet' media='screen and (min-width: 701px) and (max-width: 900px)' href='css/medium.css' />

Load different CSS stylesheet with javascript

You should never try to close the document when you use inline script. document.close is only needed if you document.write to an iframe, frame or new window

Also I suggest you test the location.search rather than the href since that is where you placed the flag.

Please try

<script language="javascript" type="text/javascript">
if (location.search.indexOf('app=true') > -1) {
  document.write('<link rel="stylesheet" type="text/css" href="http://blog.meetcody.com/wp-content/themes/standard/appstyle.css" />');
}
</script>

and possibly place that script AFTER the other stylesheets, if you want to override stuff set in one of your 10+ sheets at your site, or better: test the query string on the server, or where you set the query string to app=yes, set something in the session or similar and use that to include the correct css on the server instead of relying on JS

PS: Your body tag has the classes of home and blog on your homepage. I suggest you look to the above mentioned stylesheets and see what the colour is in those for those classes.

PPS: I do not see any media detection here

<link rel='stylesheet' id='standard-activity-tabs-css'  href='/wp-content/themes/standard/lib/activity/css/widget.css?ver=3.4.2' type='text/css' media='all' />
<link rel='stylesheet' id='gcse-widget-css'  href='/wp-content/themes/standard/lib/google-custom-search/css/widget.css?ver=3.4.2' type='text/css' media='all' />
<link rel='stylesheet' id='standard-ad-300x250-widget-css'  href='/wp-content/themes/standard/lib/standard-ad-300x250/css/widget.css?ver=3.4.2' type='text/css' media='all' />
<link rel='stylesheet' id='standard-ad-125x125-widget-css'  href='/wp-content/themes/standard/lib/standard-ad-125x125/css/widget.css?ver=3.4.2' type='text/css' media='all' />
<link rel='stylesheet' id='standard-ad-468x60-css'  href='/wp-content/themes/standard/lib/standard-ad-billboard/css/widget.css?ver=3.4.2' type='text/css' media='all' />
<link rel='stylesheet' id='standard-personal-image-widget-css'  href='/wp-content/themes/standard/lib/personal-image/css/widget.css?ver=3.4.2' type='text/css' media='all' />
<link rel='stylesheet' id='standard-influence-css'  href='/wp-content/themes/standard/lib/influence/css/widget.css?ver=3.4.2' type='text/css' media='all' />
<link rel='stylesheet' id='bootstrap-css'  href='/wp-content/themes/standard/css/lib/bootstrap.css?ver=3.4.2' type='text/css' media='all' />
<link rel='stylesheet' id='bootstrap-responsive-css'  href='/wp-content/themes/standard/css/lib/bootstrap-responsive.css?ver=3.4.2' type='text/css' media='all' />
<link rel='stylesheet' id='standard-css'  href='/wp-content/themes/standard/style.css?ver=3.4.2' type='text/css' media='all' />

Would a browser load a css file multiple times on the same page?

the browser will load twice the css file, but in the second time it will probably cached, so it will be much faster.

the issue is, loading the file is not the only overhead here, because the browser will also need to re parse the css file, and re iterate the DOM tree, to check if any of the nodes in it match the new selectors, and then to apply them.

you are probobly better of including the css file once, and you should also look into css bundling, and minification.

---

Related Topics