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