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.
• Built-in set of HTML tags.

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;
  • Yet: flex units from web fronted developer perspective.
  • Yet: Comparison of display:flex (browser) and flow/flex units (Sciter).
• 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).
• Scripting behaviors and aspects – declarative script code assignment (binding) by CSS.

Script

• Sciter uses standard JavaScript in ES2020 specification;
• DOM and runtime , in general follows browsers API with desktop UI specific extras.
• Sciter natively implements JSX and Reactor . These are built-ins – no need for any pre-compiler to use them.

Documentation can be viewed locally by using SDK’s document viewer:

Sciter Docs

Localization

Check discussion here.

Behaviors and event handling

• Event handling in Sciter/JavaScript;

Canvas and Graphics

• Graphics Contexts in Sciter

Selectors

• List of CSS selectors supported by Sciter.
• CSS selectors are used as in CSS as in DOM, in following functions:
  • document.querySelector(“…”)
  • document.querySelectorAll(“…”)
  • element.$("...") – lookup for a child inside the element by given selector;
  • element.$$("...") – lookup for all matching children inside the element by given selector;
  • element.$p("...") – nearest parent matching the selector;
  • element.$is("...") – check if the element matches the selector;