// BLOG
Kirby CMS - Gérer ses CSS
Il est important de bien gérer ses fichiers CSS dans un projet web et de controller l'ordre dans lequel on souhaite les charger dans la page. Kirby met à notre disposition une fonction pour y parvenir facilement.
Où placer ses feuilles de styles CSS ?
Dans un projet Kirby, vous êtes libre d'organiser et de placer vos fichiers CSS où bon vous semble dans votre architecture de fichiers si il s'agit de styles que vous souhaitez appliquer globalement.
Personnellement, je suis l'organisation proposée dans le Starterkit de Kirby et je place mes feuiles de styles globales dans un dossier : /assets/css/
Dans certains cas particulier, vous pourriez avoir besoin d'appliquer des styles CSS que pour des templates spécifiques. Il sera alors nécessaire de placer ces feuilles de styles dans un dossier /assets/css/templates/, nous verrons plus en détail cette particularité un peu plus loin dans cet article.
La fonction CSS()
Kirby nous propose une liste de fonctions d'aide dites "helpers" que vous pouvez utiliser dans vos templates, controllers ou snippets. Libre à vous d'en faire usage ou pas mais personnellement je les trouve très pratiques. Parmi ces fonctions "helpers", on trouve la fonction css() que nous allons détailler ici.
Cette fonction permet de gérer l'appel des fichiers CSS dans notre projet. On l'utilisera le plus souvent dans un fichier snippet "header" /site/snippets/header.php Elle générera une balise <link> avec l'appel de la ou des feuilles de styles indiquées en paramètres.
Cette fonction accepte deux paramètres : $url et $options. Seul le premier paramètre $url est obligatoire.
| Paramètre | Usage |
|---|---|
| $url | URL absolue ou relative de la feuille de style, tableau d'URLs ou instruction @auto pour charger automatiquement des styles de templates. |
| $options | Attribut de média ou tableau d'attributs custom. |
Exemples d'utilisation :
Appeler une feuille de style globale
// /site/snippets/header.php
<?= css('assets/css/styles.css') ?>Appeler plusieurs feuilles de styles globales
// /site/snippets/header.php
<?= css([
'assets/css/reset.css',
'assets/css/tailwind.css',
'assets/css/styles.css'
]) ?>Les feuilles de styles seront appelées dans l'ordre dans lequel elles sont déclarées en paramètres de la fonction css().
Appeler des feuilles de styles spécifiques à un template
// /site/snippets/header.php
<?= css( @auto ) ?>Grâce au mot clé @auto , il est possible de charger une feuille de styles uniquement lorsque qu'un template particulier est utilisé pour afficher une page. Pour cela, la feuille de style doit suivre les règles suivantes :
Elle doit être stockée dans un dossier
/assets/css/templates/Elle doit être nommée de la même manière que le template auquel elle doit s'appliquer
| Template | Feuille de styles |
|---|---|
| /site/templates/home.php | /assets/css/templates/home.css |
Il est aussi possible d'appeler des feuilles de styles pour des pages spécifiques qui partagent le même template en passant en paramètre de la fonction css() l'URL de façon dynamique.
Passer un attribut media à la balise <link>
// /site/snippets/header.php
<?= css('assets/css/print.css', 'print') ?>Dans cet exemple un attribut media='print' sera ajouté à la balise <link> générée par la fonction css()
// Code généré par la fonction css() dans le rendu de la page
<link rel="stylesheet" type="text/css" href="print.css" media="print">