Solved

Serving alternative CSS based on browser

Posted on 2013-05-15
12
292 Views
Last Modified: 2013-05-15
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.
0
Comment
Question by:ddantes
  • 6
  • 4
  • 2
12 Comments
 
LVL 58

Expert Comment

by:Gary
ID: 39169946
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
 

Author Comment

by:ddantes
ID: 39169973
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
 
LVL 58

Expert Comment

by:Gary
ID: 39169980
Not really a css issue.
Is there a link to the page?
What plugin are you using?
0
 

Author Comment

by:ddantes
ID: 39169999
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
 
LVL 58

Expert Comment

by:Gary
ID: 39170018
Try using this doctype.
<!DOCTYPE html>
0
 
LVL 74

Expert Comment

by:käµfm³d 👽
ID: 39170042
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
How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

 

Author Comment

by:ddantes
ID: 39170050
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
 
LVL 58

Expert Comment

by:Gary
ID: 39170076
Add an overflow:hidden to the container.
This may be the cause...but at least it stops your page being 5000px wide.
0
 

Author Comment

by:ddantes
ID: 39170115
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
 

Author Comment

by:ddantes
ID: 39170146
Gary:  I'm unsophisticated at this, so please specify where to insert "overflow:hidden".
0
 
LVL 74

Accepted Solution

by:
käµfm³d   👽 earned 500 total points
ID: 39170168
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
 

Author Comment

by:ddantes
ID: 39170185
That did it.  Thanks to both experts.
0

Featured Post

Threat Intelligence Starter Resources

Integrating threat intelligence can be challenging, and not all companies are ready. These resources can help you build awareness and prepare for defense.

Join & Write a Comment

Not sure what the best email signature size is? Are you worried about email signature image size? Follow this best practice guide.
This article discusses four methods for overlaying images in a container on a web page
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
In this tutorial viewers will learn how to embed videos in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <video> tag to insert a video. Define the src as the URL of your video; this is similar to …

708 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

12 Experts available now in Live!

Get 1:1 Help Now