Friday, November 17, 2006

Tip: conditional comments and r.a.d.ajax

Do you use any conditional comments in the header of your files? If you do and you use r.a.d.ajax, you may run into very difficult to debug (but easy to fix) problems. Let's look at how I got into this situation and how I learned this "tip" the hard way: Many moons ago, in preparation for IE7, I moved all of my old IE hacks out of my primary stylesheets and into a separate "IE hacks" stylesheet (this was the advice of many CSS experts at the time on how to prepare for IE7). To hide the IE6 hacks from IE7, the experts recommended the use of conditional comments (a not so commonly used syntax supported by IE that looks like this:<!--[if lte IE 6]>(html if true)<![end if]-->) which has worked great up to now. I recently discovered that r.a.d.ajax cannot deal with the conditional comment syntax after callbacks. So if you use conditional comments to attach stylesheets in the header of your page, any ajax callback (which looks for links in the header and re-attaches them after callbacks) will expose your "hidden" hack stylesheet to browsers that shouldn't see it. Here are a few ways telerik suggested you can deal with the problem:

  • Set the EnablePageHeadUpdate property of the ajax control to false. This way it will not update the head tag, but if you load dynamically controls with ajax, their stylesheets will not be applied. This is fixable as well, you just need to manually add the stylesheet declarations for the controls on the page.
  • Move the conditional comments out of the head tag. This way they will not be updated by the AjaxManager and still applied depending on the browser version. It is even valid xhtml1.1 as the html comments are not verified by the html validator.

Hopefully this little tip will save you some time and help you avoid the possible pitfalls of ajax and conditional comment interaction.