Variables and Attributes

CSS Variables

Declaration

Sciter supports variable declarations in two forms:

• --name : ... - default CSS variable declaration form;
• var(name) : ... - Sciter's, ergonomic form;

Examples:

body {
  var(text-color): #000;
  var(base-width): 100px;
  /* 4.4.8.0+ */
  --text-color: #000;
  --base-width : 100px;
}

Usage

Variables are inherited from a parent to a child.

Variables can be used in other property value declarations - all places where string, color or length units are expected by using either:

• var(name,defaultValue) - substitutes the declaration by defaultValue if name not declared;
• length(name) - Sciter's length variable specialization form;
• color(name) - Sciter's color variable specialization form;

Examples of variable use:

div {
  color: color(text-color);  /* #000 */
  width: length(base-width); /* 100px */
  height: var(base-height,80px); /* 80px as base-height was not defined */
  font-size: var(--base-width); /* 100px */
}

CSS Attributes

attr(name) declaration

In Sciter you can define default values of attributes in CSS for matching DOM elements using attr(name) : "..." declarations:

select div {
  attr(role) : "option";
}

Declarations like these allow to eliminate repeatable declarations in HTML as this:

<select|list> 
  <div role="option">...</div>
  <div role="option">...</div>
  ...
</select>

note

CSS based DOM attribute declarations is purely a Sciter feature, standard CSS does not provide anything close.

attr(name) usage

The attr(name) "function" can also be used as a value of content property and as a value of other attr(name) declarations.

If you have

<button value="Press me!" />

then with the style

  button {
    content: attr(value);
  }

You will have the button rendered with "Press me!" text.

note

Sciter also supports parent-attr(name) value function that gets value of attribute name from parent element.