There are no tracking or monitoring cookies on this site. There are only cookies used for documentation examples related to cookies.Close
Processing...
This may take a few seconds.

Introduction

Welcome to Active CSS!

 

If common JavaScript functionality for building websites was taken over by CSS, what would it look like?

Well, this is the goal of Active CSS - to see how far CSS could be pushed in taking over common JavaScript functionality.

CSS is so easy that even non-programmers can understand the basics when they read it (if you ignore the hierarchical factors and the browser quirks). All the commands are one-liners and there is a lot less going on to worry about in comparison to a function-based programming language.

Another bonus is that CSS focuses your attention directly on the web page itself and doesn't let you meander in programming issues. You don't have to call up an API command just to attach a style (ie. getElementById, etc.). You just type in the selector and away you go. CSS is very direct in applying styling instructions to the web page.

Also, it is easy to customize CSS. You can copy/paste some code from codepen or CSS-tricks and tailor it for your needs. This is arguably easier than trying to tweak or extend a function-based plugin.

So how do you make CSS into a fully-fledged programming language?

Well, the first thing is to allow events. The only event in CSS is the "hover" event. That isn't enough for interactivity. We need to at least allow for the "click" event.

Can we allow all the DOM events like ":click", ":mouseover", etc.? Yes.

Next is to add a target selector under the event, so if we click on something we can make something happen somewhere else. All actions on a web page are event-based and make things happen, so in theory this should be a very useful thing to have.

Ok - let's do that! How about have a button click that adds a class of "buttonHasBeenClicked" to the body tag?

button:click {
body {
add-class: .buttonHasBeenClicked;
}
}

Ok! Now we don't want any rules being overwritten or anything like that here. CSS is cool, but it only applies one style rule at a time and there can be a lot of mucking about trying to get a style to work sometimes. Every piece of code written in an event-driven programming language must be applicable, otherwise it's going to be unnecessarily complex. So let's remove the inheritance rules of static CSS. That makes coding a bit easier, as inheritance rules were really only the tricky part to coding in CSS sometimes. We'll just remove complexity if it isn't needed.

Next, create a bunch of higher-level commands to cater for common web building actions. And we should probably also allow some inline JavaScript for those times when CSS isn't enough. Let's also integrate some tooling for making single-page applications and while we're at it, let's add modern reactive variables, looping and a simpler solution for web components. All aligned to native browser functionality. And let's make it run really fast so there is no delay when everything fires up.

But wait, there is one more thing. Programmers like to program commands to run one after another, in sequence. CSS commands are static. CSS commands are not designed to run in a particular sequence. Let's make a change here, just for Active CSS declarations. Let's make all the commands run sequentially if they appear in action declarations.

And voila! We have successfully turned CSS into the most direct and intuitive event-driven language for the web!

So could CSS evolve to include the ultimate JavaScript framework inside the browser that we have been waiting for? It looks like it. The ultimate end-goal of Active CSS or something like it would be to be contained within the browser itself, incorporated as a branch of CSS.

Active CSS is awesome but is still evolving. Hopefully not many bugs though. Please let us know of any bugs if you find them, or if anything doesn't work as advertised. We're slowly going through scenarios but more testing is needed.

Once it has evolved a bit more and a lot more support has been shown then a formal specification will be started up for the W3C. This project will only get seriously considered for incorporation into the browser if people talk about it, use it and find out that it works for them. Only through prototyping something like this would it ever get seriously considered. So if you want to contribute suggestions or just use the framework for your projects and give feedback, or just want to help out in any way, your support is welcome!

This project is going to be a slow-burner, and that's ok. Contribute via github if you want to get involved.

(PS. If you think Active CSS is a cool idea, please consider giving it a star on github. It gives encouragement, gives the project more credibility, and lets us know people are interested. Thank you!)