Hallo zusammen,
bestimmt ging es einigen von euch auch schon mal so: Man hat stundenlang an seiner Website gebastelt, sie endlich komplett auf Responsive Design umgestellt und freut sich auf das Ergebnis auf dem Smartphone. Doch wenn man das Handy zückt, sieht man... genau das alte Design! 📱❌
Das liegt in den allermeisten Fällen nicht an der Website oder am Code, sondern am Browser-Cache des Smartphones. Handys (und auch Desktop-Browser) speichern CSS-Dateien gerne hartnäckig im Speicher, um Ladezeiten zu sparen. Der Browser denkt sich: "Die style.css kenne ich schon, die lade ich nicht nochmal herunter" – und knallt dem Besucher die alte Version vor die Nase.
💡 Der einfache Trick: Der Versions-Parameter!
Um den Browsern zu sagen, dass sie sich die neue CSS-Datei herunterladen müssen, könnt ihr einen kleinen Trick anwenden. Häng einfach an euren CSS-Link im <head> eurer Website einen kleinen Versions-Parameter an:
Vorher: <link rel="stylesheet" href="style.css">
Nachher: <link rel="stylesheet" href="style.css?v=2">
Wie funktioniert das?
Für den Browser ist style.css?v=2 eine komplett neue Datei. Er lädt sie frisch vom Server herunter und ignoriert den alten Cache.
Bei den nächsten Änderungen erhöht ihr die Nummer einfach fortlaufend: style.css?v=3, style.css?v=4 usw.
Das nimmt euch (und euren Website-Besuchern) extrem viel Frust und man muss nicht mehr jedem erklären, dass er einmal den Browser-Cache leeren soll.
Probiert es mal aus!
Viele Grüße und weiterhin viel Erfolg beim Bauen eurer Websites! 🚀