.InlineStyle

Apply namespaced CSS rules to contents generated by the .Inline method.

If the .InlineStyle file exists, Boomla will automatically reference it via a <link> tag. These references will be embedded in the <head> section of pages. For multiple contents of the same type, the same .InlineStyle file will only be referenced once.

The .InlineStyle file must return content with text/css MIME type.

Usage

While you can theoretically use any interpreter to generate the CSS code, Boomla comes with the css-1 interpreter to greatly simplify writing namespaced CSS code.

Namespacing

Any class selector that is prefixed with a - will be prefixed with a namespace, just like matching class selectors in the HTML code returned by the .Inline file.

For example, The following HTML and CSS responses:

<div class="-foo">bar</div>

.-foo {
    color: red;
}

Will turn into the following namespaced versions:

<div class="N6F04ABF8-foo">bar</div>

.N6F04ABF8--foo {
    color: red;
}

URL references

You can reference any resources with URLs relative to the .InlineStyle file itself. Think of fonts and image files.

For example, this is how you would reference the background image stored at .InlineStyle/pattern.png:

.-foo {
    background: url(pattern.png) repeat center center red;
}

And that’s what you would end up with:

.N6F04ABF8--foo {
    background: url(/path/.InlineStyle/pattern.png?v=014c103059) repeat center center red;
}

Notice that the relative path is turned into an absolute path, and a query parameter is added for caching.

Warning

Within an .InlineStyle file, you MUST never apply rules to the <html> and <body> tags. It is the scope of the page app, not that of contents on the page. (Alas you can style them in .RequestStyle files.)

Subscribe to our newsletter!