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!

 

Software architects can design computer languages to work in specific environments, such as the browser, and create higher-level commands that make it easier for programmers to program certain things. Like the CSS animation command. For developers that made animation easier to code, as the programming syntax was designed specifically for the browser environment and therefore the animation syntax was tailored by the architects to be nice and simple. It's a no-brainer to use CSS when you can instead of JavaScript.

Up to this point, CSS has been a tool for adding properties to objects on the web page, and a little bit of animation. But that's about it.

But what 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, to make things a little bit easier for the developer.

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 or class-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 CSS to use all the browser 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. So let's add ":click", ":mouseover", etc. - all the browser events - following the existing syntax of ":hover".

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 - what would that look like? Let's see what would be the simplest way to have a button click that adds a class of "buttonHasBeenClicked" to the body tag using CSS syntax using a "target selector" underneath the "event selector":

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

Now we don't want any rules being overwritten or anything like that here. CSS 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 to make coding a bit easier.

Next, create a bunch of higher-level commands to cater for common webpage actions, like "add-class", "remove-class" - commands like that that can directly manipulate the objects on the page - the elements (HTML tags) on the page.

And we should probably also allow some inline JavaScript for those times when CSS isn't enough on it's own.

Let's also integrate some tooling for making single-page applications based only on the front-end state and while we're at it let's try and get a simpler front-end web components solution too.

Most importantly the whole thing needs to work with native browser functionality so that when improvements are made to the browser everything still works. So web components need to work with regular shadow DOMs and we also cannot have a virtual DOM as that bypasses the inbuilt browser functionality. The DOM is already stored in memory - let's work with that.

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 a proper event-driven language designed specifically for browsers!

Once it has evolved more then a formal specification will be started up for the W3C. Only when no further syntax changes are deemed necessary and the language has remained stable for a long while can it be even considered for incorporating into the browser. It is very unwise and practically impossible to make breaking syntax changes to a language once it hits the browser, as once thousands of people have used a particular syntax, changing it will break their websites. So it is important to get it right. That is the main reason it takes so long for changes to be made to CSS and JavaScript. Functionality can be added to the browser, but it is rare that anything is ever taken away. Hence this working prototype is designed to speed the process up a bit and provide a full solution, rather than having a massive written spec which is harder to visualize. Actual working syntax can then be analyzed and tweaked in the prototype before implementation into the browser.

The good news is that the prototype can be used on real websites in a cross-browser way and is future-compatible, so that even if functionality does get implemented in the browser natively Active CSS should continue to work with your config predictably. It is a completely separate written language to CSS and not connected to the CSS rendering engine directly in any way. Essentially, if the command is found in Active CSS then it runs it there, otherwise it will try and run it as a regular CSS command.

Contribute via github if you want to get involved! Help is needed in the area of testing and suggestions if you get a great idea or if you think something can be done in a better or easier way.

(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!)