Tvinga webbläsaren att hämta om CSS-filer

Att göra ändringar i CSS:en kan vara irriterande då webbläsaren inte alltid känner för att hämta om CSS-filen. Detta kan vara väldigt problematiskt om man uppdaterar CSS:en på en sida som redan ligger live – hur kan man säkerhetsställa att alla användare ser uppdateringen omgående?

Ett väldigt bra knep är att lägga till en parameter på css-filen, likt:

1<link rel="stylesheet" href="style.css?ver=1" />
1<link rel="stylesheet" href="style.css?ver=1" />

När du sedan har uppdaterat CSS:en så uppdaterar du versionsnumret till exempelvis 2, sedan 3 o.s.v.

Har du ett projekt där du programmerar med PHP så kan man även på ett väldigt smart sätt utnjyttja funktionen filemtime(); (php.net) som talar om senast en specifik fil uppdaterades. Så här skulle ens PHP-kod kunna se ut:

1$cssUpdateTime = filemtime('style.css');
2$stylesheet = 'style.css?ver=' . $cssUpdateTime;
3
4<link rel="stylesheet" href="<?= $stylesheet ?>" />
5
6<!--
7Ger något i stil med:
8<link rel="stylesheet" href="style.css?ver=1345061074" />
9-->
1$cssUpdateTime = filemtime('style.css');
2$stylesheet = 'style.css?ver=' . $cssUpdateTime;
3
4<link rel="stylesheet" href="<?= $stylesheet ?>" />
5
6<!--
7Ger något i stil med:
8<link rel="stylesheet" href="style.css?ver=1345061074" />
9-->

Så varje gång du uppdaterar CSS-filen så uppdateras "versionsnumret", och besökarnas webbläsare tolkar det som en ny URL till CSS-filen som den måste hämta om.