Why would you want to switch behaviors by CSS?

Consider following dialog window:

It is defined in HTML and CSS and runs in Sciter. Note that it has two radio buttons “Pixels” and “Inches”. These buttons switch input mode of input elements from pixels (integer) to inches (float/decimal). Integer input is slightly different from float input. E.g. for integers you can provide spin buttons. And for float input you need to provide some additional format settings (e.g. number of digits after decimal point):



For the user convenience it is better if these input elements change their behavior when user will decide to switch units.
Here is how it could be done in Sciter (and in HTMLayout).

First, I have declared in CSS following:

    html[units="pixels"] input 
    {
      behavior:number;
    }
    html[units="inches"] input 
    {
      behavior:decimal;
      -format:"leading-zero:true; fdigits:2";
    }

That means if I will set attribute units of the html node (root) then all input elements inside will get either behavior: number or behavior:decimal. In case of decimal I am also providing some formatting details (as a custom attribute “-format” that behavior:decimal knows about).

The only thing left is to write event handler that will change value of the units attribute:

    self.select("button#pixels").onValueChanged = function()
    {
      var props = gatherData();
      self.attributes["units"] = "pixels"; 
      self.update();
      updateData(props);
    }
    self.select("button#inches").onValueChanged = function()
    {
      var props = gatherData();
      self.attributes["units"] = "inches";
      self.update();
      updateData(props);
    }

Pretty easy I would say, no?