Style property name format

Question

I have noticed, that a style property name used in SmartMS has a different format than used in the css file.

e.g.:
in css:

line-height, text-overflow, white-space

in SmartMS the style properties don't have the '-' sign and are therefore CamelCase:

lineHeight, textOverflow, whiteSpace

Why are these differences?

Answer 1

The lower-case format (e.g. line-height) is used in css files. This format is a standard for all browsers.

The CamelCase format (e.g. lineHeight) is used on the javascript object internally in the browser. This format is also a standard for all browsers. But some browsers also support the lower-case format.

To be cross-browser compliant, always use the CamelCase format, on the javascript object!

Answer 2

Another way would be to use the CSSStyleDeclaration Interface as it would allow to use the CSS property name (the one in lowercase and with hyphens). This can also be used to query if the CSS property name exists (by parsing the items of all available properties). Furthermore it can be used to specify a certain priority or to access parents.

Since it is part of the DOM Level 2 Style Specification (published in the year 2000), it should be even compatible with most browsers.

The only problem I see with using this is the fact that getPropertyValue should return a DOMString (which translates to string in SMS), but browsers used to return null if not set (as opposed to an empty string), which would rather translate to a variant (in SMS). This exception must be handled properly.

Answer 3

In the present RTL and framework there are a couple of throw-backs to earlier revisions where the compiler didnt have as good support of accessing JS objects and types as the present compiles does.

So these rare cases of stray CSS, except when they must be there, will be gone in the next update.

In the next update, as much as possible of RTL and framework use the browser-drivers to take care for prefixing and postfixing of style names. This ensures that no matter what browser you run on, SMS gets it right.

Having said that ther reason for the different ways of accessing a style, like christian has explained, are due to different spesifications. In the RTL its rarely conscious options on our part, just habit and what fits best within a situation. Focus is always on stability first, then refactoring for speed later.

To make it simple, there are two ways you can access a css style:

1. as a property of a style collection
2. as a direct JS object attribute

Ex:

// reference as a property
Self.Handle.style["-webkit-font-family"] := "sans serif";

// reference as an attribute
Self.Handle.style.fontFamily := "sans serif";

Both result in the same, but address the style in a different way.

The first one is actually slowest because it performs a lookup of the style name before assigning the value.

The second address the value directly, as an exposed attribute of the style object, and thus camel case rules kicks in.

You mention that they are not working in Firefox, well, that is very sad to hear. We must have missed that spot, so please give us the unit names and line number and i'll have a look.

The "browser-style-name" format must be prefixed with the correct browser, so for webkit browsers it's "-webkit", and firefox uses "-moz". It is common to set the same property for all browsers in javascript, but like mentioned -- we have some functions in the BrowserAPI() to prefix with the correct name.

So this is being taken care of.