Browser compatibility question, trying to code for all-browsers.

[matthayzon89]

Hello,
I was wondering if there is a way to make different css code execute for different web browsers b/c it seems that with css3's new features, the website looks great in firefox/chrome but funky in IE... even without css3 it is a bit tricky to make the website looks great in all browsers...

any suggestions?

[seoskunk]

you can define a ie css link
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="all-ie-only.css" />
<![endif]-->

[lucy24]

... but not for much longer, since MSIE 10 has announced it won't support Conditional Comments. Still no word on whether this means they will finally eliminate the need for cc's.

This is when validation becomes important. At least it allows you to say with confidence that it's the browser's shortcoming, not yours.

And then there's the extreme, last-ditch, daring option: If something looks good in browsers A and B but lousy in browser C ... change it. That doesn't mean slapping on one patch after another. It means making it simpler. I don't think users will ever go back to "This page works best when viewed in Browser X." Besides, you can't tell how it will look in Browser X.2.

[rocknbil]

Just say "no" to conditional hacks. :-) "You always have to hack for IE" is a myth. "You rarely have to hack for IE if you're rendering in standards compliance mode" is closer to the truth.

There are two things (to start with) that will make 95% of cross browser issues go away.

Understand and use a full doctype [webmasterworld.com] - though HTML5 is not in that post, it's the latest darling of the web.

Validate your documents [validator.w3.org]. You may ignore minor "warnings" that do not affect rendering (like, if you're using XHTML**, there is no "_target" for new windows) but this is the first stop to cross browser compatibility.

I haven't had to use a hack in sheesh, years. If I feel cornered to do so, I'll rearrange the way I do the layout to avoid it.

**Why most of us should NOT use XHTML [webmasterworld.com]

[matthayzon89]

Thank you for all the replies. Very helpful.

<!--[if IE]>
<link rel="stylesheet" type="text/css" href="all-ie-only.css" />
<![endif]-->

<!--[if IE]>
code here
<![endif]-->

what is this? conditional statements for html? is this the standard format for writing one?

[lucy24]

It's called a Conditional Comment. Look closely at the configuration and you'll notice an evil bonus: the stuff inside the CC doesn't have to validate, since technically it's a Comment.

[haslayout.net...]

(Moderators feel free to replace with a more suitable link. This is the one I've got bookmarked.)

[alt131]

(Moderators feel free to replace with a more suitable link. This is the one I've got bookmarked.)

Thanks for that Lucy. I've never found what I personally thought was a really great explanation, and that one was an interesting read (although the invented term "condcom" was a bit disconcerting - my eyes kept ignoring the second "c" ... ;) )

I always found the official documents About Conditional Comments [msdn.microsoft.com] heavy reading. Targeting IE Using Conditional Comments [positioniseverything.net] and Conditional comments [quirksmode.org] are old stand-bys and my personal favourite is Stu Nicholls because he explains how to target non-ie browsers.

However, also keep in mind that none of them mention that if cc's are used to link to an external stylesheet that stylesheet blocks all other downloads (Conditional comments block downloads [phpied.com] and IE 6 slowing down IE 8 [webforscher.wordpress.com]). For that reason coders like Nichole Sullivan* have suggested that if it is necessary to hack for ie, then return to the old days and hack the main css where it avoids that issue and is such an obvious eye-sore it will be removed as soon as possible

@matthayzon89 - welcome to css :) . While CC's are a good way of targeting ie, that doesn't account for other browsers non-conformance. I realise you can find lots of information about how "difficult" it is to achieve cross-browser consistency, and a while ago coders seemed to be measured by how many hacks they could recite. I guess at WebmasterWorld many of us take an approach more like rocknbil's.

So my suggestion would be to accept that you just can't account for all the variables of device, platforms and user preferences. Use semantic, valid code to deliver accessible, usable content, and accept that users of older technology may not get the same fancy things - but they will get the content, which is most important.


*Can't find a reference on her site - but am sure it came up in her talk at Webstock [webstock.org.nz] - and I think Souders also mentioned it.