for Web programmers

HTML

Sciter supports all standard elements defined in HTML5 specification with some additions.

  • Extended set of input elements
  • <frame> can appear at any place where block elements are allowed;
  • <frame type=pager> –  print and print preview frame;
  • <frameset> can appear anywhere as a split container. It can also contain explicit <splitter> elements that can be styled to match your design. <frameset> may contain not only frame elements but other block containers like <div>, <section>, etc.
  • Elements with custom tags are fully supported.
    If, for example, you feel that <toolbar> looks better then <div class="toolbar"> you can use <toolbar> tag. The only thing that you will need to do is to define style for it: toolbar {display:block; flow:horizontal; } in your CSS.
  • Real menus and popup elements:
    • <menu class=popup> – popup menu that is normal DOM element but gets rendered in separate popup window so can appear outside of host window;
    • <menu class=context> – popup context menu that can be attached to a DOM element by Sciter specific context-menu CSS property;
    • <popup> – generic popup element rendered in special popup window. Popup elements can be shown by Element.popup() function in script;
  • HTML shortcuts –  instead of typing <div id="component" class="super"> you can just write <div#component.super>;
  • HTML Windows – desktop windows defined by HTML.
  • HTML <include> – assemble final HTML from HTML fragments.

CSS

Sciter supports CSS level 2.1 in full, some CSS 3 features with Sciter and desktop UI specific extensions:

  • Full map of supported CSS properties;
  • CSS constants;
  • The @image-map feature – so called image sprites or catalogs but with symbolic names and multi-DPI support;
  • The flow property and flex units – super-set of flexbox and grid modules introduced by CSS3;
  • background-repeat:expand – expandable 9-sections images. foreground-repeat: expand is also supported.
  • foreground (image and color) feature – same set of properties as for background but for additional foreground layer. Attribute src in <img src=...> is mapped on img { foreground-image:url(...) } so you can style <img> rendering, e.g. foreground-size in the same way as background-size.
  • fore/background-image-frame: <integer> property – allows to freeze animated GIF or APNG on particular frame. Therefore this property allows to start/ stop animated images or use them as image catalogs.
  • context-menu: selector(...) property – allows to define <menu class=context>  to be used as a context menu for other element(s).
  • transition in Sciter’s CSS. Note that transitions in H-SMILE core (HTMLayout, Sciter) were introduced long before they were proposed and accepted by W3C and they use different syntax.
  • Scripting behaviors and aspects – declarative script code assignment (binding) by CSS.

Script

(tbd)
JavaScript versus Dart versus SciterScript
TIScript Language versus JavaScript.

Localization

Check discussion here.

Behaviors and event handling

(tbd)

Selectors

(tbd)
Built-in jQuery alike features, $ and $$ functions

Alternative to <canvas>

immediate and buffered drawing modes.
(tbd)

Libraries

(tbd)