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.

Advertisements

2 responses to “XPages Tip: Dynamically Loading a Style Sheet for IE Compatibility Mode”

  1. Ed Lee says :

    IE’s compatibility mode has made my good work look bad on a number of occasions!

    I’ve yet to try this out so apologies if this is doesn’t work, but I read that the below should disable IE’s compatibility mode.

    source: http://stackoverflow.com/questions/6881958/how-to-disable-compatibility-mode-button-in-ie9

    • Brad Balassaitis says :

      It is maddening, isn’t it? 🙂

      I’ve seen that work in some tests but not work recently at a client site that had compatibility mode enabled as a corporate standard, hence all of these posts about workarounds.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: