Prenez le contrôle de votre CSS
Votre projet est en plein sprint, les releases de corrections s’enchainent et vous devez soumettre le résultat à chaque fois à votre client. Et pourtant il y a un mécanisme des navigateurs qu’on adore en tant qu’utilisateur mais qui gène parfois en tant que développeur, la mise en cache des CSS.
Quoi de plus frustrant d’avoir en premier retour de votre client Euh, pourquoi l’image est au milieu de l’écran?
alors que vous venez de passer les dernières heures à la mettre au bon endroit en retouchant votre CSS. Bien sûr vous lancez rapidement le cri de guerre adéquat F5!
et la magie opère enfin.
Mais ne serait-il pas plus plaisant que d’obtenir dès le premier clic, le bon résultat?
Il y a pour cela une astuce, que bon nombre connaisse, mais qui dans un contexte de développement professionnel, est souvent lourde à mettre en place: changer le nom de votre CSS pour forcer le navigateur à la recharger et ainsi laisser apparaitre vos modifications du premier coup.
Évidemment, un changement de nom complet n’est pas pensable et d’ailleurs, il suffit de peu en fait.
En effet pour un navigateur les 2 inclusions suivantes sont différentes
<link rel="stylesheet" href="/css/main.css?1" type="text/css" media="all' /><link rel="stylesheet" href="/css/main.css?2" type="text/css" media="all" />On utilise ainsi tout simplement le passage de paramètre HTTP, et tous nos navigateurs penseront que la CSS a changé car l’url est différente alors qu’en fait ce n’est que poudre aux yeux!
Dans le cadre d’un projet amateur, on pourrait penser que gérer ce « versionning » de CSS à la main n’est pas insurmontable mais en entreprise, on aura vite faite de s’en passer si ce n’est pas automatisé.
Voyons comment y remédier sur Symfony par exemple. La définition des CSS se fait dans le view.yml de notre application:
default: stylesheets: [main]
donne comme résultat:
<link rel="stylesheet" type="text/css" media="screen" href="/css/main.css" />Et là, on se dit Euréka! Car oui on peut écrire du PHP dans les fichiers YML de Symfony, directement. Sachant qu’en environnement de production ces fichiers de configurations ne sont générés qu’au clean du cache, on peut très bien écrire alors:
default: stylesheets: [main.css?<?php echo time() ?>]
Et notre CSS changera alors de nom à chaque fois que nous viderons le cache. Certes, ce n’est certainement pas le moyen le plus optimisé car notre CSS ne change pas vraiment à chaque clean de cache, mais son coup de mise en place reste anecdotique pour le résultat obtenu.
Tags: astuce, CSS, PHP, Symfony
A propos de l'auteur
Développeur web spécialisé Symfony, il est avant tout passionné de web tout simplement. Il aime les défis et farfouiller dans le code de Symfony ou Doctrine. Fondateur du blog, il exerce chez Autrement.
Vous avez aimé ce billet? Faites le savoir!
Une Réponse
Laisser un message
Je m’en veux de ne pas y avoir pensé… merci ;)