Drupal 8  8.0.2
CssCollectionRenderer Class Reference
Inheritance diagram for CssCollectionRenderer:

Public Member Functions

 __construct (StateInterface $state)
 
 render (array $css_assets)
 

Protected Attributes

 $state
 

Detailed Description

Renders CSS assets.

For production websites, LINK tags are preferable to STYLE tags with statements, because:

  • They are the standard tag intended for linking to a resource.
  • On Firefox 2 and perhaps other browsers, CSS files included with statements don't get saved when saving the complete web page for offline use: https://www.drupal.org/node/145218.
  • On IE, if only LINK tags and no statements are used, all the CSS files are downloaded in parallel, resulting in faster page load, but if statements are used and span across multiple STYLE tags, all the ones from one STYLE tag must be downloaded before downloading begins for the next STYLE tag. Furthermore, IE7 does not support media declaration on the statement, so multiple STYLE tags must be used when different files are for different media types. Non-IE browsers always download in parallel, so this is an IE-specific performance quirk: http://www.stevesouders.com/blog/2009/04/09/dont-use-import/.

However, IE has an annoying limit of 31 total CSS inclusion tags (https://www.drupal.org/node/228818) and LINK tags are limited to one file per tag, whereas STYLE tags can contain multiple statements allowing multiple files to be loaded per tag. When CSS aggregation is disabled, a Drupal site can easily have more than 31 CSS files that need to be loaded, so using LINK tags exclusively would result in a site that would display incorrectly in IE. Depending on different needs, different strategies can be employed to decide when to use LINK tags and when to use STYLE tags.

The strategy employed by this class is to use LINK tags for all aggregate files and for all files that cannot be aggregated (e.g., if 'preprocess' is set to FALSE or the type is 'external'), and to use STYLE tags for groups of files that could be aggregated together but aren't (e.g., if the site-wide aggregation setting is disabled). This results in all LINK tags when aggregation is enabled, a guarantee that as many or only slightly more tags are used with aggregation disabled than enabled (so that if the limit were to be crossed with aggregation enabled, the site developer would also notice the problem while aggregation is disabled), and an easy way for a developer to view HTML source while aggregation is disabled and know what files will be aggregated together when aggregation becomes enabled.

This class evaluates the aggregation enabled/disabled condition on a group by group basis by testing whether an aggregate file has been made for the group rather than by testing the site-wide aggregation setting. This allows this class to work correctly even if modules have implemented custom logic for grouping and aggregating files.

Constructor & Destructor Documentation

__construct ( StateInterface  $state)

Constructs a CssCollectionRenderer.

Parameters
\Drupal\Core\State\StateInterfaceThe state key/value store.

References Drupal\state().

Here is the call graph for this function:

Member Function Documentation

render ( array  $css_assets)

{Renders an asset collection.

Parameters
array$assetsAn asset collection.
Returns
array A render array to render the asset collection.
}

Implements AssetCollectionRendererInterface.

References Html\escape(), file_create_url(), and Drupal\state().

Here is the call graph for this function:


The documentation for this class was generated from the following file: