Browser independency with <if supports>

This section will deal with the <if supports> plugin and the page and client scopes.

After reading this section you will know about the many features that might be checked for with <if supports> and the properties of the page and client scopes and their entities.

We will create a feature on the R&D page of DemoLabs Inc. site (shipped with CMS Advanced) that dynamically uses JavaScript or HTML forms depending on the client browsers support for the JavaScript technique.

The <if supports> plugin features

Have you ever met somebody that have produced a good looking web page for one browser and later found out that another browser smashes it up totally? With RXML you can easily check which features the browser requesting a page supports and send the content corresponding to that. You simply use the <if supports> plugin. Below follows a list of the different features this If plugin is able to check.

Attributes

tests if the HTML attribute is supported inside tags. Possible features:

align
backgrounds
fontcolor
imagealign
mailto
tablecolor
tableimages

Client type

checks if the browser is of a certain client type, e.g. msie checks if the browser is an Internet Explorer. Possible features:

html
msie
phone
robot
unkvown

Graphics

is graphic related tests, i.e. if the browser supports certain image formats. Possible features:

gifinline
jpeginline
pjpeginline
pnginline
wbmp0

Tags

checks if the browser supports these HTML tags at all and/or in a proper manner. Note that divisions and div have the same function. Possible features:

bigsmall
center
divisions/div
font
forms
frames
images
layer
math
noscript
supsub
tables

Techniques

tests if the browser supports a certain technique. Possible features:

activex
autogunzip
cookies
java
javascript
js_image_object
js_inner_html
pull
push
ssl
stylesheets
vrml
wml1.0
wml1.1

The syntax for Supports is

<if supports='feature'>

where feature is replaced by one of the keywords above. The javascript attribute is used to test if the browser supports JavaScript or not. It will be used in the example part below.

<if supports='javascript'>
  <if clientvar='javascript < 1.2'>
    Your browser supports javascript versions less than 1.2
  </if>
  <else>
    Your browser supports javascript version 1.2 or higher
  </else>
</if>
<else>
  Your browser doesn't support javascript at all
</else>

If you want a more exact test for which JavaScript version is supported, you can use <if clientvar="javascript is version">, where is can be replaced by any valid operator. This is not used in the example part below.

Page and client scopes

For displaying and/or getting information about the client browser the client scope is suitable. The following list is an extract of the many different entities available:

• accept-language - The preferred language of the client, e.g. 'en'.

• accept-languages - The preferred language and a list of other languages also accepted.

• fullname - The full user agent string, e.g. 'Mozilla/4.7 [en] (X11; I; SunOS 5.7 i86pc)'

• ip - The ip address the client is located at.

• javascript - The javascript version supported by the client.

• name - The name of the client, e.g. 'Mozilla/4.7'

• referrer - The URL of the page on which the user followed a link to this page.

If information about a page is wanted, there is a convenient scope called page for such tasks. Some useful entities are:

• bgcolor/fgcolor - the background/foreground color of the page

• description - as specified in meta data.

• filename

• filesize - in bytes.

• keywords - as specified in meta data.

• title - as specified in meta data.

• type - the content type of the file, e.g. 'text/html'.

• url - the URL to this file from the web server's point of view.

For the complete list of entities of these scopes, insert

<insert variables='full' scope='client' />
  or
<insert variables='full' scope='page' />

in a web page. Let's look at some examples:

<if supports='msie'>
  You are using Internet Explorer
</if>
<elseif match='&client.name; is Mozilla/4.*'>
  You are using Netscape 4.*
</elseif>
<else>
  You are using &client.name;
</else>
</before>

A simple check for which browser is requesting this page.

<if supports='javascript'>
  JavaScript version: &client.javascript;
</if>
<else>
  Doesn't support JavaScript.
</else>

An example of the use of javascript attribute and entity. The &client.javascript; entity contains the actual version supported. Clientvar plugin can be used for narrow test for JavaScript version supported. See the If plugins Section, Eval part, for details and an example.

Browser JavaScript support optimizing

To demonstrate how to use the <if supports> plugin, we will create the possibilty to contact the R&D team of DemoLabs Inc. by submitting a message written in a form. The contact form will be displayed in a pop-up window and the message will be sent back to the parent window on submission. This is nicely done by adding some JavaScript code. However, some browsers don't support JavaScript or has it turned off. Therefore we will test if the browser supports our script, and if not, we will bring the user a pure HTML form instead.

The <if supports='javascript'> works like the HTML <noscript> tag. There is one major difference, though; <if supports='javascript'> doesn't catch if the browser has JavaScript turned off. On the other hand, <if supports> works on all browsers, also those where <noscript> doesn't (like Internet Explorer 2.0 and Netscape Navigator 2.0). We will show how to combine these in a very useful manner.

The source code of the files in this example is found by following the link. (It might be a good idea to open the source code file in a different window, so that it is easily read parallel to this Section. The code won't be displayed here to shorten the length of this Section.) Remember that this is a RXML tutorial. Although we use JavaScript and XSLT (Extensible StyleSheet Language Transformer) code, we won't explain that in detail here. If you aren't familiar with those techniques, don't dig into that code. We will add enough information for you to understand this Section anyway.

Ok, let's get down to work.

This is the JavaScript version of index.xml

The snapshot above shows the JavaScript version of the edited index.xml of the R&D directory. The 'Contact R&D' part with a button is added. Let us look how this is done.

<h1>Contact R&D</h1>
<p initial='initial'>If you have any suggestions,
 complaints or other messages to the R&D staff,
 please don't hesitate to

<if supports='javascript'>
  ... <!-- supported -->
  <noscript>
    ... <!-- turned off -->
  </noscript>
</if>
<else>
  ... <!-- not supported -->
</else>

First we add the headline, some text and an if-else statement that will check if JavaScript is supported and on or not. The supported section will contain the JavaScript version code, the turned off will display a message saying that this page uses JavaScript, please turn this feature on or use the HTML version. Not supported section will contain the HTML version code.

The <noscript> version contents added instead

<noscript>
  <p><b>This page uses JavaScript,
   so you should enable JavaScript in your browser options
   and reload this page for the button above to work.
   Else, <a href='message.xml'>click here</a>
   to contact R&D staff.</b></p>
</noscript>

The <noscript> version, sent when we know that the browser supports JavaScript but has this feature turned off, gives the user an opportunity to choose version. The link leads to the contact form in pure HTML. The <else> code, sent when the browser really doesn't support JavaScript, looks like this:

For browsers not supporting JavaScript this is added

<else>
  <a href='message.xml'><b>contact us</b></a>.
</else>

We simply insert a link leading to the message form in HTML version. It is a basic form with no tests of input or other funny stuff. (We don't comment the form here. Have a look in the source code if you are curious. The file is named message.xml.)

The message form in HTML version

Ok, this was (hopefully) the exceptions when users view the page. Let's consider the JavaScript version again.

<if supports='javascript'>
  contact us.
  <form>
    <input type='button' value='CONTACT R&D'
     onClick='openMessWin('messForm.xml')' />
  </form>

  <form name='hiddenForm' action='disp_mess.xml'>
    <input type='hidden' name='_name' />
    <input type='hidden' name='mail' />
    <input type='hidden' name='mess' />
  </form>

  <noscript>
    ...
  </noscript>
</if>

We insert a button that opens a new window using onClick='openMessWin('messForm.xml')'. The contents of that window is coded in messForm.xml. If you have a look at the source code you see that some features are added compared to the HTML version message form - additional buttons and some JavaScript logic checking the input. (The hidden form is added for some JavaScript magic that we won't explain here. The nice look&feel is possible by the popup.xsl template file, but that is another story.)

This is the pop-up window that appears when the user clicks the 'CONTACT R&D' button

The user adds name, mail address and a message, clicks 'SEND' and the pop-up window disappears and data is submitted and handled in some way by the server. In this example we simply display it in the browser. The message will be displayed the same way if the HTML form is used instead.

If_tags, Browser support optimizing, img 6

Well, that's it. This was just a simple example of the powers of <if supports>. As shown in the former parts, there are many features that may be checked for and dynamically handled.

Summary

This section has taught you how to check for which facilties the browser requesting the web page supports and how to adjust the sent information according to that. The page and client scopes where also discussed. The syntax for supports is

<if supports='feature'>

For displaying and/or getting information about the client browser the client scope is suitable, e.g. the &client.javascript; entity holds the JavaScript version supported by the client. The page scope gets information about a page, such as &page.filename; or &page.filesize;. For the complete list of entities, insert <insert variables='full' scope='client' /> or <insert variables='full' scope='page' /> in a web page.

More details about <if supports> and client and page scopes are found in the Web Developer Manual or adding <help for="if" /> in a web page.