Jump to:

17452 Posts in 4473 Topics by 1971 members

Archive

SilverStripe Forums » Archive » Incorrectly placed conditional comments for IE6-7

Our old forums are still available as a read-only archive.

Moderators: martimiz, Sean, biapar, Willr, Ingo, simon_w

Page: 1
Go to End
Author Topic: 1784 Views
  • mocsa
    Avatar
    Community Member
    3 Posts

    Incorrectly placed conditional comments for IE6-7 Link to this post

    Hi folks,
    I have the following interesting problem. Like most people, I want to use conditional comments in my Page.ss template to cater for IE bugs like this:

    <head>
    ...
    <!--[if lte IE 7]>
    <link href="ie_patches.css" rel="stylesheet" type="text/css" />
    <![endif]-->
    </head>


    I also add custom css files to my page in Page.php like this:

    class Page_Controller extends ContentController {
    function example() {
    Requirements::css("typography.css");
    }
    }


    The problem is that no matter what I do, typography.css will end up AFTER the conditional comment in the generated page.

    <head>
    ...
    <!--[if lte IE 7]>
    <link href="ie_patches.css" rel="stylesheet" type="text/css" />
    <![endif]-->
    <link rel="stylesheet" type="text/css" href="typography.css" >
    </head>


    I looked at the source of the Requirements class and I noticed that after it assembles the list of required css files, it simply does a eregi_replace() for the closing </head> tag (see file sapphire\core\Requirements.php line 220, I'm using 2.2.2). Of course, I want the conditional comment to appear LAST so that when it comes into effect it overrides the declarations in typography.css. But because of the logic in the Requirements class, it is impossible to do.
    I'd appreciate any suggestions on how can I make the conditional comment appear last? This is one of the last problems I need to solve before my site can go live.
    Thank you

    Csaba

  • Willr
    Avatar
    Forum Moderator
    5464 Posts

    Re: Incorrectly placed conditional comments for IE6-7 Link to this post

    Yes this is one of the issues with Requirements. A simple solution is just to use higher CSS Selectors in the conditional stylesheet. Eg if you have "#Content .class { blah}" in your conditional stylesheet I normally get round it by doing "html #Content .class" which even tho it comes before the normal stylesheet it has a higher specificity.

    Or you can include the IE stylesheet via requirements aswell (which would therefore keep the stack order)

    function init() {
    parent::init();
    Requirements::css( project() . "/css/default.css");
    if($pos = strpos( $_SERVER[ 'HTTP_USER_AGENT' ], 'MSIE' ) ) {
    Requirements::css( project() . "/css/ie.css");
    $version = substr( $_SERVER[ 'HTTP_USER_AGENT' ], $pos + 5, 3 );
    if( $version < 7 ) {
    Requirements::css( project() . "/css/ie6.css");
    }
    if( $version < 6 ) {
    Requirements::css( project() . "/css/ie5.css");
    }
    }
    }
    }

  • mocsa
    Avatar
    Community Member
    3 Posts

    Re: Incorrectly placed conditional comments for IE6-7 Link to this post

    Will,
    Thanks for your suggestions. I'd go for adding an additional Requirements call in my code since my css files are already complex enough. However, I'll need to be extra careful to put this call in a method which ensures that the IE requirements will be last in the stacking order. This is also quite risky because I might add another Requirements call later somewhere else which might mess up the carefully crafted stacking order.
    However, on the long run, I would suggest the introduction of a special tag (something like <% Requirements %>) which will be replaced by requirements in the template, instead of 'replacing' the </head> tag. Actually, I have tought of doing it myself by modifying the core code.
    An other solution would be to introduce a special method in the Requirements class which wraps the requirement in an IE conditional comment. The user could supply the condition in a parameter ("lte IE7" in my case). The method could even ensure that such requirements are always added to the end of the chain.
    Csaba

    1784 Views
Page: 1
Go to Top

Want to know more about the company that brought you SilverStripe? Then check out SilverStripe.com

Comments on this website? Please give feedback.