XPages Tip: Dynamically Loading a Style Sheet for IE Compatibility Mode

I’ve wrestled with IE’s compatibility mode (which makes higher versions of IE act like IE7) a few times recently. Some workarounds I’ve come across were documented previously. In this post, I’ll show how to conditionally load a style sheet that has styles specifically for compatibility mode.

Themes to the Rescue

Fortunately, you can determine the browser and version in XPages and you can use a theme to conditionally load a style sheet based on the browser and version.

The snippet below will load one style sheet if the browser is IE7 (or below) and load another style sheet if the browser is anything else.

The .isIE(0,7) method returns true or false based on whether the current browser is any version of IE from 0 to 7.

<resource rendered="#{javascript:context.getUserAgent().isIE(0,7)}">
  <content-type>text/css</content-type>
  <href>IE7StyleSheet.css</href>
</resource>
	
<resource rendered="#{javascript:!context.getUserAgent().isIE(0,7)}">
  <content-type>text/css</content-type>
  <href>NonIE7StyleSheet.css</href>
</resource>

It’s a massive headache to deal with compatibility mode, but this flexibility makes it a little easier to adjust styles as needed.