Maintainable CSS

I have found Maintainable CSS site exceptionally useful for designing maintainable CSS systems. Modular and encapsulated: Styles don’t bleed or cascade without your permission. Any design requirements: Completely flexible to your needs. No tooling required: But you can use tooling if you want to. Easy to learn: Read the guides and see. Any size project:…

Tokenizer + ::mark() = syntax colorizer

Here is selfie of syntax (tiscript) colorizer – the text below is a full source code of syntax highlighting routine. The code has colorized itself: Can your browser do that in 40 lines of code? And here are styles that define style of tokens: plaintext > text::mark(number) { color: brown; } plaintext > text::mark(number-unit) {…

::mark(…) feature is comming

Please consider these tasks: Find all words in text on HTML page and highlight them Syntax highlighting: parse text of <pre> and mark all keywords by changing their color Find all misspelled words in <textarea> highlight them specifically. Currently you can do #1 and #2 by wrapping each text found into <span>s with specific classes…

In Sciter <frame> element may have content-style attribute defined. That content-style attribute takes URL of style sheet that gets applied on top of existing styles of the document: <frame src="some-child.htm" content-style="content.css" /> That content.css gets appended to the list of other styles of the some-child.htm as if that document has <link rel="stylesheet" type="text/css" href="content.css"> at…

display:none is considered harmful

Quite often in HTML/CSS based UIs we need to hide/show some elements in runtime. Probably the most widespread (and the worst) solution is to set display:none CSS property programmatically. That sounds quite easy at the first glance but solves only half of the problem – it hides – removes the element from rendering tree. But…

Context menus in Sciter

Context menu is a standard UI feature and in order to support them Sciter has following mechanisms on board: custom CSS property named context-menu. It defines location of DOM element ( usually it is one of <menu class=context> ) that will appear on context menu activation. Menu behaviors and their DOM events associated with menus….

Sciter. Declarative behavior assignment by CSS: ‘prototype’ and ‘aspect’ properties

From the very beginning Sciter supported declarative scripting class assignment to DOM elements. If you want all div.some-widget elements in your document to behave in some special way (be subclassed) then you will need: 1. in script to declare class SomeWidget : Behavior { function attached() { … } // called with ‘this’ set to…