• system - default system UI font used for input elements;
• system-menu - system menu font;
• system-caption - window caption font;
• system-status - statusbar and tooltip system font.

• inherit - default value;
• sub-pixel - glyphs can be placed "between pixels";
• snap-pixel - glyphs positions shall fall to pixel grid, this mode is desired for text editing scenarios so caret position will not overlap glyphs.

• none - default, text has no decoration;
• underline - text is underlined;
• overline - text has a line over it;
• line-through - text has a line drawn through it.

• solid - default, solid line;
• double - doubled line;
• dotted - dotted line;
• dashed - dashed line;
• wavy - wavy line

color or currentcolor name token (default, current text color).

none | uppercase | lowercase | capitalize

Default value is inherit - once it defined on a container it is used by rendering background and foreground images of all children (if they do not override it).

Foreground image is HTMLayout specific feature.

Foreground image has the same set of attributes as background.

Sequence of drawing of block in HTMLayout:

1. background
2. borders
3. content
4. outline
5. foreground

ATTN: solid colors on foreground will hide everything underneath them.

as per CSS:

• one, two, three, or four <length> or <percentage> values. This is used to set a single radius for the corners.
• followed optionally by "/" and one, two, three, or four <length> or <percentage> values. This is used to set an additional radius, so you can have elliptical corners.

Current limitation: with non-zero border radius colors of all borders shall be the same.

Where <part-list> is a comma separated list that contains one or many of following literals: border, padding, margin, background, foreground, layout .

The property defines mapping of directional related properties. For example this declaration:

div { mapping: left-to-right(border,margin); }

will cause left and right borders (colors, widths and styles) and margins to be swapped (mirrored in this case) so for example border defined as border-left will be used as border-right for rendering purposes.

• border - all border related properties : color, style and width.
• padding - all padding properties, padding-left, padding-right, etc.
• margin - all margin properties, margin-left, margin-right, hit-margin, etc.
• background - directional background properties: background-position, background image and gradients.
• foreground - directional foreground properties: foreground-position and foreground image.
• layout - layout is mirrored. For example flow:horizontal; mapping: left-to-right(layout); will cause blocks to be replaced from right to left.

Outlines similar to borders but differ from them in the following ways:

Supported values:

• block
• inline
• inline-block
• list-item
• contents
• table
• inline-table
• table-row
• table-cell
• table-body

ATTN: meaning of collapse is extended to support of not only rows in tables as per standard CSS but it is applicable for all other elements. visibility: collapse is an equivalent of display:none but collapsed elements participate in computation of intrinsic widths of containers thus dynamic change of visibility:visible to visibility:collapse will not change computed width of container element.

Changing of visibility:visible/collapse is recommended for dynamic hide/show effects. It is easy to hide element by setting display:none to reenable its appearance is difficult - there many display values to choose from: block, inline-block, list-item, etc.

propname(easeFunc,duration[,easeFuncRollback,durationRollback])

none 
linear 
quad-in quad-out quad-in-out
cubic-in cubic-out cubic-in-out
quart-in quart-out quart-in-out
quint-in quint-out quint-in-out
sine-in sine-out sine-in-out
expo-in expo-out expo-in-out
circ-in circ-out circ-in-out
elastic-in elastic-out elastic-in-out
back-in back-out back-in-out
x-back-in x-back-out x-back-in-out
xx-back-in xx-back-out xx-back-in-out
bounce-in bounce-out bounce-in-out

.mybutton:hover { color:red; border-color: white;
 transition: color(linear,200ms) border-color(linear,100ms); }

Behavior is the name of builtin or application defined class of behavior.

Only in Sciter!

If url part is provided then the engine will make an attempt to load that script file before trying to find behavior class (if the file was not loaded already).

Only in Sciter!

One or list of name/url pairs. Each element of the list is a full name of a function to be called for the element once in element's lifetime. The url is optional and if provided will cause script file from that url to be loaded.

The aspect is an inheritable property in the sence that if the element has multiple style rules with aspects defined then the used value of the aspect is a list of all aspects found in matching rules.

Example, these two rules:

input[click] { aspect: handleClickAttribute; }
input[focus] { aspect: handleFocusAttribute; }

for the DOM element <input type=text click="..." focus="...">

will cause both handleClickAttribute() and handleFocusAttribute() to be called for the element. The this environment value in both calls will be that element.

Allows to redefine textual content of the element in style. In h-smile content is can be applied to the element itself.

If the content is a string then it is used "as is" to replace element's content. If it is attr(attrname) then content of the element is replaced by value of the attribute.

p.status[state="pending"] { content: "Pending"; foreground-image:...; }
p.status[state="done"] { content: "Done"; foreground-image:...; }
p.status[state="warning"] { content: "Warning!"; foreground-image:...; }

Defines either:

• default popup position relative to the element that requested the popup (popup anchor element). Both popup-reference-point and anchor-reference-point are enumerations that accept one of following values:
  default | top-left | top-center | top-right | middle-left | middle-center | middle-right | bottom-left | bottom-center | bottom-right.
• Or advisory-position value, one of
• at-tail - popup appears as popup element of the <select> - underneath the anchor element. Or if not enough space - on top of it;
• at-head - above the anchor;
• at-end - popup appears aside of the anchor (like secondary popup menu). Particular side is determined by available space and directionality;
• at-start - normally appears on the left of anchor. For RTL direction - on the right.

The popup-position property governs positions popups shown for <select> and <menu> for example. If defined the popup-position overrides position provided by Element.popup(el,postition) call too.

Example, this declaration:

select[type=select-dropdown] > popup { popup-position: top-left top-right; }

will cause select's popup to appear on the right side of the popup, rather than underneath it. See: samples/popup/select-popup-positioning.htm

Individual parts of popup-position above.

NOTE: zoom in Sciter is close to IE's zoom but is different in two aspects:

1. zoom in sciter defines multiplication factor for all length values expressed in any units but not px. px units are always resolved to physical pixels.
2. zoom defines scale of children of the element - but not element itself.