CSS d'application et de page

Les portées du CSS

Le framework Adventy distingue 2 types de portée en CSS :

  1. la portée locale ou de page : elle ne s'applique uniquement que sur la page elle-même. C'est le CSS de page ;
  2. la portée applicative : ce type de portée s'applique sur toutes les pages du site web. C'est le CSS d'application.

Le CSS de page

Pratiquer le CSS de page apporte d'énormes avantages :

  1. comme dans toute bonne pratique en développement, le CSS ne devrait pas être mélangé avec le HTML, ni avec le Javascript. C'est la raison pour laquelle un fichier CSS est dédié par page. La séparation entre le HTML et le CSS facilite grandement la lisibilité du code, ainsi que leur maintenance et ré-utilisabilité ;
  2. le CSS est dédié à la page, ce qui signifie que c'est du CSS spécifique à la page. Par conséquent, si le visuel (personnalisé) de la page doit être mis à jour, l'intégrateur ou le développeur sait rapidement où aller modifier ;
  3. le framework Adventy permet la génération de code CSS en PHP, ce qui évite l'utilisation de pré-processeurs CSS et l'apprentissage d'un autre pseudo-langage.

Pour la création d'un CSS de page, veuillez vous reporter à la partie Pages statiques : création des feuilles de styles css personnalisées de page.

Le CSS d'application

Le CSS d'application correspond aux feuilles de style déclarées dans le bloc de la balise head du document HTML avec la syntaxe suivante : <link rel="stylesheet" href="/xxx.css"/>. Cette déclaration doit être définie dans la template de page, ainsi le CSS pourra donc être accessible pour toutes les pages du site web.

Chaque balise link avec l'attribut href pointant vers une ressource CSS correspond à une requête vers le serveur, puis le téléchargement et le chargement de cette ressource. Donc si nous avons n ressources CSS, alors cela se traduira par n requêtes vers le serveur. Nous pouvons nous contenter de lancer autant de requêtes qu'il y a de ressources CSS, ce qui n'est pas très optimisé lorsque ces dernières sont nombreuses. Cela dit, pour les intéressés, il existe une solution plus optimisée.

L'optimisation du CSS d'application

Pour les ressources de type texte comme le CSS et le Javascript, il existe une technique d'optimisation qui permet à la fois de réduire le nombre de requêtes et la taille des ressources à télécharger.

Pour réduire le nombre de requêtes, il suffit tout simplement de fusionner les ressources en un seul fichier. Pour cela, il est possible de faire cette manipulation soit manuellement, ou soit par automatisation. En choisissant l'automatisation, le framework Adventy met à disposition le web service /build/css,ws qui va fusionner toutes les ressources CSS déclarées dans le fichier de configuration /application/configuration/css.cfg.php. Il faudra donc personnaliser ce dernier afin de générer le fichier CSS d'application en question.

L'optimisation comprend :

  1. la fusion des CSS en un fichier unique /public/css/core.css (le nom de fichier est paramétrable dans le fichier de configuration CSS) ;
  2. la suppression des caractères inutiles ou non interprétés, tels que la tabulation, l'espace, le retour à la ligne ;
  3. la compression au format deflate (le framework Adventy a favorisé plus deflate que gzip).

Le fichier de configuration CSS

Le fichier /application/configuration/css.cfg.php est divisé en 2 parties :

La première partie consiste à renseigner le dossier racine des sources CSS, le nom du fichier destination CSS d'application, et l'option d'optimisation :

$_ENV['CSS'] = array('frameworkPath' => $_ENV['FRAMEWORK_ROOT'] . '/css','applicationPath' => &$_ENV['ROOTS']['css'],'destinationFile' => 'core','optimizationOnlineEnabled' => false);
  1. frameworkPath : chemin du dossier racine des ressources CSS du framework Adventy. Cette variable n'est utilisée que dans la seconde partie. Elle est donc optionnelle. Ces feuilles de style accompagnent le template de page proposée par le framewrok Adventy. De ce fait, pour un template totalement personnalisé, les CSS livrés avec le framework Adventy n'auront plus lieu d'être utilisés.
  2. applicationPath : chemin du dossier racine des ressources CSS de l'application (/public/css).
  3. destinationFile : nom du fichier sans extension (ici core) résultant de la fusion des sources CSS et de son optimisation. Ce fichier sera créé au format texte et sous sa forme compressée deflate, dans le dossier indiqué par la variable d'environnement $_ENV['CSS']['applicationPath'] précédemment définie.
  4. optimizationOnlineEnabled : true pour optimiser le CSS à l'aide de l'outil en ligne CSS Minifier. false permet seulement la suppression des indentations et des retours à la ligne.

La seconde partie correspond à la définition de la liste des ressources CSS à fusionner. Par exemple :

$_ENV['CSS']['files'] = array(//Framework CSS files$_ENV['CSS']['frameworkPath'] . '/core.source.css',$_ENV['CSS']['frameworkPath'] . '/default-structure.source.css',$_ENV['CSS']['frameworkPath'] . '/dialog.source.css',$_ENV['CSS']['frameworkPath'] . '/responsive.source.css',//Application CSS files$_ENV['CSS']['applicationPath'] . '/source/custom.source.css',$_ENV['CSS']['applicationPath'] . '/source/responsive.source.css');

Dans le template de page, le CSS d'application est déclaré dans le bloc de la balise head de la façon suivante :

<link rel="stylesheet" href="/core.css?v=1"/>

Le paramètre v=1 désigne seulement le numéro de version de la mise à jour des CSS. Il est optionnel.

La génération du CSS d'application

Pour fusionner les ressources CSS et créer le CSS d'application selon le fichier de configuration /application/configuration/css.cfg.php, il suffit donc de lancer la requête https://myadventy.loc/build/css,ws (myadventy.loc étant votre nom de domaine en local) sur un navigateur. Cela va générer les 2 fichiers ci-dessous :

  1. /public/css/core.css au format texte sans compression ;
  2. /public/css/core.css.deflate au format compressé.

Si le client accepte le format deflate, alors la version compression de la ressource CSS lui sera envoyée, sinon c'est celle au format texte.