Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

Serving alternative CSS based on browser

Posted on 2013-05-15
12
Medium Priority
?
298 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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
Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

 

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 75

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
 

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 75

Accepted Solution

by:
käµfm³d   👽 earned 2000 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

New feature and membership benefit!

New feature! Upgrade and increase expert visibility of your issues with Priority Questions.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article explains how to prepare an HTML email signature template file containing dynamic placeholders for users' Azure AD data. Furthermore, it explains how to use this file to remotely set up a department-wide email signature policy in Office …
A while back, I ran into a situation where I was trying to use the calculated columns feature in SharePoint 2013 to do some simple math using values in two lists. Between certain data types not being accessible, and also with trying to make a one to…
The viewer will learn how to dynamically set the form action using jQuery.
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…

721 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