If you want to know How to Set Browser Compatibility Mode in SAP Portal Logon Page, this post is for you. Browser compatibility mode is perhaps the most important feature that Portal Developers often ignore. Instead of attempting to fix the CSS for lower browser versions for e.g IE 8 and so on, it is better to tell your SAP Portal Logon Page to render page in compatibility mode. Though compatibility mode can be configured manually by changing mode in Developer Tools in IE. Before we get to see how can we programmatically set browser compatibility, lets first see how significantly it impacts application rendering.
First image below is of my logon page that is rendered in IE Quirks mode. Take a look how badly it is rendered. Not just that, CSS properties such as input focus, Overlay, and Z-index simply won’t work in this mode.
As you can see above, input field focus is not working on my SAP Portal Logon Page. In addition, Log On button is also incorrectly placed. Now let us see how this page rendering is changed if you change browser mode via Developer Tool. If you are in IE, hit F12 – a shortcut to launch Developer Tools. Otherwise, Click on Tools > Developer Tools from command bar. Once you launch Developer Tools, change the mode to Standard as shown below.
Now take a look at my logon page –
As you can see, page looks far better when Browser Mode is changed to Standards. In fact, it is good to see input focus is also working in this case.
How to programmatically set browser compatibility?
The problem with above approach is that you cannot ask users to change browser mode or set browser compatibility mode each time he / she access the SAP Portal. If user don’t change the mode, your logon page loses its beautiful design. However, there is a better solution available. You can programmatically tell your SAP Portal logon page to render logon page in compatible mode. This is done by adding a <meta> tag in logonPage.JSP file. Let see how is that done.
Open NWDS > your Logon WAR project > logonPage.jsp > add below code immediately after <head> tag
<meta http-equiv=”X-UA-Compatible” content=”IE=8″>
Here is what Microsoft says about each mode
- IE10 mode provides the highest support available for established and emerging industry standards, including the HTML5, CSS3 and others.
- IE9 mode provides the highest support available for established and emerging industry standards, including the HTML5 (Working Draft), W3C Cascading Style Sheets Level 3 Specification (Working Draft), Scalable Vector Graphics (SVG) 1.0 Specification, and others. [Editor Note: IE 9 does not support CSS3 animations].
- IE8 mode supports many established standards, including the W3C Cascading Style Sheets Level 2.1 Specification and the W3C Selectors API; it also provides limited support for the W3C Cascading Style Sheets Level 3 Specification (Working Draft) and other emerging standards.
- IE7 mode renders content as if it were displayed in standards mode by Internet Explorer 7, whether or not the page contains a directive.
- Emulate IE9 mode tells Internet Explorer to use the directive to determine how to render content. Standards mode directives are displayed in IE9 mode and quirks mode directives are displayed in IE5 mode. Unlike IE9 mode, Emulate IE9 mode respects the directive.
- Emulate IE8 mode tells Internet Explorer to use the directive to determine how to render content. Standards mode directives are displayed in IE8 mode and quirks mode directives are displayed in IE5 mode. Unlike IE8 mode, Emulate IE8 mode respects the directive.
- Emulate IE7 mode tells Internet Explorer to use the directive to determine how to render content. Standards mode directives are displayed in Internet Explorer 7 standards mode and quirks mode directives are displayed in IE5 mode. Unlike IE7 mode, Emulate IE7 mode respects the directive. For many web sites, this is the preferred compatibility mode.
- IE5 mode renders content as if it were displayed in quirks mode by Internet Explorer 7, which is very similar to the way content was displayed in Microsoft Internet Explorer 5.
- Edge mode tells Internet Explorer to display content in the highest mode available. With Internet Explorer 9, this is equivalent to IE9 mode. If a future release of Internet Explorer supported a higher compatibility mode, pages set to edge mode would appear in the highest mode supported by that version. Those same pages would still appear in IE9 mode when viewed with Internet Explorer 9.
On a side note, always use <meta http-equiv=”X-UA-Compatible” content=”IE=edge”>. This tells your browser to render your page in the latest mode available. This is especially good if you do not want your browser to determine compatibility mode for your application.
With this simple trick, you can be sure that your page won’t break in lower version browsers. In addition, you can provide unified user experience irrespective of the browser. This is a huge plus point.