CSS Concat for referenced stylesheets

The CSS concat feature takes multiple referenced stylesheets and delivers them concatenated in a single request.

Enable in conf/config.xml:

<config>
  <acceleration>
    <style-concat [ ac-styles=" true | false " ] [ external-styles=" true | false " ] [ exclude-pattern=" " ] [ combine=" true | false " ] />
  </acceleration>
</config>

The different parameters for this option are:

  • ac-styles: Concat referenced stylesheets from Adaptive Components. Possible values: true, false. Default: true.
  • external-styles: Concat referenced stylesheets not from Adaptive Components. Possible values: true, false. Default: false.
  • exclude-pattern: A regular expression pattern to exclude referenced stylesheets based on their URL. If empty no stylesheets are excluded. This pattern is empty by default.
  • combine: Concat stylesheets from Adaptive Components and not from Adaptive Components together. This parameter only works if both ac-styles and external-styles are enabled. Possible values: true, false. Default: true.

Concatenated stylesheets

Not all link elements are grouped into a single link element. They are grouped according to the media attribute and the ai-load attribute.

Stylesheets from remote servers are only concatenated if they were already loaded by the FIT server and are cached.

The order of link and style elements is not changed for non Adaptive Components stylesheets. Link elements from Adaptive Components may be rearranged to get consistent URLs between pages. This should be no problem because styles from Adaptive Components should not influence each other.

If only one link element is in a group by itself, it will not be concatenated. Stylesheets with both ai-load="true" attribute and id attribute are never concatenated. Only link elements with rel="stylesheet" attribute are concatenated. Link elements with rel="alternate stylesheet" or similar are never concatenated.

The ai-css-concat attribute

Single link elements can be excluded from the CSS concat feature by using the ai-css-concat="false" attribute. Using ai-css-concat="true" does not force concatenation of link elements that would otherwise not be concatenated.

Examples:

<!-- this link element will be concatenated in the first concatenation -->
<link rel="stylesheet" href="fit://extension/ac-foo/public/style1.css">
<!-- this link element will be concatenated in the second concatenation with ai-load attribute -->
<link ai-load="true" rel="stylesheet" href="fit://extension/ac-foo/public/style2.css">
<!-- this link element will be concatenated in the third concatenation with media attribute -->
<link media="screen" rel="stylesheet" href="fit://extension/ac-foo/public/style3.css">
<!-- this link element will not be concatenated because of its ai-css-concat attribute -->
<link ai-css-concat="false" rel="stylesheet" href="fit://extension/ac-foo/public/style4.css">
<!-- this link element will not be concatenated because it has both ai-load and id attribute -->
<link ai-load="true" id="foo" rel="stylesheet" href="fit://extension/ac-foo/public/style5.css">

<!-- this link element will be concatenated in the first concatenation -->
<link rel="stylesheet" href="fit://extension/ac-bar/public/styleA.css">
<!-- this link element will be concatenated in the second concatenation with ai-load attribute -->
<link ai-load="true" rel="stylesheet" href="fit://extension/ac-bar/public/styleB.css">
<!-- this link element will be concatenated in the third concatenation with media attribute -->
<link media="screen" rel="stylesheet" href="fit://extension/ac-bar/public/styleC.css">
<!-- this link element will not be concatenated because of its ai-css-concat attribute -->
<link ai-css-concat="false" rel="stylesheet" href="fit://extension/ac-bar/public/styleD.css">
<!-- this link element will not be concatenated because it has both ai-load and id attribute -->
<link ai-load="true" id="bar" rel="stylesheet" href="fit://extension/ac-bar/public/styleE.css">

Result:

<!-- first concatenation with styles from ac-foo style1.css and ac-bar styleA.css -->
<link rel="stylesheet" href="...">
<!-- second concatenation with styles from ac-foo style2.css and ac-bar styleB.css with ai-load attribute -->
<link ai-load="true" rel="stylesheet" href="...">
<!-- third concatenation with styles from ac-foo style3.css and ac-bar styleC.css with media attribute -->
<link media="true" rel="stylesheet" href="...">

<!-- not concatenated stylesheet style4.css (because of ai-css-concat="false" attribute) -->
<link rel="stylesheet" href="...">
<!-- not concatenated stylesheet style5.css (because of ai-load="true" + id attribute) -->
<link ai-load="true" id="foo" rel="stylesheet" href="...">
<!-- not concatenated stylesheet styleD.css (because of ai-css-concat="false" attribute) -->
<link rel="stylesheet" href="...">
<!-- not concatenated stylesheet styleE.css (because of ai-load="true" + id attribute) -->
<link ai-load="true" id="bar" rel="stylesheet" href="...">

Considerations

  • If your site includes different referenced stylesheets on different pages or includes them in a different order, the external-styles option should not be used. Otherwise a different concatenated stylesheet is generated for every page and the browser has to load all the styles again.
  • The concatenation happens before style-inlining.
  • Conditionally registering Adaptive Components is not encouraged because additional style sheets must be loaded together with already loaded stylesheets. If all Adaptive Components are registered unconditionally, the concatenated styles can (after the first request) always be loaded from cache.
  • Text filters are always applied for all stylesheets, regardless of the config settings.
  • The stylesheets are always minified, regardless of the config settings.
  • CSS concat is not supported for IE in version 9 and below because of technical limitations of the browser.