Il existe de nombreuses astuces autour du développement CSS, et en particulier avec PHP. Mais en général ce sont les mêmes qui reviennent, à savoir :

  • ne faire qu'un appel de style css par page : idéalement regrouper tous les scripts en un via un peu de réécriture, et du php pour "merger" vos fichiers.
  • forcer le cache des fichiers css via une date d'expiration lointaine ; se passe via votre fichier htaccess, ou depuis les headers php que vous pourrez renvoyer
  • compresser vos fichier : des outils online le font pour vous, mais il y a aussi la solution maison, et c'est ce qui nous interesse dans ce billet !
  • etc ...

Voilà pour les principales. Pour le détail de toutes les bonnes pratiques les plugins firefox Yslow et Page Speed vous feront un bon reporting :)

Revenons donc sur la compression de vos fichiers CSS, et au script en question :


<?php

# Gzip
ob_start("ob_gzhandler");

# Header infos : set to a reasonable interval. I.e. 3600 (sec.) = 1 hr.
$expire_offset_time = 3600*24*7;

header('Content-type: text/css');
header('Cache-Control: must-revalidate');
header('Expires: ' . gmdate('D, d M Y H:i:s', time() + $expire_offset_time) . ' GMT');

# Compress output
function compress($buffer) {
/* remove comments */
$buffer = preg_replace('!/\*[^*]*\*+([^/][^*]*\*+)*/!', '', $buffer);
/* remove spaces before / after delimiters */
$buffer = preg_replace(array('/(:|;|}|{)( |\r|\t|\n)+/','/ ({|;)/'), '$1', $buffer);
/* remove tabs, extra spaces, newlines, etc. */
$buffer = str_replace(array("\r\n", "\r", "\n", "\t", " \n" , ' ', ' ', ' '), '', $buffer);
/* keep some readable content */
$buffer = str_replace('}', "}\n", $buffer);
return $buffer;
 }

# Output buffering
ob_start("compress");

# Global includes
include("_layout/reset.php");
include("_layout/layout.php");
include("_layout/typo.php");

/* etc … */

# flush output to client
ob_end_flush();

?>



(Attention, les espaces ne sont pas correctement interprétés dans ce billet, je vous conseille de copier le script depuis ce fichier)

Voilà c'est aussi simple que cela !

Je pense que vu la simplicité, cela se passe d'explication pour la mise en place, je vous fait confiance ! Toute la magie s'opère dans la fonction compress(). J'ai trouvé cette dernière sur phpsnippets.info, et customisée encore un peu plus à mon gout, en supprimant encore des espaces supplémentaires (notamment autour des attributs), et en ajoutant un saut de ligne devant chaque règle, afin de garder un minimum de lisibilité. En espérant que ce script vous serve prochainement ;-)

ps : s'il y a un volontaire pour proposer et expliquer ce script en vidéo sur tuto.com, qu'il n'hésite pas !