DOM Inspector and “how to remove border from an input element”

June 21, 2014

Filed under: HTML and CSS,Sciter — Andrew @ 8:31 am

This how to remove border from input element is a popular question that I am getting time to time from new users.
And there are variations of it about dropdown select button, calendar cell, context menu and so on.

In this post I’d like to explain general method of solving such problems instead of answering “define the following …”

Each input element in Sciter is a plain DOM element or composition of plain DOM elements.

Input elements (and not only inputs) are getting their “primordial” styling by applying rules from Sciter’s internal “master.css” style sheet. To find out styles of particular DOM element start DOM inspector by clicking on its icon in Sciter.exe window.

To highlight needed DOM element click on it by mouse with CTRL+SHIFT keys pressed on keyboard. Or select the element in DOM tree in inspector’s window:

dom inspector

Inspector will show effective style rules applied to the element and also its final (used) styles.

As you see here that <input> element has no border at all. But it has
background-image: url(theme:edit-normal); background-repeat:stretch; instead – background image that is stretched to fill whole element’s area.

The theme:.... images are kind of virtual ones – their rendering is delegated to host OS UI theming services. Therefore background of this particular <input> element is drawn by host OS.

And finally here is the answer on “how to remove border from the input element”.

To suppress borders and any default background drawing declare the following:

input#my {
  border: none;  /* remove any border */
  background: none; /* remove any (default) background */

Sciter, SVG support

June 11, 2014

Filed under: Sciter — Andrew @ 5:02 pm

Adding SVG support to Sciter:

Sciter SVG demo rendering

Sciter SVG demo rendering

This time SVG implementation uses standard DOM model so can be accessed by TIScript Element interface and styled by CSS.

Same drawing on Mac OSX:

[tiscript] ‘this’ and ‘this super’ function arguments

May 27, 2014

Filed under: How-to,Sciter,Script — Andrew @ 2:56 pm

Each function in JavaScript and TIScript gets implicit argument named this.

So when you call method of some object as then foo object is passed to the bar(param) function as a value of this argument. And the param will get value of 1.

All of us who are practicing JS, Python, Ruby, etc. know about that ‘this’ thing pretty well.

But what shall you do when you have inner function and want to access ‘this’ value of outer function? The only way in JavaScript for that is to declare other variable with distinct name and assign ‘this’ to it: var that = this;.

To cover such code patterns I’ve introduced in TIScript “super this” concept, so we have following implicit variables in any function:

  • this – standard this variable;
  • this super – standard this variable of outer function;
  • this super super – this variable of outer-outer function;
  • etc.

Here is an example that outputs “6” in standard output:

class Test {

  function this(data) { // constructor = data;   // instance field 

  function Outer(arg1) {
    // this - hidden argument, local variable 
    // arg1 - argument, local variable

    function Inner(arg2)  {
      // this - hidden argument, local variable 
      // arg2 - argument, local variable
      // arg1 - outer variable - outer argument
      // this super - outer variable - outer 'this' argument
        (this super).data   // 1 
        + arg1              // 2
        + arg2              // 3
    return Inner;

var test = new Test(1);

var innerFunc = test.Outer(2);

stdout.println( innerFunc(3) );

Sciter 3.1 with Mac OS X support from now

May 19, 2014

Filed under: Sciter — Andrew @ 2:25 pm

First release of Sciter 3.1 is now available at

Sciter works now on Windows and on Mac OS X too.

Sciter layered window demo on Mac OS X

Sciter layered window demo on Mac OS X


  • Windows version is in stable phase (I didn’t change core implementation too much from Sciter 3.0).
  • Mac OS X is in beta phase with following known issues so far:
    • Work on master.css (default OS theme styling) is not complete yet. Expect some abnormalities in standard input renderings.
    • HTTP/HTTPS client is not complete yet so Element.request() calls (a.k.a. AJAX) will fail on http:// urls.

Note, API changes:

  • sciter.dll and sciter-osx.dylib expose single function SciterAPI() that returns pointer to "API interface table" – structure that contains all functions that used to be exposed directly in Sciter 3.0. Among other things this allows to use inspector.dll from statically linked Sciter code and to load Sciter DLL with greater flexibility. See SAPI() loader function.
  • All old API functions are implemented as inlines, like:
      inline LPCWSTR SCAPI SciterClassName () { return SAPI()->SciterClassName(); }
    so it is enough to recompile existing applications in order to use new API.
  • Mac OSX version does not have SciterProcND() for obvious reasons, use SciterCreateWindow() instead, it will create Sciter’s NSView instance inside its own NSWindow.
  • SciterCreateWindow() works on Windows too. You can use it to create standalone Sciter windows.

Fixes from latest ( version:

  • Fix of Event.x/yRoot computation
  • CSS++, mapping: left-to-right( alignment ), switches text-align:left to text-align:right and also does this for horizontal-align. It does NOT switch text-align:start | end; values.
  • Fix of text-overflow: ellipsis in GDI+ mode.
  • view.dialog() fix of custom frame, "resizeable" interpretation.
  • GDI+, rounded border rendering fix.
  • [tiscript, regexp] infinite loop on some types of REs in string.split(re).
  • [+plus] glibc++ compatibility fixes.
  • <img> fix of border rendering (default styling issue)
  • better shutdown handling (fonts)

Builds: win32, win64, osx64

Mac OSX, DPI and font sizes mess

April 12, 2014

Filed under: HTML and CSS,Sciter,Web Application Techologies — Andrew @ 8:10 pm

Most of applications on Mac OS X use fixed 72 DPI settings despite of all these Retina and other high-DPI monitors. I understand that this is legacy we’ve got from last century. But c’mon, it is 2014 out there …

Even conventional browsers that supposed to handle scaling well by using CSS rules are failing to render simple things like:

  <div style="width:3in; width:3in; border:1px solid">
    is it 3 inch square?

you will see everything but not 3 inches square here.

I am not getting what’s the problem to implement proper scaling. Here it is in Sciter on Mac:
DPI screenshot

Screenshot is taken on Mac with Dell UltraSharp U2711 monitor.

Sciter on Mac with native CoreGraphics backend

April 7, 2014

Filed under: Sciter — Andrew @ 12:36 pm

It is coming:

Sciter on Mac screenshot

Sciter on Mac

Core components are in pretty good shape, working on porting public API functions.

sciter-x.h will have all functions that use HWND refactored to use HWINDOW instead, that on Windows will resolve to HWND and on Mac OS X to NSView* (client portion of NSWindow).

« Previous PageNext Page »