Functional CSS
CSS is supposedly used to style web-pages. I taught it to play tic-tac-toe instead.
tl;dr: CSS, by design, shall not be able to execute arbitrary code. However, working exclusively within CSS-specifications, it is still possible to implement simple games. Which I did.
I enjoy delivering high quality products. During my time as web developer, a big part of quality was loading speed and a smooth presentation. When you use JavaScript for styling, the web-page gets slow and sluggish. So I had decided to finally get a grasp on CSS.
Brief Introduction To Web-development
"The Web" mainly works by your browser getting some information, interpreting and displaying it. This happens using 3 computer-languages:
HTML
The backbone of any web-page. HTML tells a browser what information is presented, what functionality is required ("that's text, that's a button, that's a picture, ...") and the structure of that information. HTML defines lists, paragraphs, forms, and so forth.
CSS
Responsible for web-pages looking nice. From defining colors, positioning text and images to arranging text in nice columns. CSS does styling, but allows hiding things as well, which is the secret sauce of the game I built.
JavaScript
When all else fails, Javascript can probably fix it. As the only actual programming language designed to implement logic, it can do everything from sending additional requests, displaying ads to mining crypto-currencies. However, because it is running arbitrary computation, it's not as fast as the other two. Use sparingly!
The Weals and Woes with CSS
If you have any contact with web-development, you probably know this meme:
CSS is famous for "breaking" in unexpected ways and to generally behave unexpectedly.
Why?
CSS is a computer language. It follows strict rules. In theory, there should be no problem to understand what it does! And in fact, it isn't so much a problem of understanding than accepting a very hard truth:
CSS isn't people!
One of the biggest problems in interpreting CSS is a certain expectation that text will be displayed meaningfully. However, that's a human value. If you give some text to a human typesetter, they will naturally grasp some implied requirements like
- actually show the whole text
- don't draw things over the text unless specifically requested
- arrange things like text and images so the connection is obvious
- and so forth ...
However, CSS isn't a typesetter. It's just a tool allowing people to typeset (and style) a web-page. And like all computer languages, it's obedient. Any rule specifically written down is adhered to. And if too little space is given for too long words, well, words will be spilled.
CSS is old
When CSS was invented, programming languages where imperative. An imperative language specifies how a program is supposed to do it's job, not what that job actually is. It may be a matter of taste, but I feel like CSS shows a lot of this way of thinking.
QML is a modern styling language very similar to CSS in it's syntax. It was developed for/by the Qt-toolkit for user interface design. What's striking about QML is how similar it looks to CSS and how much farther it goes. CSS allows to position (e.g. a button) at a certain position of an enclosing element (e.g. an article). QML allows to specify requirements positioning has to adhere to instead, e.g. "that button should be on the right of this field." ... and Qt will figure out how to arrange all items to adhere to this requirement. In other words: QML is a declarative language.
Android uses a similar approach they call "Relative Layout". The syntax is very much distinct from CSS though. Just to show different solutions to the same problem exist.
Still Around
You probably guessed that CSS wouldn't still be around if it were awful. And to it's credit, CSS has many upsides, and even reasons to be implemented the way it is.
More than style
To apply styles correctly, i.e. to every element it's specific styling, elements have to be selected. CSS has invented their own, constantly expanding way to address specific parts of a web-page. That works so well, JavaScript implemented these selectors as well.
To drive home how awesome CSS selectors are: JavaScript has it's own way to select web-page-elements. Then jQuery came along, a framework implementing some useful functions in JavaScript. One central function was simply to understand the CSS selectors. This approach was so successful and popular, JavaScript adopted the functionality itself and made it part of the JavaScript-standard.
It's no wonder QML looks so similar to CSS. The way CSS is written, it's syntax, is very well suited to styling hierarchical user interfaces. What it's missing is just some functionality. But there is a good reason CSS isn't really moving in that direction:
Speed
CSS is just amazingly fast.
First, it's a language written with speed in mind. That means the language itself is designed so any valid statement can be turned into a very fast lookup. That is important because CSS isn't run once, but has to be evaluated every time something changes.
Second, it forgoes functionality that could be slow. So if you want fancy sparks flying from your headline, you probably need to consider a JavaScript approach. This statement isn't entirely true anymore, since CSS actually implemented a calc() function and thereby enabled slowing browser so much they crash.
Third, it's not a programming language. Unlike a programming language, CSS can't do everything. Most importantly, it can't repeat code arbitrarily. So the computer knows a lot about the structure CSS even before running any of it, which allows far better code optimization.
Extremely Powerful
Modern CSS is powerful enough to be dangerous. calc() can crash a browser and blending colors can reveal personal information. There are 3D operations which allow building 3D-maps with CSS alone. If you are willing to hit tab + return repeatedly, CSS is actually a programming language.
When I heard of these stories, CSS being Turing complete and leaking personal information, I started wondering how far I could take it. Turing-complete, but you have to hit tab + return repeatedly, seemed a bit dodgy. So I set out to find the fun subset of things CSS can be used for. The very first implementation was tic-tac-toe, with a bug I know and decline to fix, because it's just to beautiful and therefor a feature!
So, have a look!
It's round based, O places first, the winner is shown in the top right corner. But you have to reload the whole page to restart, so best to open the game in a new tab.
There are others out there doing much more beautiful stuff than me. They even hav their own game of tic tac toe.
Have fun!