Page 1 of 1

Stop penalising good browsers for IE

Posted: Sat Jan 19, 2013 1:36 pm
by psy
It's tricky enough getting things right in good desktop browsers, let alone responsive designs for tablets and smartphones and IE really annoys me. I don't see why good browsers should be penalised in any way for tweaks added to accommodate IE's shortcomings.

Here's what I do.

Normally in the <head> section of the template I have to add either an IE stylesheet or js or <style> tags for IE or IE version comments, etc. OK for IE but when not IE, it just adds to the download time.

Loading CGExtensions is almost a default. So many modules rely on it. It also has a neat little tag called {cge_isie assign=ie}. I put this above the <__html> tag. Then, when I get to anything in the page template that is IE specific, I put, eg:

Code: Select all

		{if $ie}
	        {literal}
	        <!--[if gte IE 9]>
	            <style type="text/css">
	            ....
	            </style>
	        <![endif]-->
	        <!--[if IE ]>
	            <style type="text/css">
				...
	            </style>
	        <![endif]-->
		{/literal}
        {/if}

That way only IE browsers get the extra IE specific rubbish.

Re: Stop penalising good browsers for IE

Posted: Thu Jan 31, 2013 8:03 pm
by Dr.CSS
Instead of hard coding the styles in the head you can always add IE specific style sheets, create a style sheet called IE8 then use {cms_stylesheet name='IE8'}...

Re: Stop penalising good browsers for IE

Posted: Thu Jan 31, 2013 9:04 pm
by psy
Good point and very true. The tip was intended to highlight the nice little {cge_isie} tag rather than how to code IE-specific styles and/or javascripts.

Re: Stop penalising good browsers for IE

Posted: Wed May 01, 2013 4:34 pm
by blackhawk
That way only IE browsers get the extra IE specific rubbish.
One more reason to love CMSMS

Thanks for that one!

Re: Stop penalising good browsers for IE

Posted: Wed May 01, 2013 4:50 pm
by Wishbone
I do the following:

Give an 'ie' class to html if IE

Code: Select all

<!--[if IE]>
<__html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" class="ie">
<![endif]-->
<!--[if !IE]><!-->
<__html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<!--<![endif]-->

then in the stylesheet, if I need specific IE hacks, I prepend .ie to all definitions that need tweaks:

Code: Select all

.ie .special-more a {
  padding-top: 1px;
}