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.
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.
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;
}
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.
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.)