介绍

Sciter 使用自己的 HTML/CSS 渲染引擎和 JS 运行时实现。

虽然为了与 W3C 浏览器运行时和渲染兼容而做出了一些努力，但由于不同的设计目标，存在差异：

1. Sciter 旨在尽可能紧凑，因为它是可嵌入的。因此，仅包含必要的 API;

2. Sciter 旨在提供桌面 UI。因此，它的 API：

• 以桌面窗口为中心;

• 支持将 DOM 元素渲染为“空降”的能力 - 在单独的桌面窗口中;

HTML

• 扩展的输入元素集;

• <frame> 可以出现在任何允许块元素的地方;

• <frame type=pager> – 打印和打印预览框架;

• <frameset> 可以作为拆分容器出现在任何位置。它还可以包含显式 <splitter> 元素，这些元素可以设置样式以匹配您的设计。 <frameset> 可能不仅包含框架元素，还包含其他块容器，如 <div> 、 <section> 等。

• 完全支持带有自定义标签的元素。例如，如果您觉得这 <toolbar> 看起来更好，那么 <div> 您可以使用 <toolbar> 标签。你唯一需要做的就是为它定义样式：CSS中的工具栏 {display:block; flow:horizontal; } 。

• 真实菜单和弹出元素：

• <menu> – 弹出菜单是普通的 DOM 元素，但在单独的弹出窗口中呈现，因此可以出现在主机窗口之外;

• <menu> – 弹出式上下文菜单，可以通过 Sciter 特定的上下文菜单 CSS 属性附加到 DOM 元素;

• <popup> – 在特殊弹出窗口中呈现的通用弹出元素。Popup 元素可以通过脚本中的 Element.popup（） 函数显示;

• HTML 快捷方式 – 无需打 <div id="component"> 字，您可以直接编写 <div#component.super> ;

• HTML Windows – 由 HTML 定义的桌面窗口。

• HTML <include> – 从 HTML 片段组装最终 HTML。

• 内置的 HTML 标记集。

CSS

CSS 2.1 已完全实现。

CSS 3 实现受到桌面 UI 中实用的选定模块的限制：

•   transform 但只有 2D;

• transition 和 animation ;

•  大多数 CSS3 选择器;

• border-radius - 圆角;

•   box-shadow 的;

• opacity;

• rgba() 、 hsl() 颜色;

• @font face - 嵌入字体;

• @media - 基于条件的CSS;

• var() - CSS变量和JS对它们的访问;

• filter()

• backdrop-filter()

•  CSS渐变;

 选择：

• flow/flex 作为 的 display:flexbox 替代品。

• flow:grid() 和 flex 单元提供了合理的 display:grid 替代方案。

 Sciter 特定：

• 样式集 - @set name { ...rules... }

• CSS 常量和 mixin

• context-menu： selector（...） 属性 – 允许定义 <menu> 用作其他元素的上下文菜单。

• @image-map - 符合人体工程学的CSS精灵。

• 脚本行为和方面 – CSS 的声明性脚本代码分配（绑定）。

有关详细信息，请参阅 CSS 部分。

JavaScript

Sciter 使用更新的 QuickJS 来完全实现 ES2020。

该语言及其运行时已更新，以便更好地服务于“UI 背后的语言”角色：

• 特定于 UI 的数据类型和单位;

• 内置 JSX 支持和本地编译器;

• 内置持久存储 - 开箱即用的 NoSQL 数据库;

• @sys模块中内置 NodeJS 运行时的 susbset;