Issue with IE 10 - conditional code ignored

Discussion in 'Web Design and Development' started by Nermal, Oct 23, 2012.

  1. Moderator

    Nermal

    Staff Member

    Joined:
    Dec 7, 2002
    Location:
    Whakatane, New Zealand
    #1
    Hi,

    I have a web app that uses the pointer-events CSS property to provide a "nice to have" but non-essential feature. pointer-events is part of CSS 4 and is supported in all major browsers except for IE.

    My app uses <!--[if lte IE 9]> conditional code to disable this optional feature if the user is running IE (without this, the app is unusable due to the way the elements are layered). I changed this to <!--[if lte IE 10]> but that doesn't work in IE 10; it's just ignored. I've also tried just <!--[if IE]> and while that works in 6 through 9, it still doesn't work in 10.

    How do I set up conditional code in IE 10? Google for "if lte IE 10" is being no help at all so I wonder whether I'm missing something blatantly obvious.

    Any suggestions?

    Thanks :)
     
  2. macrumors 68000

    SrWebDeveloper

    Joined:
    Dec 7, 2007
    Location:
    Alexandria, VA, USA
    #2
    Did you include "<![endif]-->" ? I don't see it in your post above. If so...

    (various sources)

    There are different approaches you can take, for example:

    Link stylesheets based on IE type:

    <!--[if gt IE 9]>
    <link href="ie10_or_later.css" rel="stylesheet">
    <![endif]-->

    or set an HTML class based on IE version so you can easily make variances in your existing stylesheet (this method validates, too):

    <!--[if lt IE 7 ]> <html class="ie6"> <![endif]-->
    <!--[if IE 7 ]> <html class="ie7"> <![endif]-->
    <!--[if IE 8 ]> <html class="ie8"> <![endif]-->
    <!--[if IE 9 ]> <html class="ie9"> <![endif]-->
    <!--[if (gt IE 9)|!(IE)]><!--> <html> <!--<![endif]-->

    Or hack the CSS using "\9" if it's a single style you need adjusted, example:

    .whatever {
    background: gray; /* standard */
    background: pink\9; /* IE 9 and below */
    }

    Please note any time you apply a CSS hack there is a chance it won't be supported in the future, and it may fail validation. I only added this for special situations.
     
  3. thread starter Moderator

    Nermal

    Staff Member

    Joined:
    Dec 7, 2002
    Location:
    Whakatane, New Zealand
    #3
    Yes, I have <![endif]--> in my code; my previous message was an overview of what I'm doing and is not a complete code sample :)

    That information you quoted states that CCs are no longer supported in IE 10 (it's an HTML 5 page). That would explain why it's no longer working. Therefore most of your samples won't work either!

    I could try a CSS hack although as you say it is just that, a hack. I'll have a think and see whether there's any way that I can restructure the page so that pointer-events isn't required, therefore bypassing the problem in the first place.

    Thanks for your help.
     
  4. macrumors 68000

    SrWebDeveloper

    Joined:
    Dec 7, 2007
    Location:
    Alexandria, VA, USA
    #4
    Look closer please. Follow the logic of each sample - it merely exploits what you CAN do to accomplish what you WANT it to do in a workaround manner. :) Sample does not mean work as is - I am demonstrating concepts. Edit to suit your needs.

    In any case, you'll find something eventually now that you know what's supported and some various techniques to fiddle with. If someone else reading this has a better idea, I'm all eyes!
     

Share This Page