Different CSS for each browser? - html

Is there a way to load a different CSS file for a specific browser?
like (poor pseudo code):
if firefox
<link rel="stylesheet" type="text/css" href="includes/MyCssFirefox.css" />
if chrome
<link rel="stylesheet" type="text/css" href="includes/MyCssChrome.css" />
if Safari
<link rel="stylesheet" type="text/css" href="includes/MyCssSafari.css" />

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!

You can use conditional comments to target IE browsers. Look at this: http://css-tricks.com/how-to-create-an-ie-only-stylesheet/. To target firefox you can check this answer: https://stackoverflow.com/a/953491/1941910. But I think there's no need to target firefox, chrome or safari, they all do a good job applying CSS.

you can do this at the server end.
if(Request.UserAgent is chrome){
//here output chrome stylesheet
}

Related

Conditional IE8 stylesheet not loaded

I'm having a problem getting my conditional IE8 and below stylesheet to work. I've placed the conditional statement below the regular stylesheet links but with no result.
This is my current setup:
<link rel="stylesheet" type="text/css" media="all and (max-width: 640px)" href="/css/mobile-new.css" />
<link rel="stylesheet" type="text/css" media="all and (min-width:641px) and (max-width: 768px)" href="/css/tablet.css" />
<link rel="stylesheet" type="text/css" media="all and (min-width:769px) and (max-width: 1024px)" href="/css/tablet-landscape.css" />
<link rel="stylesheet" type="text/css" media="all and (min-width:1025px)" href="style.css" />
<!--[if lte IE 8]>
<link rel="stylesheet" type="text/css" href="style.css" />
<![endif]-->
As you can see it should use the regular 'desktop' stylesheet as media queries are not supported in IE8 and below. If I just place
<link rel="stylesheet" type="text/css" href="style.css" />
in the head it works fine and the styles are also displayed in IE8 but I really need to seperate the stylesheets for the mobile/tablet versions.
I've already tried respond.js and css3-mediaqueries.js to skip the conditional stylsheet part but with no result.
Since you are using Internet Explorer 11 trying to emulate Internet explorer 8, you will find that it does a very poor job of it.
Use a site like Browserstack and you can run it from an actual computer running IE8 and then there, you should find that your code now works as it is supporting conditional statements, unlike IE11, which has dropped conditional statements.
You could also try testing IE8 in Windows XP Mode, which is available through Windows Virtual PC.
This Virtual Machine is made by Windows, and comes with IE8, and has helped me personally for testing with IE8.
http://windows.microsoft.com/en-ca/windows7/install-and-use-windows-xp-mode-in-windows-7

CSS not working in IE or Firefox - Chrome works fine

The webpage at
http://144.76.221.141:8000
is showing correct CSS styling in Chrome and Safari, but refuses to show in Firefox or Chrome. I have already seen that adding a doctype is a common fix for this, however this did not help at all with my problem. Any pointers to a solution would be greatly appreciated..
The typeon your stylesheets need to be like the following:
<link type="text/css" href="/css/parent.css" rel="stylesheet">
<link type="text/css" href="/css/landing-page.css" rel="stylesheet">
<link type="text/css" href="/css/dropit.css" rel="stylesheet">
Removing the / at the begining.
Remove the slash in the type of your stylesheet declaration:
<link rel="stylesheet" href="/css/parent.css" type="/text/css" />
to
<link rel="stylesheet" href="/css/parent.css" type="text/css" />
For this declaration that links your CSS
<link href="/css/dropit.css" rel="stylesheet" type="/text/css"></link>
You need to remove the extra slash / on type="/text/css" should be
<link href="/css/dropit.css" rel="stylesheet" type="text/css"></link>
You can write IE only CSS by adding this to your style sheet.
<!--[if IE 8]>
<style>...</style>
<![endif]-->
For further reference you can visit http://www.quirksmode.org/css/condcom.html

ie only stylesheet not working, code included

I coded a website, and obviously when uploaded it to test it, its messing up in IE.
Im trying to insert an IE only stylesheet, but its not working, the code I have is:
<!--[if IE]> <link rel="stylesheet" type="text/css" href="ieonly.css" />
<![endif]-->
Whats going wrong?
Any one can help me, that would be amazing?
On IE everything is getting mis aligned.
Well your syntax seems ok.Try using the developer toolbar to check if the path to your CSS file is right
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="all-ie-only.css" />
<![endif]-->

Need some help attaching different stylesheets to my homepage?

I need a concrete if statement that will work in an .aspx file (default.aspx) that I am building, the file itself serves as my homepage. I have not moved onto further pages. I currently catering for IE8 + 7, FireFox and Chrome.
I seem to be noticing issues in layouts even though in my markup I have this:
<!-- <link rel="stylesheet" type="text/css" href="css/homepageStyes.css" /> -->
<!--[if gt IE 6]>
<link rel="stylesheet" type="text/css" href="css/ie.css" />
<![endif]-->
Whenever I comment out either line of code, my layout problems go away but at the moment I reckon the mark up posted above is not concrete enough in telling a browser which style sheet it is to attach?
I need something along the lines of but in XHTML mark up ofc:
if (browser == "ie" || browser != "ie6") // not supporting ie6
{
// attach this style sheet:
// <link rel="stylesheet" type="text/css" href="css/ie.css" />
}
else
{
// attach this style sheet:
// <link rel="stylesheet" type="text/css" href="css/homepageStyes.css" />
}
I'm a C# developer so this is my first time building a website from scratch. So the C# if statement above was a good way of explaining what I need.
Use these conditional comments:
<!--[if gt IE 6]>
<link rel="stylesheet" type="text/css" href="css/ie.css" />
<![endif]-->
<!--[if !IE]><!-->
<link rel="stylesheet" type="text/css" href="css/homepageStyles.css" />
<!--><![endif]-->
The <!--[if gt IE 6]> comment ensures only IEs newer than version 6 will process and link to ie.css.
The <!--[if !IE]> tells IE to ignore what's in that conditional comment. The <!--> that directly follows is to terminate the if !IE component while maintaining a valid document. Anything past that will be read by other browsers and parsed, so homepageStyles.css will be linked to.
The second <!--> opens a comment so that IE can safely read the <![endif]--> that directly follows.

Conditional comment not working for a <link>

I have a a conditional comment in my page to fix a double padding-top problem with IE7.
I am trying to add "padding-top:5px;" to a DIV only in IE7. The rest of the browsers (including IE6 and IE8) use "padding-top:10px;" contained in stylesheet.css.
stylesheet.css contains
.clImageSamplerText {padding-top:10px;}
stylesheet_ie7.css contains
.clImageSamplerText {padding-top:5px;}
If I use
<link href="stylesheet.css" rel="stylesheet" type="text/css">
<!--[if IE 7]>
<style>.clImageSamplerText {padding-top:5px;}</style>
<![endif]-->
my code works no problem.
If I use
<link href="stylesheet.css" rel="stylesheet" type="text/css">
<!--[if IE 7]>
<link href="stylesheet_ie7.css" rel="stylesheet" type="text/css">
<![endif]-->
it does not work.
Anyone have any ideas?
Just a shot in the dark -- if you are using an XHTML doctype, you might find that closing your <link /> tags will fix the problem.
So try:
<link rel="stylesheet" type="text/css" href="stylesheet.css" />
<!--[if IE 7]>
<link rel="stylesheet" type="text/css" href="stylesheet_ie7.css" />
<![endif]-->
I have included link elements in conditional comments without any problems before, so I don't think it matters that you do that instead of writing it out in a style element. My best guess is that the document is not finding stylesheet_ie7.css. Are you sure it got uploaded to the right place?