With the advent of Internet Explorer 7 (IE 7), there is now little choice but to create separate style sheets for different browsers, at least for a moderately complex visual design or layout. One of the approaches is to use Conditional Comments. The advantages of that are:
- Only browsers that need (or take advantage) of the style sheets will download them;
- The base style sheets (should) be completely standards based, serving as the foundation (i.e. any new/obscure browser has no excuse if it supports CSS);
- No validation issues for browser specific code such as IE’s expressions, or untested CSS 3 rules.
This article explains how to take advantage of the Css conditional comments and still be able to use our ajax controls.
What the AjaxManager does, is look for link or style tags and adds them to the page on ajax request. It skips the conditional comments and therefore all styles are loaded after ajax request, no matter which browser or version it is. Unfortunately we have not found a feasible way to check for those and we cannot easily fix this problem. However we have found two workarounds for the time being which depend on the scenario, developer and his needs :
- set the EnablePageHeadUpdate property of the ajax control to false - this way it will not update the head tag. However if you load dynamically controls with ajax, their stylesheets will not be applied in this case. 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 used. It is even valid xhtml1.1 as the html comments are skipped by the html validator i.e.:
| ASPX |
Copy Code |
|
<body> <!--[if lte IE 6]> <link rel="stylesheet" type="text/css" href="ie6.css" /> <![endif]--> <form id="form1" runat="server"> |