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.
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 get the following result using a pure CSS approach:
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;}
Montreal, Canada 
Facebook
Friendfeed
LinkedIn
SlideShare
Delicious
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?
Comment by mattcopp — 11/1/2010 @ 11:10
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
Comment by Robin Millette — 11/1/2010 @ 11:11
@mattcopp
I’d like to know myself whether it works under Internet Explorer.
Comment by Daniel Lemire — 11/1/2010 @ 11:16
It’s not Turing-complete? Really? Seems like you could have all sort of fun with counters and ‘move-to’.
Comment by JeffE — 11/1/2010 @ 11:48
@JeffE Good old CSS is certainly not Turing complete. Is CSS3 Turing complete? I would be surprised, but please, suprise me!
References:
Wieser, C., CSS NG: An Extension of the Cascading Styles Sheets Language (CSS) with Dynamic Document Rendering Features, 2006.
Kepser, S., A simple proof for the Turing-completeness of XSLT and XQuery, Extreme Markup Languages, 2004
Comment by Daniel Lemire — 11/1/2010 @ 12:15
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.
Comment by Ian — 11/1/2010 @ 13:31
Sheesh…
A Turing Tar Pit which isn’t even Turing complete!
Comment by Kevembuangga — 12/1/2010 @ 10:28
@Kevembuangga People do useful things with CSS all the time, so it does not qualify as a bona fide Turing tar pit.
Comment by Daniel Lemire — 12/1/2010 @ 10:50
it does not qualify as a bona fide Turing tar pit.
I CAN tell you it does!
Comment by Kevembuangga — 12/1/2010 @ 22:13