I find myself in a predicament where I must dynamically load one of two stylesheets depending on the browser accessing the page:
If any browser other than IE, then load the "new" stylesheet
If IE is version 9 or higher, then load the "new" stylesheet
If IE is less than version 9, then load the old stylesheet
Here is the code snippet that achieves this:
<!--[if lt IE 9]>
<link type="text/css" rel="stylesheet href="/stylesheets/old.css">
<![endif]-->
<!--[if gte IE 9]>
<link type="text/css" rel="stylesheet href="/stylesheets/new.css">
<!--<![endif]-->
<!--[if !IE]><!-->
<link type="text/css" rel="stylesheet href="/stylesheets/new.css">
<!—<![endif]-->
This setup functions effectively in modern browsers, with older versions of IE loading the old styles correctly. However, in outdated versions of Firefox (3.6) and possibly others, the new stylesheet fails to load properly and instead "-->" gets displayed on the webpage. This issue arises from the line specifying "!IE" - <!--> needs to be included for IE 11 to load the stylesheet. Removing it makes Firefox 3.6 work as expected.
What would be the correct method to configure these conditional comments to ensure they function flawlessly across various browsers and their versions?