CSS UI Events Expansion Pack
CSS has :hover. Active CSS has :click, :mouseover, etc.
A CSS and JavaScript hybrid language for the browser.
Runs in realtime on all major modern browsers.
Create UI, ultra-fast SPAs, or cool components.
No massive ecosystem to maintain.
Minimalist. No dependencies.
The smartest DOM tool in the world.
Version 2.14.0 compressed size: 57kB GZip
<script src="/activecss-2-14-0.min.js"></script>Quick Links
ACSS Commands
ACSS Pseudo-selectors
Overview and docsExamplesFAQ
Mouseover wack-a-mole!
ACSS has expanded CSS syntax that lets you do a lot of things in less code.
This example demonstrates ACSS variables and reactive variables {{$varname}},
plus the nesting technique used to manipulate other elements on the page.
Study the docs in sequence to learn how to do this sort of thing yourself.
ACSS is leaner and more powerful when components are not used.
Performance is better as there is no staggered rendering, and actions on any element can affect any other element.
This works perfectly on websites with small teams, who have manageable internal rules for id names, class names, etc.
Even so, sometimes re-usable components are the appropriate tool,
for example when building an advert component which needs to stand alone.
When you do need components there are many methods available, including the ability to create them on pre-rendered HTML.
Highlights for version 12.4.0
toggle-take-class with a scope
Turning pre-rendered HTML into a component with private variables.
Two components are created in the example below.
The events are in the DOM scope, but the variables are isolated to each component.
Click on the blocks to see the effect.
Try changing strictlyPrivateVars to strictlyPrivate to ignore outer events, and the outer events that change the colour will stop working.
A reusable clock within an html block
ACSS code can now be placed inside a component's HTML block.
When the $time variable changes, the reactive render of the variable will update ($time inside double-curlies).
The $time variable is set to change every second (every 1s).
Because the component is set to strictlyPrivate, all variables used inside the component are applicable only to that component, which means that this code can be copied and pasted into any other ACSS code and will work as a self-contained component.
Looping inside an html block
This is useful when iterating an array for rendering inside a component, as shown in this example.
Render commands used within html blocks are concatenated into one string and drawn at the completion of the event flow.
Download and view version 2.14.0 changelog
Simply place in a script tag, or import as an npm package for Node.
<script src="/activecss-2-14-0.min.js"></script>