When styling with CSS, one of the most
common problems concerns the order of priority. A rule can be
assumed to have a greater or lesser priority than is actually the
case. Then, unsuitable declarations are applied. With many rules,
it can be difficult to determine which declarations apply to which
conditions. Understanding the priority of CSS rules is the most
difficult aspect of a large style sheet.
Another common problem is syntax errors in
the declarations. If an identifier on the left does not refer to a
valid property, it will be silently ignored. If the value on the
right is invalid, it may also be ignored by the target object. In
both cases, the declaration has no visible effect.
Yet another common problem concerns changes
in properties. An event marking a new value may trigger a new rule.
When the object in the model reverts to its previous state, the
previous set of rules applies. Therefore, the previous set of rules
must contain declarations that undo the changes in the properties
of the graphic object correctly. For example, if a node switches to
an alarm state, a CSS rule will create an alarm decoration. When
the alarm state is resolved, the decoration should be canceled by a
declaration in the normal set of rules.
You can specify a
styleSheetDebugMask
property in the graphic components. This flag has several levels
that help in debugging problems. The style sheet debug mask can be
set directly in the graphic component with the method
setStyleSheetDebugMask or it can be
customized in the style sheet itself.
StyleSheet {
styleSheetDebugMask: "DECL_MASK|DECL_VALUE_MASK";
}
See the interface
IlvStylable for more details on the available
debug levels.