Serving alternative CSS based on browser

I would like to serve a specific CSS if the visitor's browser is IE8 or below, and otherwise, serve  a different CSS.  However, since conditional comments are deprecated in IE10, I'm not sure how to accomplish this.  I've succeeded in getting this to work, as long as the page is opened in IE9 or below.  But the desired CSS is not loaded in IE10.
ddantesAsked:
Who is Participating?
 
käµfm³d 👽Connect With a Mentor Commented:
You may need to also add in a downlevel-revealed comment as well to account for not using your IE 10 stylesheet.

e.g.

<![if gt IE 8]>
    <link href="css/ie10.css" rel="stylesheet" type="text/css" />
<![endif]>
<!--[if (IE 8)]>
    <link href="css/view.css" rel="stylesheet" type="text/css" />
<![endif]-->

Open in new window


The "revealed" comment removes the hyphens ( -- ) in the special tags. This means that modern browsers should ignore the unfamiliar HTML tag (since it's no longer an HTML comment), and they should process the inner <link> tag. "gt" means "greater than". So if the browser is greater than IE 8, the first CSS should be served.
0
 
GaryCommented:
I cannot understand why you would need specific css for just IE10 (even IE9)?

Conditional comments are only there to override your general css, for IE10 (9) this should not be required.
0
 
ddantesAuthor Commented:
The page in question has a javascript plugin which automatically scrolls a very large image horizontally.  A CSS fluidly resizes that scrolling image, based on the visitor's viewport, and also serves a different font for mobile browsers. This appears to work fine under all browsers I've tested, except IE8, and 9% of visitors to my website use IE8.  That CSS somehow results in an excruciatingly-slow scroll in IE8, to the point where it is unacceptable.  The scrolling speed is normal, under IE8, without the fluid image resizing.  So I would like to avoid invoking that fluid CSS if the browser is lte IE8.
0
What Kind of Coding Program is Right for You?

There are many ways to learn to code these days. From coding bootcamps like Flatiron School to online courses to totally free beginner resources. The best way to learn to code depends on many factors, but the most important one is you. See what course is best for you.

 
GaryCommented:
Not really a css issue.
Is there a link to the page?
What plugin are you using?
0
 
ddantesAuthor Commented:
The page is at http://mauitradewinds.com/FluidImageTest/view.htm   The plugin is called 360sc3.js   I'd prefer not to digress on the subject of which plugin to apply for this application.  The reason I thought this was a CSS issue is that the page hardly scrolls under IE8, except if a different CSS is invoked, which doesn't involve fluid image resizing.
0
 
GaryCommented:
Try using this doctype.
<!DOCTYPE html>
0
 
käµfm³d 👽Commented:
IE 10 should display (based on my readings) your page just fine. So you really only need the comment for IE 8 (maybe 9, but it seems to work fine for me in 9). That said, the fact that IE 10 doesn't support conditional comments is just fine for your needs. You can use the downlevel-hidden comment to add in your special CSS:

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

Open in new window


Because the comment starts with "<!--" it will appear as any regular HTML comment. Since IE 10 doesn't support conditional comments, it too will see an HTML comment. IE 8 and 9, however, do support conditional comments, and they will see this as a special tag to process. Basically, this functionality works just the way it always did--the difference is now IE 10 is treated like Chrome or Opera or Firefox in that it does not recognize the conditional comment.
0
 
ddantesAuthor Commented:
GaryC123:  Thank you for your suggestion.  I replaced the DOCTYPE, but under IE8, the scrolling speed is almost imperceptible.

kaufmed:  Thanks for your comment and explanation.  I'll post again after implementing the downlevel hidden comment.
0
 
GaryCommented:
Add an overflow:hidden to the container.
This may be the cause...but at least it stops your page being 5000px wide.
0
 
ddantesAuthor Commented:
This is still  a work in progress.  At http://mauitradewinds.com/FluidImageTest/view.htm  is a page without the downlevel hidden comment.  It works fine in IE9, IE10 and non-IE browsers, but hardly scrolls under iE8.  At http://mauitradewinds.com/FluidImageTest/test.htm is the same page, but with a downlevel hidden comment:
<!--[if (IE 8)]>
<link href="css/view.css" rel="stylesheet" type="text/css" />
<![endif]-->
This hasn't solved the issue of the image hardly scrolling under IE8.  I've probably overlooked or misunderstood something, but it seems like both the intended and unintended CSS files are invoked in this case.
0
 
ddantesAuthor Commented:
Gary:  I'm unsophisticated at this, so please specify where to insert "overflow:hidden".
0
 
ddantesAuthor Commented:
That did it.  Thanks to both experts.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.