A CSS UI Expansion Plugin
Build UI with CSS commands. This plugin turns CSS into a full event-driven language.
Active CSS (ACSS) supports all JavaScript DOM events, and has lots of cool features.
No pre-processing involved. Runs in real-time in the browser. Just add the plugin.
No overhead if it is unused. It fires up based only on what you code. Minimal event listeners.
Ultra-fast and compact. Embed your ACSS code in a similar way to CSS, or load from ACSS files.
Works on chromium browsers (Chrome, Edge, Opera, etc.) and Firefox. (ES6+)
ACSS is still evolving. If you want to help, please speak to us on GitHub.
Like the idea of this open-source project? Give it a star on GitHub!
45kB (Brotli compressed) — fully integrated with all features.
<script src="/activecss-2-9-1.min.js"></script>All the regular CSS styling commands that can be run dynamically are supported
New commands
New pseudo-selectors
Study the documentation in sequence to understand it!
So what does ACSS add to the CSS language?
All the JavaScript DOM events are supported, plus a few more special events.
CSS has :hover, but in ACSS we have :click, :mouseover, etc.
The concept of a target selector, which allows you to do things with elements that didn't directly receive the event.
CSS generally styles a set of elements on a static level, or a limited dynamic level.
But in ACSS, from any DOM event you can act on multiple elements, manipulate them, change CSS variables, etc.
And because ACSS is based on CSS syntax, all the additional UI commands are self-contained one-liners.
Want to add the same click event listener to lots of elements with a certain class?
ACSS is a lot easier than JavaScript for this, and it doesn't add multiple listeners.
.myClass:click { alert: "It worked! That's amazing!"; }
True sequential commands are new, including the awesomely asynchronous yet synchronous "pause" command.
There's lots more, and plenty to explore in ACSS — and don't miss the concept examples.
When you started with CSS, did you think "Why is there only a :hover event? Why isn't there a :click event?"
If you are someone who believes that CSS should only be for styling, then you are hopefully in for a surprise.
Highlights for version 2.9.1...
fade-to
New fade-in, fade-out and fade-to commands!
Fading continues from the state of an element at any given time, providing a smooth experience.
The cancelling of any existing fade action on the same element happens automatically, whenever a new fading action begins.
Docs: fade-in, fade-out, and fade-to.
(PS. If you click "crazy fade effect" and read the code and think "huh?", do not despair! There is an event flow — a sequence in which things run.)
Observe events — responding to changes on elements:
Now you can decouple your element reaction logic from the user event-driven logic with the new ACSS "observe" event.
It keeps an eye on elements, and when there are changes that make the condition true,
the observe event fires once.
In the example below, the observe event is placed on the body tag.
When the body tag changes to match the condition, the event fires.
The responsive code editor that you see above was also written in Active CSS.
Build occasional functionality, or a full application website.
Download and place in a script tag, or import as an npm package for Node.
<script src="/activecss-2-9-1.min.js"></script>