Looking for better hack....

Question

Hello,

I have page for which I want to load different template file for different browsers.

Example :

If browser is IE then load 1.tpl

& If browser is other than IE load 2.tpl

[ Here .tpl is template file having respective content & css ]

I tried using conditional tags :

<!--[if IE]>
{include file="/templates/1.tpl"}       
<![endif]-->

<!--[if !IE]>-->
{include file="/templates/2.tpl"}   
<!--<![endif]-->

With these conditional tags Other browsers are working perfectly fine. But IE still fetching content from both .tpl files resulting messy page.

So I did trick like this...

<!--[if IE]>
{include file="/templates/1.tpl"}  
<![endif]-->

<div id="container">
{include file="/templates/2.tpl"}  
</div>

<script type="text/javascript">
var IE = /*@cc_on!@*/false;
if(IE){
   $("#container").css("display","none");
}
 </script>

At Front-end, This is displaying what I needed,

But at the Back-End IE still have to process content & css of both.tpl And then hide one of them.

This resulting in heavy loading time & Javascript conflict.

I know this is dirty trick I have played.

IS THERE ANY BETTER WAY TO DO THIS ?

Thanks.

EDIT :

{include file="/templates/2.tpl"} is smarty tag which used in template customization files.

Answer 1

Your "not IE" conditional comment is incorrect (reference). Try:

<!--[if IE]>
{include file="/templates/1.tpl"}       
<![endif]-->

<![if !IE]>
{include file="/templates/2.tpl"}   
<![endif]>

Note that the "not" version isn't using the !-- form.

But as David said, the better way to do this is to use a single template that conforms to standards with a bare minimum nod to IE's....eccentricities, and if necessary include an extra template that augments that with some extra code for IE. This not least because since the smarty tags get replaced server-side, you'll always end up sending both templates to all browsers, just with one of them commented-out, which seems wasteful...

Answer 2

Or you could do it using javascript.

function dynamicStyle(){

var ie_href = "ie-style.css"
var other_href = "other-style.css";

var style = document.createElement('link');
style.setAttribute('rel', 'stylesheet');

    if(navigator.appCodeName == 'Microsoft Internet Explorer'){
        style.setAttribute('href', ie_href);    
    }

    else{
        style.setAttribute('href', other_href); 
    }

document.getElementsByTagName('head')[0].appendChild(style);  
}

window.onload = dynamicStyle;