UP | HOME

CSS

The main problem with CSS is that it doesn’t have any simple underlying formal system that binds together its behaviour. The box model explains how boxes — DOM elements — get their borders, margins, padding, and sizes , but there is much going on ‘behind the scenes’ in rendering CSS. The box model is mostly silent about how the placement and sizes of these boxes on-screen relates to one another — there are now at least four different systems baked into CSS for controlling the placement of them. Letters and words (text in general) are treated like magical objects which just appear in and CSS has almost no way to deal with them as their own things unless you’re willing to wrap them all in their own wrapper elements.

This is in stark contrast to TeX whose very simple, very adaptable box-and-glue model specifies how boxes appear relative to one another, from large-scale issues like how big the text area on the page is , right down to how letters appear within words and how words appear within paragraphs. Now, I’m not suggesting that TeX’s model is the one that is right for the web, or the one that should have been adopted for the web, but it shows how a very simple set of layout rules can produce a very powerful system.

Another problem with CSS which has resulted in it being overloaded with features is its lack of means of abstraction and combination. Indeed, a simple layout algebra and a means of abstraction and combination would solve essentially all of the problems of CSS in a far smaller package. The only remaining problems would be text styling and colour/image selection, both of which are tasks that CSS does in fact perform mostly adequately (though colour manipulation functions are missing).

The natural objection to change is that we already have CSS and it’s baked into browsers and adding something else incompatible would be a waste. But on the scripting front we already have WebAssembly coming in as a lower-level alternative to JavaScript. It’s easy to imagine that browsers in the future will implement JavaScript with a simple compiler which targets WebAssembly, as a compatibility measure once most websites have switched to serving wasm. Likewise, in the future we could re-implement CSS in terms of the lower level (and yet more powerful) language I (and others) propose, which would offer more direct access to the mechanisms of object placement on-screen.