-2

Everytime I work on my header and style it, the css-changes have a delay. My header is included with PHP. In general there arent issues with the connection between the include file and the index file. And the css works aswell but every time I make changes to the css-file it takes time until I can see a result in the browser because there is a big delay until the styles refresh. Sometimes it worked when I restarted my xampp server but sometimes I had to restart my PC to see a change in the browser.

I appreciate help and sorry for my grammar (Im german)

KptnFilzbart
  • 3
  • 2
  • 5
    I suspect your browser is caching your style sheet. Have you tried forcing a refresh when you make an update (i.e. CTRL-F5). – jdknight Feb 20 '18 at 17:49
  • yes I did. By the way: anything else that isnt included in an include file rather in the main page works without any delay – KptnFilzbart Feb 20 '18 at 17:53
  • I tried many browsers. Some have delay like google chrome and some have no delay like microsoft edge. But I still dont understand why – KptnFilzbart Feb 20 '18 at 18:01
  • What happens when you manually open your style sheet from your browser? If you see a difference between what you have on disk and what you're browser is loading, your style sheet is being cached. If you believe it's being cached, I'd suggest you consult the following: https://stackoverflow.com/questions/460389/ – jdknight Feb 20 '18 at 18:02
  • alright i think you found my issue, thank you – KptnFilzbart Feb 20 '18 at 18:14

2 Answers2

2

The reason for this is the browser cache.

You have several options:

  • force refresh
  • in ispector, tab "Network" use option "Disable cache"

  • Any way of versioning css:

    <link rel="stylesheet" href="/f/css/lightbox.css?version=1">

or debug constraint

 <?php define('__DEBUG__', true) ?>
 <link rel="stylesheet" href="/f/css/lightbox.css?<?=__DEBUG__?time():''?>">

or file modification time

 <link rel="stylesheet" 
 href="/f/css/lightbox.css?v=<?=filemtime(ASSETS_BASE_DIR.'/f/css/lightbox.css')?>">
bato3
  • 2,695
  • 1
  • 18
  • 26
  • 1
    Nice answer, but needs a beefier description of the problem: Static files like CSS are served with long caching headers by default by most HTTP servers, which means that neither your browser nor any intermediate caches are obligated to even check for a new version. – Sammitch Feb 20 '18 at 19:00
0

This is by design to increase the performance of the browsers, so your static files are cached for faster access. Simple refresh may or may not load changes, but to force it you need to hit CTRL + F5

Ibo
  • 4,081
  • 6
  • 45
  • 65