Unify multiple CSS or JS files and compress them.
The CSS/Javascript minifier is an Elxis 4.1 addition that can unify multiple CSS/JS files and compress them saving space and bandwidth. It can be enabled from the Elxis configuration console separately for the CSS and the JS files.
How it works
What the minifier does is that it takes all the CSS or Javascript files placed on the document's head section by Elxis and Elxis extensions, unifies them in a single file and saves this file in cache. After, puts this file in the document's head instead of the multiple ones and optionally compress it with gzip. The minifier is smart enough to automatically update the cached file if a new file is added on the head section or something is removed.
Without the minifier. CSS files in document's head section:
<head> ... <link rel="stylesheet" href="http://www.example.com/templates/system/css/standard.css" type="text/css" /> <link rel="stylesheet" href="http://www.example.com/components/com_content/plugins/download/includes/download.css" type="text/css" /> <link rel="stylesheet" href="http://www.example.com/includes/js/jquery/colorbox/colorbox.css" type="text/css" /> <link rel="stylesheet" href="http://www.example.com/modules/mod_categorymap/css/ctgmap.css" type="text/css" /> ... </head>
With the minifier enabled. Only one CSS file in document's head section:
<head> ... <link rel="stylesheet" href="http://www.example.com/inner.php/minify/something.css" type="text/css" /> ... </head>
Enable the minifier
From the Elxis configuration panel you can enable the CSS and the Javascript minifier and also select if you want the unified files to be served compressed with gun zip. Before enabling the minifier for CSS files please read carefully the notes below.
Special care on the CSS minifier
CSS files often contain relative paths to image files. After minifier unifies them it serves the unified file from an other path and so the relative paths wont point to the right file any more and you will face problems with the styling. To fix this you have to update these paths in your CSS files and make them relative to your site's root folder before the minifier runs.
A CSS declaration that will have problem after the CSS minifier runs.
.something { background:url(../images/bg.png) 0 0 no-repeat; }
The same CSS declaration fixed for the minifier.
.something { background:url(/templates/mytemplate/images/bg.png) 0 0 no-repeat; }
