Note de ce sujet :
  • Moyenne : 0 (0 vote(s))
  • 1
  • 2
  • 3
  • 4
  • 5
Mise à jour automatique des fichiers CSS et JS d'un site web
#1
Bonjour,

Il existe une méthode simple pour automatiser la mise à jour des fichiers CSS et JavaScript d'un site web. L'avantage de cette méthode une fois en place, vous fera gagner de précieuses minutes, plus besoin d'inviter les internautes à mettre à jour leur cache ou à utiliser la combinaison "CTRL + F5".

Quelques notions de PHP et de .htaccess sont requises, pas de panique c'est très simple.

On supposera que la feuille de style est appelé comme ceci dans l'entête de votre site :

Code :
<link href="/css/vitrine.css" rel="stylesheet" type="text/css" />

On utilise la fonction filemtime qui permet de récupérer la date de dernière modification du fichier.

On adapte ensuite cette fonction à la balise <link>, l'objectif étant de pouvoir récupérer la date et l'heure de votre feuille de style.

Code PHP :
<link href="/css/<?=filemtime($_SERVER['DOCUMENT_ROOT'].'/css/vitrine.css')?>vitrine.css" rel="stylesheet" type="text/css" /> 

Ceci aura comme conséquence de générer dans le code source de la page de votre site ceci :

Code :
<link href="/css/1333116085/vitrine.css" rel="stylesheet" type="text/css" />

Il reste encore une condition à créer dans votre .htaccess. Sans cette condition le serveur ne pourra pas afficher correctement votre site car il supposera que votre feuille de style se trouve dans le sous-dossier intitulé "1333116085".

Le petit bout de code ci-dessous fera croire au serveur que le sous-dossier "1333116085" existe bien.

Code :
RewriteRule ^css/([0-9]+)/([^/]+).css /css/$2.css[L]

Et pour reprendre l'expression de l'excellent Michel Chevalet "C'est pas compliqué, comment ça marche" voici l'explication en 3 étapes :

1) Le visiteur arrive sur votre site la feuille de style est mise en cache par le navigateur en mémorisant son chemin "/css/1333116085/vitrine.css".

2) En mettant à jour votre fichier CSS sur le serveur la date et l'heure de modification de celui-ci changera également, le chemin sera donc différent.

3) Si le même visiteur revient sur votre site, son navigateur comprendra alors que le chemin du fichier CSS à changer, il le rechargera à nouveau.

Big Grin


Atteindre :


Utilisateur(s) parcourant ce sujet : 1 visiteur(s)