Overview

EPiServer 4.50 and later allows the edit and admin directories to be relocated, for security purposes. Since the edit and admin directories contain web forms and controls that refer to stylesheet files in other directories, the stylesheet files (that are static by nature) must allow dynamic content. To solve this problem, a new concept called dynamic CSS files was introduced in EPiServer 4.50. Basically, it allows you to insert predefined tags into CSS files and the tags are parsed runtime.
 
When designing the dynamic CSS files technology we had four goals in mind; first of all, we wanted the concept to be easy to grasp and use. It should also be totally optional – if developers do not need it, they can just ignore it. If they want to make only a single or a few CSS files dynamic, they can do so. Furthermore, dynamic CSS files should be completely transparent to browsers – the browsers should still think that they are dealing with static CSS files, when they are in fact dynamic on the server. And last but not least, performance – the cost of using dynamic CSS files should be as low as possible. Even if the files have dynamic content, once parsed on the server they should be cached in browsers just like static CSS files, which makes them scale well.

Requirements

To enable dynamic CSS files in EPiServer 4.50, the spidersupport http module must be defined in web.config. The module is defined by default in standard installations. 

Using dynamic CSS files

To make a dynamic CSS file, just create a copy of an existing stylesheet file and rename it by adding the string “_template” after the filename part (for example, copy of “styles.css” is renamed as “styles_template.css”). When a browser makes a request for a CSS file, EPiServer will intercept ASPNET’s CSS loading procedure and check if there is a dynamic CSS file available. If it finds one, the CSS file is read, parsed and returned. If no dynamic CSS file is found, ASPNET continues its standard CSS loading procedure.

Example:

We want to make a dynamic CSS file from mystyles.css, so we copy mystyles.css to mystyles_template.css

Next, a web request comes in, asking for mystyles.css.
EPiServer looks if there is a dynamic CSS file and finds mystyles_template.css.
The dynamic CSS file is parsed and returned to the browser, who still sees the file as mystyles.css. The CSS file has the standard MIME header and datestamp for CSS files and is cached by the browser.

Predefined CSS tags

The syntax of a tag is “$tag$”, the tagname is case-insensitive. The entire expression is replaced with the actual value runtime.

The number of predefined tags is kept to a minimum, due to security reasons. There may be more tags later, but currently only the following ones are supported:

$RootDir$ - the virtual path to the application’s root, for eg “/EPiServerSample/”
$UploadDir$ - the virtual path to the application’s upload dir, for eg “/upload/”

Examples:

.EPEdit-tabbackground
{
 background-image:url($RootDir$Util/images/tabrow_background.gif);
}

.EPEdit-inputNumber
{
 border:solid 1px #6D8CA8;
 behavior:url($RootDir$Util/javascript/changedinput.htc);
}