Advanced HTTL

Using HTTL in CSS

Sometimes it’s required to include a request dependent conditional logic into CSS. This can be achieved as shown below:

HTTL template:

<html>
<head>
    ...
    <link href="css/site.httl.css?style=black" rel="stylesheet" type="text/css"/>
</head>
...
</html>

In this example CSS resource is called with a query parameter ?style = black, which is handled while processing site.httl.css template file.

css/site.httl.css file:

.main {
    #if(ifRequestParameter('style', 'black'))
      color: black;
    #else
      color: blue;
    #end
}

There is a conditional HTTL directive #if and ηCMS method to check a value of a given request parameter: ifRequestParameter. To allow the css file to be processed as a template, just specify its extension as .httl.css.

Warning

Usage of dynamic HTTL logic inside css is not recommended for a couple of reasons. First, it is impossible to use compressed CSS files, and second, CSS markup becomes mixed with HTTL and therefore it will be more complex. A simpler and perhaps more appropriate solution would be to utilize different CSS files for different page styles and to include them to a page conditionally.

Inheritance of HTTL patterns

Todo

TODO