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.

Core Download

Downloading the core

There are three editions of the core. Production, development, and core development.

Use the production (prod) core live.

For offline development, use the dev edition offline. This core will support the soon-to-be-released DevTools extension.

If you are working on enhancing the core, use the core dev edition. Use this only if you are hacking the Active CSS core.

Maximum backwards compatibility is intended for all future releases, to follow in the spirit of CSS, JavaScript and HTML.

Each new feature is unit-tested offline before release, but please test your code after every upgrade before deploying live. Let us know if you find any errors on previously working code asap, and these will become priority fixes. Don't assume that we already know that a bug exists, because we may not have ran across your scenario, and by reporting it you may save the day.

Note: If you are upgrading from an old version, go up the line with the releases looking for "BREAKING CHANGE" to see if you need to fix anything in your config. Few changes should require more than a find & replace action.

Version 2.5.0 "Wanda"

Release date: 17 March 2021

Production core: 35kB with brotli compression, 117kB minified
Development core: 37kB with brotli compression, 126kB minified

Download all script tag editions from:
https://github.com/Active-CSS/active-css/tree/master/dist/v-2-5-0

Click here for full installation instructions.

Changelog

  • NEW FEATURE: New strictlyPrivateEvents option for total component event encapsulation (replaces prior "privateEvents" option).
  • NEW FEATURE: New session-storage and local-storage options added to var action command, with complex variable support and full DOM reactivity.
  • NEW FEATURE: New var-delete action command.
  • NEW FEATURE: New end-of-field option added to focus-on action commands to allow putting the cursor at the end of the line on focus.
  • NEW FEATURE: New {$RAND...} variables for handling different types of random strings with optional varying lengths.
  • NEW FEATURE: New element property variable type {@@property} to complement existing {@attribute} variable type for when you need dynamic values.
  • NEW FEATURE: New options added to console-log action command - target and variables to help with debug actions.
  • NEW FEATURE: Added proper support for variable referencing within array items.
  • BREAKING CHANGE: Change prior privateEvents behaviour so that inner component elements can be targeted from outside the component.
    To upgrade from the latest version of the core, in your config @component lines, replace privateEvents to strictlyPrivateEvents. The new strictlyPrivateEvents option has the same behaviour as the prior privateEvents option.
    See the Components section of the docs to get the full info on why this is an improvement and what you can now do because of the change.
  • BREAKING CHANGE: There were lots of fixes to do with using complex variables (arrays inside objects, etc.) in this release. Hopefully these have all been solved now. There shouldn't be too much breakage, if anything, but if you do use variables you should test your code and check how they are being used in your config. Any breaking changes will be in the area of how double-quotes are being used with variables. If you need some visual references on how variables are used, you can check out the Concept Examples in the docs - specifically the new "Todo" example to see how variables are used in there. If you do find anything strange with variables that you cannot resolve, please do file a bug report as it will get addressed promptly.
  • SECURITY FIX: Disallow dynamic DevTools insertion of Active CSS in production core.
  • SECURITY FIX: Remove possibility of double evaluation with variables due to progressive substitution when evaluating for render and at other times.
  • BUG FIX: Fix for the issue of delayed actions not running after component is removed.
  • BUG FIX: Fix to custom triggering of events in and out of components when chained.
  • BUG FIX: Fix to clickoutside event as it wasn't working when set on inner shadow DOM elements.
  • BUG FIX: Fix to custom event trigger delays so they work as expected in components.
  • BUG FIX: Fix config lazy-loading.
  • BUG FIX: Memory clean-up and loads of stability fixes and optimizations.
  • BUG FIX: Fix variable scoping issues with the run, create-command and create-conditional commands.
  • BUG FIX: Fix to ensure document title setting always removes HTML entities correctly.
  • BUG FIX: Fix several issues to do with handling complex variables, variable re-assignment and using variables in components.
npm editions

Production core: https://www.npmjs.com/package/active-css/v/2.5.0
Development core: https://www.npmjs.com/package/active-css-dev/v/2.5.0
"If you are working on the core" core: https://www.npmjs.com/package/active-css-core-dev/v/2.5.0


Version 2.4.3 "Elena"

Release date: 24 January 2021

Production core: 32kB with brotli compression, 106kB minified
Development core: 34kB with brotli compression, 115kB minified

Download all script tag editions from:
https://github.com/Active-CSS/active-css/tree/master/dist/v-2-4-3

Changelog

  • BUG FIX: Fix to the multiple renders in same target selector related to implementation of {$CHILDREN}.
  • BUG FIX: Fix to var command for assigning a value to an array item.
npm editions

Production core: https://www.npmjs.com/package/active-css/v/2.4.3
Development core: https://www.npmjs.com/package/active-css-dev/v/2.4.3
"If you are working on the core" core: https://www.npmjs.com/package/active-css-core-dev/v/2.4.3

View details


Version 2.4.2 "Carla"

Release date: 30 December 2020

Production core: 32kB with brotli compression, 106kB minified
Development core: 34kB with brotli compression, 115kB minified

Download all script tag editions from:
https://github.com/Active-CSS/active-css/tree/master/dist/v-2-4-2

Changelog

  • NEW FEATURE: Support for setting native CSS variables dynamically.
npm editions

Production core: https://www.npmjs.com/package/active-css/v/2.4.2
Development core: https://www.npmjs.com/package/active-css-dev/v/2.4.2
"If you are working on the core" core: https://www.npmjs.com/package/active-css-core-dev/v/2.4.2

View details


Version 2.4.1 "Agnes"

Release date: 28 December 2020

Production core: 32kB with brotli compression, 106kB minified
Development core: 34kB with brotli compression, 115kB minified

Download all script tag editions from:
https://github.com/Active-CSS/active-css/tree/master/dist/v-2-4-1

Changelog

  • BUG FIXES: Re-introduce native template and slots support.
npm editions

Production core: https://www.npmjs.com/package/active-css/v/2.4.1
Development core: https://www.npmjs.com/package/active-css-dev/v/2.4.1
"If you are working on the core" core: https://www.npmjs.com/package/active-css-core-dev/v/2.4.1

View details


Version 2.4.0 "Lance"

Release date: 27 December 2020

Production core: 32kB with brotli compression, 106kB minified
Development core: 34kB with brotli compression, 115kB minified

Download all script tag editions from:
https://github.com/Active-CSS/active-css/tree/master/dist/v-2-4-0

Changelog

  • NEW FEATURE: Added "samesite" option to set-cookie command.
  • NEW FEATURE: New document-title command.
  • NEW FEATURE: New render-replace command.
  • NEW FEATURE: New stop-event-propagation and stop-immediate-event-propagation commands and a fix to stop-propagation.
  • NEW FEATURE: CI pipeline set up for the core, with basic tests setup for most of the action commands. More tests needed though.
  • NEW FEATURE: Full implementation of inline Active CSS, so that dynamic addition and removal of Active CSS style tags works as expected.
  • NEW FEATURE: New "shadow" target selector option for applying actions inside a shadow DOM, eg. #hostTag -> shadow -> p {...}.
  • NEW FEATURE: Complete removal of reactive variable placeholders from the DOM.
  • NEW FEATURE: New {$HTML}, {$HTML_ESCAPED} and {$HTML_NOVARS} variables for use in privateVars components.
  • NEW FEATURE: New if-max-width, if-max-height, if-min-width and if-min-height conditionals.
  • NEW FEATURE: Introduction of "privateEvents", "privateVars" and "strictlyPrivateVars" for components.
  • NEW FEATURE: Added a simple way to create client-generated iframes.
  • NEW FEATURE: Support for metakey as a keyboard event. Added more key events.
  • NEW FEATURE: Added "<" CSS selector for use in the target selector only. Like .closest() but starting with the parent element.
    This means that elements can be targeted like this: "strong < p" which returns all unique p tag parents of strong tags. Multiple "<"s are allowed in a selector.
  • NEW FEATURE: Added parameter to create-element command for permanent assignment of a component without the need for additional rendering when drawn.
  • NEW FEATURE: New code editor for the docs website built as an Active CSS component.
  • NEW FEATURE: Overall speed improvements and optimizations to the core due to more targeted reactive variable updating.
  • BUG FIX: Fixes to native custom element lifecycle events so they work as expected (docs still to do on that).
  • BUG FIX: Proper "after" events added for load-style, load-script and ajax-pre-get commands.
  • BUG FIX: Allow load-style and load-scripts to work in a shadow DOM + allow the same stylesheet to work in multiple shadow DOMs.
  • BUG FIX: The var command was trying to evaluate too many variables on the right-hand side of the equation - this is now fixed.
  • BUG FIX: Internal clarification of host variable referencing.
  • BUG FIXES: A bunch more fixes.
  • DEPRECATION: The "private" option for @component declarations has been deprecated.
npm editions

Production core: https://www.npmjs.com/package/active-css/v/2.4.0
Development core: https://www.npmjs.com/package/active-css-dev/v/2.4.0
"If you are working on the core" core: https://www.npmjs.com/package/active-css-core-dev/v/2.4.0

View details


Version 2.3.0 "Phil"

Release date: 17 August 2020

Production core: 26kB with brotli compression, 88kB minified
Development core: 29kB with brotli compression, 97kB minified

Download all script tag editions from:
https://github.com/Active-CSS/active-css/tree/master/dist/v-2-3-0

Changelog

  • NEW FEATURE: Nested loops.
  • NEW FEATURE: Sequential target selector execution.
  • NEW FEATURE: Sequential action command execution. (Note that these changes will work with old config and allows optimization. To optimize, remove "after stack" or "after 0s" and place commands and target selectors sequentially if they aren't already in the right sequence. Only do this with synchronous commands though. You still need the afterAjax event for ajax commands.)
  • PERFORMANCE UPGRADE: Faster initialization.
npm editions

Production core: https://www.npmjs.com/package/active-css/v/2.3.0
Development core: https://www.npmjs.com/package/active-css-dev/v/2.3.0
"If you are working on the core" core: https://www.npmjs.com/package/active-css-core-dev/v/2.3.0

View details


Version 2.2.4 "Leo"

Release date: 13 July 2020

Production core: 26kB with brotli compression, 87kB minified
Development core: 28kB with brotli compression, 95kB minified

Download all script tag editions from:
https://github.com/Active-CSS/active-css/tree/master/dist/v-2-2-4

Changelog

  • BUG FIX: fix to further isolate delayed actions with a new internal ID for added config commands so we can pinpoint exactly which ones get cancelled or cleaned up. Also, improve clean-up by not trying to run actions on elements that are not there - this was only partially working and not having this would have been affecting performance where a lot of cancel-timer actions were taking place.
npm editions

Production core: https://www.npmjs.com/package/active-css/v/2.2.4
Development core: https://www.npmjs.com/package/active-css-dev/v/2.2.4
"If you are working on the core" core: https://www.npmjs.com/package/active-css-core-dev/v/2.2.4

View details


Version 2.2.3 "AIDA"

Release date: 13 July 2020

Production core: 26kB with brotli compression, 87kB minified
Development core: 28kB with brotli compression, 95kB minified

Download all script tag editions from:
https://github.com/Active-CSS/active-css/tree/master/dist/v-2-2-3

Changelog

  • BUG FIX: fix to cancel-timer so that clashing un-delayed actions don't clean up the internal record of the same delayed actions on the same element before the action has completed - making it impossible to run cancel-timer on the element for similar delayed actions.
npm editions

Production core: https://www.npmjs.com/package/active-css/v/2.2.3
Development core: https://www.npmjs.com/package/active-css-dev/v/2.2.3
"If you are working on the core" core: https://www.npmjs.com/package/active-css-core-dev/v/2.2.3

View details


Version 2.2.2 "Campbell"

Release date: 12 July 2020

Production core: 26kB with brotli compression, 87kB minified
Development core: 28kB with brotli compression, 95kB minified

Download all script tag editions from:
https://github.com/Active-CSS/active-css/tree/master/dist/v-2-2-2

Changelog

  • BUG FIX: fix to multiple rendering of pre-gotten ajax return strings - this was causing a major performance hit when switching pages as well as causing weird stuff.
  • BUG FIX: fix to attribute binding in shadow DOMs not always working correctly.
npm editions

Production core: https://www.npmjs.com/package/active-css/v/2.2.2
Development core: https://www.npmjs.com/package/active-css-dev/v/2.2.2
"If you are working on the core" core: https://www.npmjs.com/package/active-css-core-dev/v/2.2.2

View details


Version 2.2.1 "Izel"

Release date: 11 July 2020

Production core: 26kB with brotli compression, 87kB minified
Development core: 28kB with brotli compression, 95kB minified

Download all script tag editions from:
https://github.com/Active-CSS/active-css/tree/master/dist/v-2-2-1

Changelog

  • NEW FEATURE: New variable type - HTML variables, in the format {$varname} (or {item.$varname} in an array or loop). This variable can contain raw HTML, which is necessary sometimes in ajax return variables. This variable type does not support data-binding. It might do later. Dunno yet.
  • NEW FEATURE: upgrade to "remove" command so that it works with "me", "self" and "this".
  • BUG FIX: fix to "location" command so that it actually works when used within a component.
  • BUG FIX: fix to only html-escape variables when rendering, and not for any other command type.
  • BUG FIX: fix to "if-var" so it can be checked to see if a variable exists when only using one parameter.
  • BUG FIX: fix to attribute binding storage format that was causing popstate errors and probably other things.
  • BUG FIX: fix to erroring popstate event on Chrome.
  • BUG FIX: fix to component temporary tag removal.
npm editions

Production core: https://www.npmjs.com/package/active-css/v/2.2.1
Development core: https://www.npmjs.com/package/active-css-dev/v/2.2.1
"If you are working on the core" core: https://www.npmjs.com/package/active-css-core-dev/v/2.2.1

View details


Version 2.2.0 "Johnson"

Release date: 8 July 2020

Production core: 26kB with brotli compression, 86kB minified
Development core: 28kB with brotli compression, 95kB minified

Download all script tag editions from:
https://github.com/Active-CSS/active-css/tree/master/dist/v-2-2-0

Changelog

  • NEW FEATURE: "@command" - new syntax in addition to the existing create-command and create-conditional action commands.
  • NEW FEATURE: Private variable scoping is now an optional parameter for all components regardless of DOM area, so nested shadow DOM components can now be scoped to one variable area if required, and so components no longer have to be shadow DOM to benefit from variable isolation.
  • NEW FEATURE: All component types (shadow DOM, private, non-private/"global") now allow scoped events by default and will respond to beforeComponentOpen and componentOpen events.
  • NEW FEATURE: New "if-var" conditional command.
  • NEW FEATURE: Introduce "@conditional" as alternative conditional declaration syntax, in addition to existing shorthand "?".
  • NEW FEATURE: Allow intuitive grouped conditionals syntax "@conditional first, second {}", or "?first, second {}" as an additional option to existing syntax ("?first, ?second {}" and "@conditional first, @conditional second {}").
  • BREAKING CHANGE: For shadow DOM components to have private variable scoping, they must now have the "private" parameter in the @component line as well as the existing "shadow [open (default)/closed]" parameters.
  • BREAKING CHANGE: "beforeShadowOpen" event is now "beforeComponentOpen", and "shadowOpen" event is now "componentOpen" to work identically for both scoped components and shadow DOM components.
  • BREAKING CHANGE: External reference to "o.shadowDoc" has now been renamed to "o.compDoc" to reflect the component area for both scoped components and shadow DOM components.
  • BREAKING CHANGE: External reference to "o.shadowRef" has now been renamed to "o.compRef" to reflect the component area for both scoped components and shadow DOM components.
  • BUG FIX: Fixed a bug with the var command for a specific syntax parsing scenario.
npm editions

Production core: https://www.npmjs.com/package/active-css/v/2.2.0
Development core: https://www.npmjs.com/package/active-css-dev/v/2.2.0
"If you are working on the core" core: https://www.npmjs.com/package/active-css-core-dev/v/2.2.0

View details


Version 2.1.2 "Antoine"

Release date: 15 June 2020

Production core: 25kB with brotli compression, 84kB minified
Development core: 27kB with brotli compression, 92kB minified

Download all script tag editions from:
https://github.com/Active-CSS/active-css/tree/master/dist/v-2-1-2

Changelog

  • BUG FIX: Fix to variable binding within shadow DOM element attributes so that it works as expected.
npm editions

Production core: https://www.npmjs.com/package/active-css/v/2.1.2
Development core: https://www.npmjs.com/package/active-css-dev/v/2.1.2
"If you are working on the core" core: https://www.npmjs.com/package/active-css-core-dev/v/2.1.2

View details


Version 2.1.1 "Melinda"

Release date: 14 June 2020

Production core: 25kB with brotli compression, 84kB minified
Development core: 27kB with brotli compression, 92kB minified

Download all script tag editions from:
https://github.com/Active-CSS/active-css/tree/master/dist/v-2-1-1

Changelog

  • NEW FEATURE: Basic support for old Edge on production core - but no support for shadow DOM features.
  • BUG FIX: Fix for complex object/array data binding not working as expected.
  • BUG FIX: Fix for ajax rendering bound variables in shadow DOM sometimes not updating.
  • DEPRECATED: Babel core versions. Base code is in ES6 and ES5 conversion and below won't work anyway. Put back in 5 years when ES6 is old.
npm editions

Production core: https://www.npmjs.com/package/active-css/v/2.1.1
Development core: https://www.npmjs.com/package/active-css-dev/v/2.1.1
Babel production core: https://www.npmjs.com/package/active-css-babel/v/2.1.1
Babel development core: https://www.npmjs.com/package/active-css-babel-dev/v/2.1.1
"If you are working on the core" core: https://www.npmjs.com/package/active-css-core-dev/v/2.1.1

View details


Version 2.1.0 "Alphonso"

Release date: 9 June 2020

Production core: 23kB with brotli compression, 78kB minified
Development core: 25kB with brotli compression, 87kB minified

Download all script tag editions from:
https://github.com/Active-CSS/active-css/tree/master/dist/v-2-1-0

Changelog

  • NEW FEATURE: Allow inline Active CSS in a style tag with type="text/acss".
npm editions

Production core: https://www.npmjs.com/package/active-css/v/2.1.0
Development core: https://www.npmjs.com/package/active-css-dev/v/2.1.0
Babel production core: https://www.npmjs.com/package/active-css-babel/v/2.1.0
Babel development core: https://www.npmjs.com/package/active-css-babel-dev/v/2.1.0
"If you are working on the core" core: https://www.npmjs.com/package/active-css-core-dev/v/2.1.0

View details


Version 2.0.1 "Simmons"

Release date: 20 May 2020

Production core: 23kB with brotli compression, 77kB minified
Development core: 25kB with brotli compression, 86kB minified

Download all script tag editions from:
https://github.com/Active-CSS/active-css/tree/master/dist/v-2-0-1

Changelog

  • BUG FIX: Fixed messaging so it doesn't clash with extensions.
npm editions

Production core: https://www.npmjs.com/package/active-css/v/2.0.2
Development core: https://www.npmjs.com/package/active-css-dev/v/2.0.1
Babel production core: https://www.npmjs.com/package/active-css-babel/v/2.0.1
Babel development core: https://www.npmjs.com/package/active-css-babel-dev/v/2.0.1
"If you are working on the core" core: https://www.npmjs.com/package/active-css-core-dev/v/2.0.1

View details


Version 2.0.0 "Terrigen"

Release date: 17 May 2020

Production core: 23kB with brotli compression, 77kB minified
Development core: 25kB with brotli compression, 86kB minified

Download all script tag editions from:
https://github.com/Active-CSS/active-css/tree/master/dist/v-2-0-0

Changelog

  • NEW FEATURE: JavaScript expressions.
  • NEW FEATURE: New "every" action command parameter.
  • NEW FEATURE: Cancel specific delayed/intervaled actions by using a label on the specific action.
  • NEW FEATURE: New create-command action command.
  • NEW FEATURE: New create-conditional action command.
  • NEW FEATURE: New create-element action command.
  • NEW FEATURE: Data binding and custom element attribute binding.
  • NEW FEATURE: Auto-scoped variables.
  • NEW FEATURE: Single level @each loop support.
  • NEW FEATURE: Conditional functions can now also be written directly in the event selector, to more align with CSS syntax.
  • NEW FEATURE: Shadow DOM support + isolated events and variables.
  • NEW FEATURE: Regular CSS commands can now be written into Active CSS events.
  • NEW FEATURE: Support for international character sets.
  • NEW FEATURE: Babel core scripts available in production and development editions.
  • NEW FEATURE: Core fully open source on the MIT license and forkable on github.
  • NEW FEATURE: Merged Elements and Panel Chrome DevTools extensions and updated to support version 2 core changes.
  • NEW FEATURE: focus-on-first now focuses on the first field in a selector group to align with focus-on-last and is not now an alternative syntax to focus-on. The command had this effect anyway - but the change of name makes it more obvious.
  • NEW FEATURE: HTML variables, which act as a quick way to output inner HTML.
  • BREAKING CHANGE: page-list {} is now @pages {} to more align to CSS syntax.
  • BREAKING CHANGE: Ajax variables removed - syntax now the same as regular variables - no dollar, eg. {results}.
  • BREAKING CHANGE: Removed quick-html command. For simplicity in avoiding XSS, no variables can now contain HTML, with the exception being {$STRING}.
  • BREAKING CHANGE: Cancel-delayed and cancel-delayed-all renamed to cancel-timer and cancel-timer-all.
  • BREAKING CHANGE: Creating an action command as an external function is no longer supported due to core commands no longer being public. Use "create-command" instead.
  • BREAKING CHANGE: Components are now written in @component wrapper syntax to more align with CSS syntax - see the components docs.
  • BUG FIX: Re-introduced the select-all and select-none commands into the main core for the DevTools extension.
  • BUG FIX: Fixed an issue of {$RAND} not always working. It now works in all the same places as attribute substitution.
  • BUG FIXES & OPTIMIZATIONS: An assortment of other bug fixes and optimizations.
npm editions

Production core: https://www.npmjs.com/package/active-css/v/2.0.0
Development core: https://www.npmjs.com/package/active-css-dev/v/2.0.0
Babel production core: https://www.npmjs.com/package/active-css-babel/v/2.0.0
Babel development core: https://www.npmjs.com/package/active-css-babel-dev/v/2.0.0
"If you are working on the core" core: https://www.npmjs.com/package/active-css-core-dev/v/2.0.0

View details


Version 1.0.0 "1"

Release date: 1 January 2020

Production core: 15kB with brotli compression, 50kB minified
Development core: 20kB with brotli compression, 64kB minified

Download both versions from:
https://github.com/Active-CSS/active-css/tree/master/dist/v-1-0-0

Changelog

  • Initial public release
npm editions

This is the same core as above but different version control for npm.

Production core: https://www.npmjs.com/package/causejs/v/1.0.5
Development core: https://www.npmjs.com/package/causejs-dev/v/1.0.5

View details