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.

Variables and JavaScript

Variables

There are currently five variable types in Active CSS.

Special Active CSS variables are currently:

  • {$RAND} = Return a random 8 digit number. To return more than that you can do stuff like this: {$RANDSTR12} to return a 12 character random 0-9a-zA-Z string. {$RANDHEX6} to return a 6 character random 0-9A-F string, {$RAND0-255} to return a random number between 0 and 255 (notice the hyphen). The numbers used in the RAND variable name can be whatever you like, but they must be integers (whole numbers).
  • {$STRING} = This is used to output ajax response that has been returned to the front-end as a string containing HTML after an ajax call - ie. not JSON. is never validated for dangerous HTML tags, so make sure that you trust all string data coming from the server. Any validation actions that you take must occur on the server. This variable can only be used when rendering. No Active CSS variables contained in these {$STRING}-type variables will get evaluated when rendered. But if these {$STRING} variables are re-assigned to another variable, then variable evaluation will occur on render. See {$HTML_NOVARS} below for a solution to this.
  • {$HTML} = This is a version of {$STRING} that is available in a specific component variable scope. Multiple components on the page may each call ajax commands returning separate strings for display purposes, and each component would have its own {$HTML} variable available in the afterAjax event. But it must be a text string - not a JSON string. Use this when you want to display HTML as proper HTML on the page. It can be re-assigned to another variable as needed.
  • {$HTML_NOVARS} = This is a version of {$HTML} that stops Active CSS variables in a text string from being evaluated when rendering. It is needed when assigning the return string to another variable and for escaping variables for use as regular text in the assigned variable. It escapes the opening and closing curlies, and puts them back in just before rendering. It will leave HTML intact as HTML. This is available in a specific component scope. It can be re-assigned to another variable as needed.
  • {$HTML_ESCAPED} = This is a version of {$HTML} that escapes HTML so it can be rendered correctly within attributes or displayed as text. It turns the following characters into HTML entities: '&', '<', '>', '/', '{', '}'. Use this when you want to display HTML tags as text. This is available in a specific component scope. It can be re-assigned to another variable as needed.

CSS Variables

From version 2.4.2, CSS variables are supported in Active CSS. They are not Active CSS variables and have nothing to do with the rules of Active CSS variables. To see how you can use them dynamically with events, go to the CSS Variables page in the Concept Examples section.

 

XSS mitigation

Variables containing HTML

By default, regular variables are not allowed to contain HTML. Any HTML found in a regular variable will be escaped when it is rendered. This is to help against possible cross-site scripting (XSS) attacks. However, sometimes variables do genuinely need to contain HTML, such as ajax return variables that contain HTML strings to re-render user content correctly.

See the HTML variables page for more information on that, and also how this relates to using HTML variables within nested arrays (such as a JSON ajax return string).

JavaScript

There are several ways to used JavaScript with the config.

What version of JavaScript can I use?

Because Active CSS works in runtime on the front-end, it will work with the versions of JavaScript that your target browsers support.

Babel is not supported for any JavaScript that is contained within Active CSS config.