Actual programming with HTML and CSS (without javascript)

I usually stick with academic or research issues, but today, I wanted to have some fun. Geek fun.

While W3C describes Cascading Style Sheets (CSS) as a mechanism for adding style (e.g. fonts, colors, spacing) to Web documents, it is also a bona fide programming language. In fact, it is one of the most widespread declarative languages.

But how powerful is CSS? It is not Turing complete, so there is no hope of programming full applications.  However, CSS may be surprisingly powerful. (Update: It turns out that HTML+CSS is Turing complete!)

Suppose you are given a plain HTML table and you want to add counters and colors to it. Starting with this table:

<table>
<tr><th>City</th><th>Color</th></tr>
<tr><td>Montreal</td><td>Red</td></tr>
<tr><td>Toronto</td><td>Blue</td></tr>
<tr><td>Vancouver</td><td>Yellow</td></tr>
</table>

We want to color rows in alternative colors. We need counters and a way to color the second line differently.

Solution: Add the following lines to your CSS style sheet:

tr{counter-increment: mycounter}
table {counter-reset: mycounter -1}
td:first-child:before {content: counter(mycounter)". " }
tr:nth-child(2n+2) td {background-color: #ccc;}
tr:nth-child(2n+3) td {background-color: #ddd;}

Published by

Daniel Lemire

A computer science professor at the Université du Québec (TELUQ).

10 thoughts on “Actual programming with HTML and CSS (without javascript)”

  1. In 1997 or so, I wrote a small game in html (no javascript) that used the timed refresh meta. It showed a screen with images, good and bad guys, where you had to “shoot” the bad guy first. If you waited to long, you were shot. If you shot a good guy, you would loose as well. Not much for a game, but I was happy it could all be done with plain HTML 🙂

  2. This is a fantastic discovery. Completely novel to me, but I am concerned about browser compatibility. It looks like CSS3 so you can count out most IEs. What have you found?

  3. My instinct is that it is not, because you can’t delete characters on the ‘tape’. Counters and generators provide some limited computation ability but it’s not arbitrary and requires significant setup in the HTML to do anything big. Proving Turing-completeness is done by reducing a known Turing-complete language to the target… I haven’t seen that done.

Leave a Reply

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

To create code blocks or other preformatted text, indent by four spaces:

    This will be displayed in a monospaced font. The first four 
    spaces will be stripped off, but all other whitespace
    will be preserved.
    
    Markdown is turned off in code blocks:
     [This is not a link](http://example.com)

To create not a block, but an inline code span, use backticks:

Here is some inline `code`.

For more help see http://daringfireball.net/projects/markdown/syntax