actiWATE: Tutorial

Appendix A: CSS implementation description

Introduction

actiWATE Framework contains minimal implementation of CSS (Cascading Style Sheets). Specifically it support JavaScript objects related to CSS. Implementation of these object is described below and allows correct execution of most JavaScripts that work with styles.

Styles support in JavaScript

actiWATE Framework implements three different objects: style, runtimeStyle, and currentStyle that represent styles of an HTML element.

'style' object

Description form MSDN library: Represents the current settings of all possible inline styles for a given element. Inline styles are Cascading Style Sheets (CSS) assignments that you apply directly to individual HTML elements using the STYLE attribute.

actiWATE Framework has the following limitations for the style object:

style's properties are independent of a STYLE attribute's value or other attributes of an element, i.e. actiWATE Framework doesn't parse contents of STYLE attributes and doesn't initialize style's properties with values specified in attributes of an element.
Default value for all style's properties is the empty string ("").
Every style's property can be set to any value of any type. If a property is set to undefined or null it is reset to an empty string. actiWATE Framework doesn't check the assigned values.
All properties of the style object are independent of each other. This could be illustrated by the following example:
Suppose we set the background property of an element to the value "beige url(sphere.jpeg) no-repeat top center". If we check values of background, backgroundColor, backgroundImage, backgroundRepeat, backgroundAttachment, backgroundPosition properties under the Microsoft® Internet Explorer we'll receive the following:
```
background: "url(sphere.jpeg) beige no-repeat center top"
backgroundColor: "beige"
backgroundImage: "url(sphere.jpeg)"
backgroundRepeat: "no-repeat"
backgroundAttachment: "scroll"
backgroundPosition: "center top"
```
But in actiWATE Framework the values will be:
```
background: "url(sphere.jpeg) beige no-repeat center top"
backgroundColor: ""
backgroundImage: ""
backgroundRepeat: ""
backgroundAttachment: ""
backgroundPosition: ""
```

'runtimeStyle' object

Description form MSDN library: Represents the cascaded format and style of the object that overrides the format and style specified in global style sheets, inline styles, and HTML attributes.

actiWATE Framework doesn't parse styles and inline styles specified within HTML pages. In actiWATE Framework the runtimeStyle duplicates a style object with the same limitations described for the style.

'currentStyle' object

Description form MSDN library: Represents the cascaded format and style of the object as specified by global style sheets, inline styles, and HTML attributes.

currentStyle object is implemented in actiWATE Framework as follows:

All properties are read-only (same as in Microsoft® Internet Explorer).
Each property is computed as follows (for example the color property):
1. If the color property is set in runtimeStyle object then return it and exit.
2. If the color property is set in style object then return it and exit.
3. return "auto".
The clipLeft property has the constant value "auto".
The clipRight property has the constant value "auto".
The clipTop property has the constant value "auto".
The hasLayout property has the constant value false.

Style Sheets support in JavaScript

actiWATE Framework doesn't support styleSheet JavaScript object. The document.styleSheets JavaScript collection is always empty.