After a user qualifies for an experience, they receive action content that consists of various changes, insertions, and the removal of content on the page. Most actions have an optional input to include "global" CSS styles. The optional input may look like this in Action Builder or on the Experience setup page.
These global styles are included in a <style> element in the <head> of the HTML document. The style block looks something like this in the DOM:
<style id="monetatecss" type="text/css">
.cssSelector {
margin-left:3px !important;
padding-top:0 !important;
}
</style>Retracks and Dynamic Content
Because the Monetate style block is included in the <head> of the page rather than in the body, it generally remains intact when dynamic content gets updated in the DOM. This is both an advantage and disadvantage. Global styles from any actions still render with dynamic page content, so a CSS Append action never requires a retrack. The disadvantage is the CSS styles still render on dynamic content, which may not be expected.
Compiled from Multiple Actions
The CSS styles from all actions the user has qualified for are compiled into a single <style> element and appended to the page. The CSS is compiled from first to last, following the order of experience and action priority. This means that a typo such as a missing } after a CSS statement can cause issues with unrelated actions.
CSS Error Warnings
To combat this possible malfunction, many action templates have a CSS validation alert into more recent action templates that shows a warning when there is invalid CSS code used in an action.
Some older legacy actions that have a text-only action input may not have this CSS validation.