|compacte

  • New in : SPIP 1.9.2

The |compacte filter is applied to a CSS or JavaScript file [1] and creates a compressed copy which is smaller than the original as it deletes all comments, empty declarations, unnecessary blank spaces and lines etc. [2] (for Javascript files, the filter uses the JavaScriptPacker class).

Ater having archived this new file into the local/ directory, the filter returns the link: [<link rel="stylesheet" href="(#CHEMIN{spip_style.css}|compacte)" type="text/css" media="all" />] which will return something like: <link rel="stylesheet" href="local/cache-css/spip_style-compacte-092e.css" type="text/css" media="all" />

À noter

This filter, like automatic compression, groups together css files compressed by media.

Example :

[<link rel="stylesheet" href="(#CHEMIN{spip_style.css}|compacte)" type="text/css" media="all" />]
[<link rel="stylesheet" href="(#CHEMIN{habillage.css}|compacte)" type="text/css" media="all" />]
[<link rel="stylesheet" href="(#CHEMIN{responsive.css}|compacte)" type="text/css" media="handheld" />]
[<link rel="stylesheet" href="(#CHEMIN{print.css}|compacte)" type="text/css" media="print" />]

The spip_styles.css and habillage.css stylesheets will be grouped together in the same compressed file. responsive.css and print.css will be in separate compressed files with the media="handheld" and media="print" attributes respectively.

Deactivating on-demand compression of js and css files

This filter forces the compression of a file. There is a script for disabling compression on specific files.

For css files, you need to enter one of the following attributes in your tag <link> :
-  id ;
-  name ;
-  type.
This filter forces the compression of a file. There is a script for disabling compression on specific files.

For css files, you need to enter one of the following attributes in your tag <link> :
-  id ;
-  name ;
-  type.

For javascript files, the "id" attribute must be filled in.

Footnotes

[1] The file to which the filter is applied must have either ".js" or ".css" as its filename extension.

[2] For CSS files, the filter transforms all URLs in the file into absolute URLs

#div {
  background : url(../prive/images/fond-gris-anim.gif);  /** image modifiable **/
  width : 48px;
  height : 48px;
  margin : auto;
}

becomes

#div{background:url(http://www.domaine.tld/prive/images/fond-gris-anim.gif);width:48px;height:48px;margin:auto;}

Author Mark Published : Updated : 15/07/23

Translations : català, English, Español, français, Nederlands