JavaScript and CSS code delivered by the FIT server can be automatically minified. Both external and inline code, including, for CSS, the style attributes, are minified This reduces the amount of data that has to be transferred to the client, which in turn reduces latency.
Minifying of JavaScript and CSS can be configured independently. By default, both JavaScript and CSS minifying is disabled.
Enable minifying of JavaScript by enabling the setting in conf/config.xml:
<config>
<acceleration>
<script-minifying />
</acceleration>
</config>
Enable minifying of CSS by enabling the setting in conf/config.xml:
<config>
<acceleration>
<style-minifying [ strip-prefixes="true" ] />
</acceleration>
</config>
In your HTML code you can force or prevent minifying of specific JavaScript or CSS resources. This overrides the automatic minifying (or lack thereof). To force or prevent minifying of specific files, use the ai-minify attribute. Possible values are true to always force minifying, false to prevent minifying, auto to decide on minifying based on the configuration settings. The default is auto.
<html>
<head>
<!-- automatically minify if minifying is enabled in config -->
<link href="fit://site/public/css/style.css" rel="stylesheet" type="text/css">
<style>...</style>
<script src="fit://site/public/js/script.js"></script>
<script>...</script>
<!-- never minify regardless of config settings -->
<link ai-minify="false" href="fit://site/public/css/style.css" rel="stylesheet" type="text/css">
<style ai-minify="false">...</style>
<script ai-minify="false" src="fit://site/public/js/script.js"></script>
<script ai-minify="false">...</script>
<!-- always minify regardless of config settings -->
<link ai-minify="true" href="fit://site/public/css/style.css" rel="stylesheet" type="text/css">
<style ai-minify="true">...</style>
<script ai-minify="true" src="fit://site/public/js/script.js"></script>
<script ai-minify="true">...</script>
</head>
</html>
FIT can strip unused CSS instructions from stylesheets and inline styles. To activate this stripping, you have to set the strip-prefixes="true" attribute in the config.
The prefix stripping will remove all vendor prefixes not relevant for the current client. Empty CSS blocks and blocks with empty selectors will also be stripped.
/* instructions with prefixes not applied by the client will be removed */
.foo {
background: #1e5799;
background: -moz-linear-gradient(top, #1e5799 0%, #2989d8 50%, #207cca 51%, #7db9e8 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1e5799), color-stop(50%,#2989d8), color-stop(51%,#207cca), color-stop(100%,#7db9e8));
background: -webkit-linear-gradient(top, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%);
background: -o-linear-gradient(top, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%);
background: -ms-linear-gradient(top, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%);
background: linear-gradient(to bottom, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%);
-ms-user-select: none;
-moz-user-select: none;
-o-user-select: none;
-webkit-user-select: none;
user-select: none;
}
/* selectors not applied by the client will be removed */
.bar > input[type=search]::-moz-focus-inner,
.bar > input[type=search]::-webkit-search-decoration {
background: #dddddd;
}
/* all selectors are removed -> the whole block will be stripped */
.bar > input[type=search]::-moz-focus-inner {
color: #333333;
}
/* all instructions will be removed -> the whole block will be stripped */
.bar {
-moz-user-select: none;
}
Requesting this CSS with a client that only supports the -webkit- prefix will result in the following CSS:
.foo {
background: #1e5799;
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1e5799), color-stop(50%,#2989d8), color-stop(51%,#207cca), color-stop(100%,#7db9e8));
background: -webkit-linear-gradient(top, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%);
background: linear-gradient(to bottom, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%);
-webkit-user-select: none;
user-select: none;
}
.bar > input[type=search]::-webkit-search-decoration {
background: #dddddd;
}