You are here: Designer Studio > Landing pages > User Interface > HTML5 Application Readiness - CSS Upgrade

HTML5 Application Readiness - Upgrade CSS

Use this tool to upgrade custom CSS in your harness. Upgrading custom CSS to auto-generated CSS enables your application to render effectively in HTML 5 document type (standards mode). For more information, see HTML5 Application Readiness.

Non-standards compliant HTML may be problematic when rendering in standards mode. For example, width:50, may render correctly in quirks mode. However, this will not render as expected in standards mode. Running the Upgrade CSS tool converts this code from width:50 to width:50px, enabling it to render properly in standards mode.

To run the Upgrade CSS tool:

  1. As a best practice, create a new RuleSet version to contain the upgraded the CSS files .
  2. On the Harnesses tab, click Upgrade CSS.
  3. Select the RuleSet Name in which you want to upgrade CSS to standards-compliant CSS.
  4. Select the RuleSet Version? check box and then select the RuleSet version in which to display files containing non-standards compliant CSS.
  5. Select the During Update Move To check box, and then select the RuleSet into which you want to save the updated css rule-file-text. Open RuleSet versions, higher than the RuleSet version specified in the RuleSet Version? display. If a higher RuleSet does not exist, an empty box displays.
  6. In the Memo field, type a note. This note displays in the History tab of the updated css rule-file-text.
  7. Click List to view the File Name, RuleSet, and Version of files containing non-standards compliant CSS.
  8. Select or clear the Update? check boxes as desired, and then click Run to automatically update the CSS. Note the change in the Status column: a check displays when the CSS is upgraded successfully. An X appears when the CSS cannot be upgraded using the tool. In this case, manually update the CSS.

For details, see the Upgrading harnesses that contain custom CSS and JavaScript to render in HTML5 document type on the PDN.

Type

CSS

RuleSet Name

Displays all the open RuleSets in the current application. Select the RuleSet that you want to upgrade.

RuleSet Version?

Select the RuleSet version in which you want to upgrade CSS to standards-compliant CSS. As a best practice, create a new RuleSet version into which the upgraded CSS will be saved. If you do not select a RuleSet version, then all the CSS files from every RuleSet version of the selected RuleSet display.

During Update Move To?

Select to display a list of open RuleSet versions which are higher than the selected RuleSet Version. If a higher unlocked RuleSet does not exist, then an empty box displays.

As a best practice, create a new RuleSet version, select this check box, and then select the new RuleSet version to move upgraded files to this RuleSet version. Doing this prevents conflicts due to pre-existing files.

Memo Type a note that displays in the History tab of the upgraded css rule-file-text.
List Click to view the File Name, RuleSet, Version, and Status of files containing non-standards compliant CSS.
Run Click to automatically update the CSS.
Close Click to exit the Upgrade CSS tool.

Displays files, within the selected RuleSet Version, that contain non-auto-generated CSS.

Check All

Select to mark all files for update.

Uncheck All

Select if you do not want to update selected files.

Inverse

Click to toggle the selection of check boxes in the Upgrade ? column. A file selected for upgrade is unselected and vice-versa.

Clear Status Click to clear the Status column.
Update? Indicates if the css-rule-text will be updated.
File Name Displays the name of the CSS file.
RuleSet Displays the RuleSet to which the file belongs.
Version Displays the RuleSet verison to which the file belongs.
Open Click to open the css-rule-text file.
Status Displays the status for the file upgrade. A check indicates that the file was updated successfully. An x indicates that the upgrade failed. In this case, manually update the CSS.