Skip to main content

CSS

Sciter supports following units:

Constants

Constants can be declared globally as followed:

@const DARK : #222;
body {
background: @DARK;
}

Media Queries

Media queries behave a bit differently in Sciter.js when it comes to syntax and updating behavior.

Differences from browser behavior

  • Minimum and maximum constraints (like width < 600px and width >= 600px) trigger on screen size changes, not on window size changes like in browsers. For window size change behavior, check this example

Syntax

The media query expression syntax is based on Javascript syntax:

  • and is &&
  • min-width: 600px is width >= 600px
  • E.g. @media screen and (min-width: 600px) becomes @media screen && (width >= 600px) in Sciter.js

You can even declare your own variables, dynamically set and change their values through Javascript, and put conditions on what CSS rules to run depending on the value:

@media (viewport == "narrow") { div:nth-child(1n) { clear:after; } }
@media (viewport == "normal") { div:nth-child(2n) { clear:after; } }
@media isMobile { .columns { flow: vertical; } }
// set value in JS
Window.this.mediaVars({ viewport: "normal" });
Window.this.mediaVars({ isMobile: false });

StyleSet

Style set is a named block of style rules declarations that are applied to elements DOM sub-tree. it allow style declaration scoping like used in LESS and SASS

div { 
style-set: myStyle;
style-set-base: parentStyle //| inherit styleset from
}

@set myStyle //| inheritance is allowed, myStyle < parentStyle
{
:root { //| Element itself (div)
...
}
p { //| Child element
...
}
}

You can assign it from HTML, file.css#myStyle if the style file is not included.

<div styleset="#myStyle"></div>

Mixin

Named set of CSS properties that can be applied by @name to CSS rules, can use params.

@mixin LIKE-BUTTON(basecolor)
{
behavior:button;
color: #ffffff;
background: linear-gradient(top, tint(basecolor,+0.3), basecolor);
}

div {
@LIKE-BUTTON(#fff);
...
}

ImageMap

@image-map std-tree-icons
{
src: url(sciter:tree-icons-x1.png) 100dpi,
url(sciter:tree-icons-x2.png);
cells:2 1; /* 2 columns, 1 row */
/* logical names of the parts, see radios.png */
items:
plus,
minus;
}

MISC