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.

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>

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.

Also, on larger projects, isolated re-usable components are often necessary to avoid clashes of variable names and events.

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

See documentation

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.

See documentation

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.

See documentation

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.

See documentation

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>