“Styles 2.0” in Sciter and beyond

Major CSS implementation refactoring is happening in Sciter for 4.4.2.xx at the moment.

Original CSS implementation architecture in H-SMILE core was established 14 years ago when CSS contained just handful of properties. Currently there are more than 300 of them defined in W3C spec and counting.

My initial optimistic implementation was relied on hypothesis that CSS is so perfect that it will be relatively stable and have compact property set.

The full property set was defined as a single structure similar to this:

struct style {
  string font_family;
  short  font_size;
  short  font_weight;  
  ...
}

Initial size of the structure defining CSS 2.0 property pack was 400 bytes – quite manageable. But currently, with all bells and whistles of CSS3, it is more than 2kb.

So the architecture became not quite optimal and hardly maintainable on the long run.

As a result I finally convinced myself to redesign CSS module of the engine. I knew that I need to do that even 4 years ago but “don’t touch what is working”, right?

Just for the note, “don’t touch…” principle is good at some extent. But at some point you will discover that Marxist’s Dialectics actually makes sense. In particular its “The law of the transformation of quantity into quality” .

Evolution of complex [programming] systems and societies for that matter perfectly follows this rule.

Increase density of the population steadily (quantity of people on square kilometer) and you will get a jump to different quality at some point – it suddenly becomes a breeding broth for things like the COVID, when accidental mutations can be tried frequently and effectively.

5 Replies to ““Styles 2.0” in Sciter and beyond”

  1. За счёт чего удалось оптимизировать “property pack” css3? Тот, который 2Кб? И скоро ли мы увидим HTML-notepad на новом оптимизированном “Styles 2.0”?

    1. property pack optimizations: struct’s were replaced by hash maps or just lists in some cases. So if you have a rule like this:

      div.some { text-align:center; }

      it will take memory only for text-align / center pair, but not those 2kb.

      HTML-notepad is a part of Sciter SDK. So the version that uses Styles 2.0 is already published inside SDK or on GitHub, take html-notepad.exe and sciter.dll from here https://github.com/c-smile/sciter-sdk/tree/master/bin.win/x32

      1. Thanks to You! Good news!

        > it will take memory only for text-align / center pair, but not those 2kb.

        If i understand right, a CSS property pack inherits it values from it parent. How You store this inherited values? If inside the same property pack, it will take all records (at general) and occupy all possible memory (2Kb). Otherwise, if You store inherited values outside property pack, it will save memory, but how it possible?

        1. > CSS property pack inherits it values from it parent

          All defined values. That makes the difference.
          And the second, elements with the same set of CSS properties share that set.

Leave a Reply

Your email address will not be published. Required fields are marked *

four × 2 =