Looking for better hack
<p>I have page for which I want to load <strong>different template file</strong> for <strong>different browsers.</strong></p>

<p><strong>Example :</strong></p>

<p>If browser is <strong>IE</strong> then load <strong>1.tpl</strong></p>

<p>&amp; If browser is other than IE load <strong>2.tpl</strong></p>

<p>[ Here <code>.tpl</code> is template file having <strong>respective</strong> content &amp; css ]</p>

<p>I tried using conditional tags :</p>

<pre><code>&lt;!--[if IE]&gt;
{include file="/templates/1.tpl"}       
&lt;![endif]--&gt;

&lt;!--[if !IE]&gt;--&gt;
{include file="/templates/2.tpl"}   
&lt;!--&lt;![endif]--&gt;
</code></pre>

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

<p>So I did <strong>trick</strong> like this...</p>

<pre><code>&lt;!--[if IE]&gt;
{include file="/templates/1.tpl"}  
&lt;![endif]--&gt;

&lt;div id="container"&gt;
{include file="/templates/2.tpl"}  
&lt;/div&gt;

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

<p>At <strong>Front-end</strong>, This is displaying what I needed, </p>

<p>But at the <strong>Back-End</strong> IE still have to <strong>process</strong> content &amp; css of <code>both.tpl</code> And then <strong>hide</strong> one of them.</p>

<p>This resulting in heavy <strong>loading time</strong> &amp; Javascript <strong>conflict</strong>.</p>

<p>I know this is <strong>dirty trick</strong> I have played.</p>

<p>IS THERE ANY <strong>BETTER WAY</strong> TO DO THIS ?</p>

<p>Thanks.</p>

<p><strong>EDIT :</strong>  </p>

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