Browser Standards Mode and HTML5

This document covers the following topics:


General Information

Natural for Ajax applications up to version 8.3.4 were running in quirks mode in the browsers, which does not support HTML5 and CSS3 and which behaves differently in the different browsers. With Internet Explorer 11, Firefox and Chrome, Natural for Ajax applications now run in standards mode, which supports HTML5 and CSS3. In standards mode, the browsers should behave as described by the W3C HTML and CSS specifications.

With Internet Explorer 10, Natural for Ajax applications run in Internet Explorer 10 quirks mode. This mode already supports a lot of HTML5 and CSS3 but not the full range of the specifications.

The following sections explain what you need to do when switching to standards mode and HTML5 in the browsers.

Enabling Standards Mode in the Browser

The HTML pages that are generated with Natural for Ajax contain the following declaration:

<!DOCTYPE html>

This tells the browser to run in standards mode. If you have not defined specific configurations settings in your browser, you do not have to do anything. The browser will automatically use the correct mode.

Upgrading an Application to HTML5

There are differences between HTML4 and HTML5. Page layouts are written in XML and Natural for Ajax takes care of the correct generation into HTML5. Therefore, you do not need to adapt anything in your layouts in most cases. You only have to do the following:

  1. Regenerate the HTML for all of your layout pages using NaturalONE or the Layout Manager.

  2. Regenerate the *.css files from the *.info files using the Style Sheet Editor.

When packaging your application as a .war file using a NaturalONE wardeploy.xml file, the HTML and CSS files are automatically regenerated. The prerequisite for this is a wardeploy.xml file that has been generated with version 8.3.4 or above.

You only need to check whether your implementation is HTML5/CSS3-compliant if you are using the following advanced features:

Style Sheet Settings

Some style settings have changed in CSS3. One major change is that for attributes such as height, width and padding, a number only is no longer a valid value. The value must now also include a unit such as "px", "cm" or "%", or it must be one of the predefined values.

For your *.info files and if your application is using its own *.css files, we recommend that you check at least whether "px" is properly applied to the corresponding attribute values.

IHTML Controls

In IHTML controls, the Natural programs provide plain HTML at runtime. We recommend that you check whether this plain HTML is HTML5/CSS3-compliant.

*style and *styleprop Properties

Many controls support properties such as textstyle and textstyleprop to directly set CSS attributes at design time and/or runtime. In attributes such as height, width and padding, any missing "px" units are automatically applied by the Natural for Ajax framework. You do not need to take care of this. In rare cases, you might want to check for attributes which are no longer supported with CSS3.

Custom Controls

If you have built your own macro controls, changes are usually not required. For custom controls, however, for which you generate your own HTML, you need to check whether the generated HTML is HTML5-compliant.

Upgrading a Test Environment to HTML5

According to the HTML5 standard, all custom attributes must start with the string "data-". For this reason, the Natural for Ajax framework generates the attribute data-testtoolid into the HTML files by default. See also Test Automation of Natural for Ajax Applications.

In earlier versions, this attribute was called testtoolid. In the layout XML, the property name testtoolid is kept - you need not change any layouts. This is just the default for the attribute in the HTML which is changed to data-testtoolid. If you are using this attribute in automated tests, you need to change your tests accordingly.

As an alternative solution, the Natural for Ajax framework still supports the testtoolid attribute. This allows you to perform the upgrade step by step: You can first upgrade your application without touching the test suite. When this is stable, you can adapt your test suite. The attribute testtoolid does not adhere to the naming convention of the HTML5 specification. Therefore, the resulting HTML will not be 100% valid HTML5. But the currently supported browsers still accept this attribute.

If you want the Natural for Ajax framework to generate the attribute testtoolid in the HTML files instead of the default data-testtoolid, do the following:

  1. In the cisconfig.xml file, set the parameter testtoolidhtml4 to "true".

  2. Regenerate the HTML files for your layouts.

  3. Make sure that your test environment also contains a cisconfig.xml file in which testtoolidhtml4 is set to "true".

Note:
There is no guarantee that future browser versions will still tolerate the testtoolid attribute. You may have to switch to data-testtoolid sooner or later, but you do not have to do it immediately.

Upgrading a Production Environment to HTML5

If your application needs to support Internet Explorer 10, you have to add the following entries to the web.xml file in your production environment:

<filter>
   <filter-name>BrowserCompatibility</filter-name>
   <filter-class>
      com.softwareag.cis.server.filter.BrowserCompatibilityFilter
   </filter-class>
</filter>
<filter-mapping> 
   <filter-name>BrowserCompatibility</filter-name> 
   <url-pattern>*.html</url-pattern>
   <servlet-name>StartCISPage</servlet-name>	    
</filter-mapping>

For an example, see the web.xml file that is shipped with Natural for Ajax.