Features specific to Sciter:
@include "mime-type" url(...) [media types list];
- inclusion of scripts from CSS. <style> @include "text/tiscript" url(script.tis) screen; </style>
<script type="text/tiscript" src="script.tis" />
except of media type condition.Font and paragraph properties | font |
specifies up to six of the following space-delimited property values. Alternatively, sets or retrieves the six listed text fonts.
In h-smile core engine the font also supports names of following system fonts:
Note: To be in effect these font names can be used only in the font attribute - in font-family such names are ignored. Rationale of this is simple, declaration font:system-menu; for example is a shortcut of four attributes of the font - font-family, font-size, font-weight and font-variant. | |||||||||||||||||||||||||
font-family |
specifies one of the following values.
| ||||||||||||||||||||||||||
font-size |
specifies one of the following values.
| ||||||||||||||||||||||||||
font-style |
specifies one of the following values.
| ||||||||||||||||||||||||||
font-weight |
specifies one of the following values.
| ||||||||||||||||||||||||||
letter-spacing | N/A | ||||||||||||||||||||||||||
font-rendering-mode | Defines glyph positioning and anti-aliasing modes:
| ||||||||||||||||||||||||||
line-height |
specifies one of the following values:
| ||||||||||||||||||||||||||
text-align |
specifies one of the following values:
| ||||||||||||||||||||||||||
text-decoration | Shorthand, list of text-decoration-line, text-decoration-style and text-decoration-color values. | ||||||||||||||||||||||||||
text-decoration-line |
Position of text decoration:
| ||||||||||||||||||||||||||
text-decoration-style |
Style of text decoration:
| ||||||||||||||||||||||||||
text-decoration-color |
Specifies color of text decoration. color or currentcolor name token (default, current text color). | ||||||||||||||||||||||||||
text-indent |
indentation of the first line of text in the object.
| ||||||||||||||||||||||||||
text-overflow |
specifies a value that indicates whether ellipses(...) display when text content has overflowed its given layout area.
| ||||||||||||||||||||||||||
text-transform |
trivial text transformations. Accepts values:
default value: none. | ||||||||||||||||||||||||||
vertical-align |
specifies one of the following values.
| ||||||||||||||||||||||||||
white-space |
specifies one of the following values:
| ||||||||||||||||||||||||||
word-wrap |
specifies one of the following values:
| ||||||||||||||||||||||||||
word-break | specifies one of the following values:
| ||||||||||||||||||||||||||
text-selection-color | specifies color of selected text (in inputs and elements under behavior:htmlarea). Non-standard. Inheritable property. | ||||||||||||||||||||||||||
text-selection-background-color | specifies background color of text selection (in inputs and elements under behavior:htmlarea). Non-standard. Inheritable property. | ||||||||||||||||||||||||||
text-selection-caret-color | specifies color of text caret (in inputs and elements under behavior:htmlarea). Non-standard. Inheritable property. | ||||||||||||||||||||||||||
text-selection |
<text-color> <background-text-color>
specifies colors of text selection, shortcut of two properties above. Non-standard. | ||||||||||||||||||||||||||
Color and background properties
|
background |
specifies up to five of the following space-delimited values, in any order.
| |||||||||||||||||||||||||
background-attachment |
specifies one of the following values.
| ||||||||||||||||||||||||||
background-color |
specifies one of the following values.
| ||||||||||||||||||||||||||
background-image |
specifies one of the following values.
| ||||||||||||||||||||||||||
background-image-frame |
integer, for animated images (aPNG, GIF) that are collections of frames specifies number of frame to show.
This effectively freezes animation of the image at particular frame.
This property can be used in transition property to animate image from start to end frame. | ||||||||||||||||||||||||||
background-position |
specifies one or two of the following values:
| ||||||||||||||||||||||||||
background-position-left background-position-right background-position-top background-position-bottom |
Used in expand, stretch and no-repeat modes. | ||||||||||||||||||||||||||
background-repeat |
specifies one of the following values:
| ||||||||||||||||||||||||||
color | Sets the color of the text of the object. | ||||||||||||||||||||||||||
image-rendering | The image-rendering property provides a hint about the algorithm it should use to scale images. Supports one of the following values:
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 properties.
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 |
foreground |
specifies up to four of the following space-delimited values, in any order.
<foreground-image url> || <foreground-repeat> || <foreground-attachment> || <foreground-position> || <foreground-color> || <foreground-gradient> | |||||||||||||||||||||||||
foreground-color | color of the foreground layer. Essentially this is the same as background-color but it is drawn on top of everything. So the only reasonable color values are the ones defined by rgba() - semi-transparent colors.
ATTN: solid colors on foreground will hide everything underneath them. | ||||||||||||||||||||||||||
foreground-attachment |
specifies one of the following values.
| ||||||||||||||||||||||||||
foreground-image |
specifies one of the following values.
| ||||||||||||||||||||||||||
foreground-image-frame | integer, for animated images (aPNG, GIF) that are collections of frames this property specifies number of frame to show.
This effectively freezes animation of the image at particular frame.
This property can be used in transition property to animate image from start to end frame. | ||||||||||||||||||||||||||
foreground-position |
specifies following values.
.style1 { background-position:top center }
.style2 { background-position:0 0 } | ||||||||||||||||||||||||||
foreground-position-left foreground-position-right foreground-position-top foreground-position-bottom |
Used in expand, stretch and no-repeat modes. See css-images-plus for more details. | ||||||||||||||||||||||||||
foreground-repeat |
specifies one of the following values.
See css-images-plus for more details. | ||||||||||||||||||||||||||
foreground-image-cursor |
Used when foreground-repeat has no-repeat value to define when mouse hovers foreground-image area.
Values: auto | crosshair | default | pointer | move | e-resize | ne-resize | nw-resize | n-resize | se-resize | sw-resize | s-resize | w-resize | text | wait | help | progress | no-drop or url of .cur or .ani file. | ||||||||||||||||||||||||||
Layout properties | border |
specifies one or more of the following space-delimited values: width, style, color.
| |||||||||||||||||||||||||
border-bottom |
specifies one or more of the following space-delimited values: width, style, color.
| ||||||||||||||||||||||||||
border-bottom-color | specifies one of the color names or RGB values in the Color Table. | ||||||||||||||||||||||||||
border-bottom-style |
specifies one of the following values.
| ||||||||||||||||||||||||||
border-bottom-width |
specifies one of the following values.
| ||||||||||||||||||||||||||
border-collapse* | as per CSS | ||||||||||||||||||||||||||
border-color | as per CSS | ||||||||||||||||||||||||||
border-left | as per CSS | ||||||||||||||||||||||||||
border-left-color | as per CSS | ||||||||||||||||||||||||||
border-left-style | as per CSS | ||||||||||||||||||||||||||
border-left-width | as per CSS | ||||||||||||||||||||||||||
border-right | as per CSS | ||||||||||||||||||||||||||
border-right-color | as per CSS | ||||||||||||||||||||||||||
border-right-style | as per CSS | ||||||||||||||||||||||||||
border-right-width | as per CSS | ||||||||||||||||||||||||||
border-style | as per CSS | ||||||||||||||||||||||||||
border-top | as per CSS | ||||||||||||||||||||||||||
border-top-color | as per CSS | ||||||||||||||||||||||||||
border-top-style | as per CSS | ||||||||||||||||||||||||||
border-top-width | as per CSS | ||||||||||||||||||||||||||
border-width | as per CSS | ||||||||||||||||||||||||||
border-radius |
as per CSS:
Current limitation: with non-zero border radius colors of all borders shall be the same. | ||||||||||||||||||||||||||
clear | as per CSS | ||||||||||||||||||||||||||
float |
specifies one of the following values.
| ||||||||||||||||||||||||||
margin |
specifies up to four of the following space-delimited values.
| ||||||||||||||||||||||||||
margin-bottom |
specifies one of the following values.
| ||||||||||||||||||||||||||
margin-left | --"-- | ||||||||||||||||||||||||||
margin-right | --"-- | ||||||||||||||||||||||||||
margin-top | --"-- | ||||||||||||||||||||||||||
padding |
Sets or retrieves the amount of space to insert between the object and its margin or, if there is a border, between the object and its border.
specifies one of the following values.
| ||||||||||||||||||||||||||
padding-bottom | --"-- | ||||||||||||||||||||||||||
padding-left | --"-- | ||||||||||||||||||||||||||
padding-right | --"-- | ||||||||||||||||||||||||||
padding-top | --"-- | ||||||||||||||||||||||||||
Classification properties
|
list-style |
specifies up to three of the following values, in any order: type, position, image.
| |||||||||||||||||||||||||
list-style-image |
specifies one of the following values.
| ||||||||||||||||||||||||||
list-style-position |
specifies one of the following values.
| ||||||||||||||||||||||||||
list-style-type |
specifies one of the following values.
| ||||||||||||||||||||||||||
list-marker-color | Sets the color of the list marker (bullet, number or tree line) | ||||||||||||||||||||||||||
list-marker-size | Sets size of font used for drawing bullets and numbers. For list-style-type:tree-line this attribute defines width of tree line. | ||||||||||||||||||||||||||
list-marker-style |
For list-style-type:tree-line this attribute defines style of the tree line:
| ||||||||||||||||||||||||||
Positioning and dimensional properties
|
position | static | relative | absolute | fixed As per CSS2 recommendation. | |||||||||||||||||||||||||
left |
As per CSS2 recommendation.
Value that specifies one of the following values.
| ||||||||||||||||||||||||||
right | |||||||||||||||||||||||||||
top | |||||||||||||||||||||||||||
bottom | |||||||||||||||||||||||||||
height |
Value that specifies one of the following values.
| ||||||||||||||||||||||||||
z-index | As per CSS2. | ||||||||||||||||||||||||||
overflow |
overflow-type [scroll-manner]. First overflow-type value specifies one of the following values. Shortcut attribute of overflow-x and overflow-y
Second (optional) parameter is a definition of the scroll-manner() function, see defintion of the scroll-manner below. | ||||||||||||||||||||||||||
overflow-x overflow-y |
overflow-type [scroll-manner]. First overflow-type value specifies one of the following values:
Second (optional) parameter is a definition of the scroll-manner() function, see defintion of the scroll-manner below. | ||||||||||||||||||||||||||
scroll-manner
scroll-manner-x
scroll-manner-y |
These attributes accept either inherit value or "function" named scroll-manner() with the following named parameters:
Example of scroll manner style definition:
div#scrollable {
overflow:auto;
scroll-manner: scroll-manner( page-animation:true,
step-animation:false,
step:auto );
} | ||||||||||||||||||||||||||
width |
specifies one of the following values.
| ||||||||||||||||||||||||||
min-height |
specifies the minimum height for an element.
| ||||||||||||||||||||||||||
min-width |
specifies the minimum width for an element.
| ||||||||||||||||||||||||||
max-height |
specifies the maximum height for an element.
| ||||||||||||||||||||||||||
max-width |
specifies the maximum width for an element.
| ||||||||||||||||||||||||||
flow |
Flow direction of child elements in block containers (e.g. DIVs). This attribute defines type of layout manager (LM) used by the block container.
See Flow and Flex Units document for more information. | ||||||||||||||||||||||||||
hit-margin | specifies up to four of the following space-delimited values. Notation is the same as for the margin attribute. hit-margin defines "hover area" of the element. Positive values increase hover area and negative values decrease it. Hit margins are calculated from border box of the element. | ||||||||||||||||||||||||||
size | length [ length]
This is a shortcut property for width and height properties. If only one length value is provided then both width and height will get that length value. If there are two values then first one will go to width and second to height properties. | ||||||||||||||||||||||||||
mapping | inherit | none | left-to-right | top-to-right | inherit( <part-list> ) | none( <part-list> ) | left-to-right( <part-list> ) | top-to-right( <part-list> ) 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. Note that is an inheritable by default property. So if to define body { mapping: left-to-right;} all directional properties of the element and its descendants will be mirrored horizontally. Meaning of part names in <part-list>:
| ||||||||||||||||||||||||||
Outline
Outlines similar to borders but differ from them in the following ways: 1. Outlines do not take up space.
2. All sides of outline rectangle has equal property values. |
outline |
shortcut attribute, accepts up to four values:
[ <'outline-color'> || <'outline-style'> || [<'outline-width'> [ <'outline-offset'> ] ] | |||||||||||||||||||||||||
outline-width |
Width of outline:
| ||||||||||||||||||||||||||
outline-style |
specifies one of the following values.
| ||||||||||||||||||||||||||
outline-color | color of the outline. | ||||||||||||||||||||||||||
outline-offset | Length units, offset of outline. Positive values - offset outwards, negative values - offset inwards. CSS3 attribute. | ||||||||||||||||||||||||||
Pseudo-classes and other properties
|
cursor | auto | crosshair | default | pointer | move | e-resize | ne-resize | nw-resize | n-resize | se-resize | sw-resize | s-resize | w-resize | text | wait | help | drag-copy | drag-move values or url of .cur or .ani file. | |||||||||||||||||||||||||
display | As per CSS1.
Supported values:
| ||||||||||||||||||||||||||
visibility |
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. | ||||||||||||||||||||||||||
direction |
specifies one of the following values.
| ||||||||||||||||||||||||||
transition |
Defines transition effect of changing of element state, contains space separated list of animated property definitions in the form:
propname(easeFunc,duration[,easeFuncRollback,durationRollback]) Where propname is a name of CSS property to animate and easeFunc is a name of ease curve function, one of:
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 Example:
.mybutton:hover { color:red; border-color: white; transition: color(linear,200ms) border-color(linear,100ms); } Note that transition was implemented in H-SMILE core long before it was specified by W3C so are differences in notation.
| ||||||||||||||||||||||||||
Paged media (printing) |
page-break-before |
Value that specifies one of the following values:
| |||||||||||||||||||||||||
page-break-after |
Value that specifies one of the following values:
| ||||||||||||||||||||||||||
Behavioral attributes | behavior |
list of whitespace delimeted nmtokens - names of native behaviors applied to this element.
Behavior is the name of builtin or application defined class of behavior. | |||||||||||||||||||||||||
prototype |
name [ url(...) ]
Only in Sciter! Name of the class in the script - prototype scripting object (class) of this element. Such a class can define methods, properties and event handling methods of the whole class of elements this style applies to. To use compound names like namespace.class enclose them into quotes: prototype: "Module.CoolWidget";
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). | ||||||||||||||||||||||||||
aspect |
( "functionName" [ url(...) ] ) +
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 will cause both handleClickAttribute() and handleFocusAttribute() to be called for the element. The this environment value in both calls will be that element. | ||||||||||||||||||||||||||
Other attributes | content |
"string" | attr(attrname) | prop(propname) 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 And if it is This allow to define different captions of some element by CSS using for example some attribute as a switch:
p.status[state="pending"] { content: "Pending"; foreground-image:...; } p.status[state="done"] { content: "Done"; foreground-image:...; } p.status[state="warning"] { content: "Warning!"; foreground-image:...; } content is applicable only to elements that allowed to have textual content. E.g. it will work for P, SPAN, etc. but not for TABLE. | |||||||||||||||||||||||||
vertical-scrollbar | "style-set-name" - style set name that defines styles of vertical scrollbar. | ||||||||||||||||||||||||||
horizontal-scrollbar | "style-set-name" - style set name that defines styles of horizontal scrollbar. See: html_samples/css-plus/scrollbar-styling.htm of how is should be defined. | ||||||||||||||||||||||||||
popup-position | popup-reference-point anchor-reference-point | advisory-position
Defines either:
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 | ||||||||||||||||||||||||||
popup-anchor-reference-point popup-reference-point |
default | top-left | top-center | top-right | middle-left | middle-center | middle-right | bottom-left | bottom-center | bottom-right default | top-left | top-center | top-right | middle-left | middle-center | middle-right | bottom-left | bottom-center | bottom-right Individual parts of popup-position above. | ||||||||||||||||||||||||||
zoom | % or float- zoom factor of element's content. 100% or 1.0 values designate no zoom.
NOTE: zoom in Sciter is close to IE's zoom but is different in two aspects:
|
The engine supports following length units:
The extended flex declaration is used in properties that accept flex units: margins, paddings and border widths. fx() function allows to define as flex as min/max caps applied to flex value:
fx(weight,min:length,max:length)
Where weight is a number of *
units and optional min and max lengths are caps limiting computed value of flexes. Example:
margin-left: fx(1,min:20dip,max:300dip);
is an equivalent of (but for margin-left):
width: 1*; min-width:20dip; max-width:300dip);
Engine supports following forms of defining color constants:
color: #f00; - #rgb form.
color: #ff0000 - #rrggbb form.
color: #aaff0000 - #aarrggbb form.
color: rgb(255,0,0) - rgb(0..255,0..255,0..255) form.
color: rgb(100%,0%,0%) - rgb(0..100%,0..100%,0..100%) form.
color: rgba(255,0,0,0.5) - rgba(0..255,0..255,0..255,0..1) form.
color: hsl(300,0%,0%) - hsl(0..360,0..100%,0..100%) form - HSL color space.
color: morph(basecolor, ...)
- color morphing/transformation function: basecolor is either color constant or color variable.
The function accepts one of several parameters:
hue:Adeg
- creates new color by changing H (Hue) component of basecolor in HSL color space. A is new angle, degree number 0...360 - absolute value of H component. rotate:Adeg
- changes H by relative rotation from base color, A is a rotation angle : -360deg ... +360deg.lightness:p%
- creates new color by changing Lightness component of basecolor in HSL color space. p is a number 0...100 - absolute value of L component.lightness:p%
- creates new color by changing L (Lightness) component of basecolor in HSL color space. p is a number 0...100 - absolute value of L component.lighten:p%
- changes Lightness component of basecolor in HSL color space by increasing basecolor::L component. p is a number 0...100 - relative increment of L component.darken:p%
- changes Lightness component of basecolor in HSL color space by decreasing basecolor::L component. p is a number 0...100 - relative decrement of L component.saturation:p%
- creates new color by changing S (Saturation) component of basecolor in HSL color space. p is a number 0...100 - absolute value of S component.saturate:p%
- changes S by increasing Saturation component of basecolor in HSL color space. p is a number 0...100 - relative increment of S component.desaturate:p%
- changes S by decreasing Saturation component of basecolor in HSL color space. p is a number 0...100 - relative decrement of S component.opacity:p%
- creates new color by changing A (alpha) component of basecolor in RGBA color space. p is a number 0...100 - absolute value of A component, if 100%
then color is opaque and if 0%
then color fully transparent.opacify:p%
- changes A (alpha) by increasing or decreasing current A value of basecolor. p is a number -100%...100% - relative increment/decrement of A component.color2,mix:p%
- creates color that is between basecolor and color2, p is a number 0%...100% - ratio of the mix. If p == 0% then result is basecolor and if 100% - color2.grayscale:p%
- converts the basecolor to grayscale. If p is 100% then result is pure grayscale color (R == G == B). If p is 0% then result is original basecolor.sepia:p%
- converts the basecolor to sepia. If p is 100% then result is pure sepia color, if p is 0% then result is original basecolor.Sciter (h-smile core) supports custom CSS properties. All properties with names starting with '-' are considered as custom properties. Custom properties are not inhereted from parent to child. Example of custom property declaration:
p { border: 1px solid red; -custom: "value"; }
After such a declaration all <p> elements will have style attribute -custom equals to "value".
Value of custom attribute can be either:
Variable is declared as a property but with name wrapped into var(...)
construct, example:
body { var(back-color): #ccc; var(text-color): #000; var(base-width) : 100dip; }
Variables are inherited from parent to child. For example: if variable is declared on <body> element it will be available in all its children.
Variables can be used in other property value declarations - all places where color or length units are expected by using either:
var(name,defaultValue)
- substitutes the declaration by value of the name or,
if it's not declared, by the defaultValue (color or length unit)length(name)
- substitutes the declaration by value of the name.
If variable with that name is not declared or is not a length result is undefined.color(name)
- substitutes the declaration by value of the name.
If variable with that name is not declared or is not a color result is undefined.Examples of variable use:
div { background-color: color(back-color); /* #ccc */ width: length(base-width); /* 100dip */ height: var(base-height,80dip); /* 80dip as base-height was not defined */ }