Loads compressed CSS files to the page, whenever possible directly from the cache

Description

Using the tag improves theme performance especially if multiple CSS files are used.

See also the {MinifyJS} tag with which you can add compressed Javascript files to the page.

Syntax

{MinifyCSS(
    files: string,
    mode: string
)}

Scope

Required scope: globaali

Tags with global scope can be used on any template and in any tag.

Loading compressed theme stylesheets

{MinifyCSS(
    files: 'css/master.css|css/base.css|css/forms.css',
    mode: 'development'
)}

While still developing the theme, keep the value of the {MinifyCSS} tag's mode attribute set to development, so that stylesheets won't be loaded from the cache but directly from the server at each page load. In this way, all changes will become visible in the theme immediately.

Once the theme has been developed and the website is about to be published, you may want to change the value of the {MinifyCSS} tag's mode attribute to production to improve theme performance by loading compressed stylesheets, whenever possible, directly from the cache memory.

{MinifyCSS(
    files: 'css/master.css|css/base.css|css/forms.css',
    mode: 'production'
)}

Attribuutit

files:

Defines which files should be loaded by the tag.

The attribute's values are pipe separated file locations in relation to the theme's root directory.

E.g. files:'css/master.css|css/base.css|css/forms.css'

mode:

Defines a state for the tag based on which files are loaded either as packed or unpacked.

Allowed values:

  • 'production': In production, files are loaded compressed from the cache.
  • 'development': In development, files are loaded anew at every page load, so that potential changes become visible immediately.
after/before:

By using the after and before attributes you can define content that is output either after or before the tag's output.

Allowed values:The HTML and Interface markup

E.g.

  • before: '<p>Tämä merkkaus näkyy ennen tagin omaa sisältöä.</p>'
  • after: '<p>Tämä taas näkyy tagin oman sisällön jälkeen.</p>'

If the tag does not produce any content, neither the content of the after and before attributes will be output.

escape:

Adds an escape character before quotation marks in the output.

The attribute makes it easier to process the tag-produced content when using JavaScript.

Allowed values:true/false. The default value is false.

or:

Defines alternative content that is displayed if the tag itself does not produce any content.

Allowed values:The HTML and Interface markup

E.g. or:'Sisältöä ei löytynyt.'