Skip to main content

Conditional blocks

@supports rule​

The @supports CSS at-rule lets you specify CSS declarations that depend on Sciter's support for CSS properties. 

@supports (<supports-condition>) {
  /* If the condition is true, use the CSS in this block. */
}

A <supports-condition> declaration in Sciter may accept only property/value declaration:

@supports (transform-origin: 5% 5%) {
   /*... rules if Sciter supports transform-origin ... */
}

@if/@else rule​

The @if CSS at-rule lets you specify CSS declarations that depend on only load time values of media variables. 

@if (<media-expression>) {
  /* If the condition is true, use the CSS in this block. */
}
@if (<media-expression>) {
  /* If the condition is true, use the CSS in this block. */
} 
@else {
  /* Otherwise use the CSS in this block. */
}

A <media-expression> here is Sciter's media expression.

@if is used for media variables that are not changing at run-time. @if/@else has semantic of #if ... #else ... #endifin C/C++ preprocessor - compile time (load time in Sciter) conditional sections:

@if (Windows or MacOS) {
  html { background:white; }
} 
@else {
  html { background:black; }
}

Use @if blocks for conditions that never change at runtime and @media blocks for conditions that may change at run-time, e.g. desktop media variable will never change but high-contrast may change when user will switch to high contrast theme.