maandag 24 maart 2014

css-tip: steeds de laatste css-versie aanbieden met php

Tijdens het wijzigen van de opmaak van een website zal je als designer geregeld de css-code aanpassen. En je weet ook dat je, om de nieuwe css te laten renderen, de webpagina met de F5-toets (windows) moet verversen. Doe je dat niet, dan gebruikt de browser nog de oude css-code omdat die nog in de cache staat.

Je weet dus ook dat wanneer je je css-bestand gewijzigd hebt en op je webserver geplaatst, dat dan de bezoekers van je website in principe ook niet meteen de nieuwe css-code krijgt, en dus geen bijgewerkte opmaak. En dat is niet wat je wilt natuurlijk.

Er zijn verschillende oplossingen. De meest voor de hand liggende (en beste)  oplossing is om de naam van je css-bestand te wijzigen zodra je wijzigingen in je css-bestand heb aangebracht. De browsercache van de bezoekers kent die nieuwe naam niet en zal dus het nieuwe bestand downloaden en renderen.
Alleen soms is dat een beetje gedoe, zeker als je regelmatig kleine wijzigingen aanbrengt.

Er is een simpel trucje om niet steeds de bestandsnaam te hoeven wijzigen. Wanneer je in je html de aanroep naar het css-bestand uitbreidt met een klein stukje PHP-code dan wordt altijd de meest recente css-versie van de server gehaald en gerenderd.

De oorspronkelijke aanroep is bijvoorbeeld:
<link rel="stylesheet" type="text/css" href="css/mijncss.css" media="screen, projection">

Wijzig deze aanroep door dit kleine stukje code in te voegen: ?v=<?php echo time()?>

De nieuwe aanroep wordt dus:
<link rel="stylesheet" type="text/css" href="css/paqqa2.css?v=<?php echo time()?>" media="screen, projection">

Nu is de url van het css-bestand bij elke pagina-aanroep anders, en dus krijgt de bezoeker elke pagina-aanroep het meest recente css-bestand te zien.

Let op: dit is slechts een trucje wat handig is als je in je 'live' website aan het werken bent en je je bezoekers gelijk het aangepaste css-bestand wil aanbieden. Nadeel is natuurlijk dat bij elke pagina-aanroep het css-bestand geladen moeten worden en dat vertraagt de weergave van je website, en het kost onnodige bandbreedte.

Dus zodra je wijzigingen definitief zijn: wijzig de naam van je css-bestand alsnog daadwerkelijk (en je aanroep in de html natuurlijk ook). Op die manier zal geen enkele gebruiker nog de oude css te zien krijgen.


Geen opmerkingen:

Een reactie posten