2

I am making php website. but there is some problem with css. i have copied some of the css from my previous project to the new project. and if i change something in that css , it is not reflecting in the browser (chrome) even in the inspect elements the added css lines are not visible. it is the case with every css , in my project/website. for solving this what i do is i rename css doc , after renaming all the existed lines plus added lines reflects. now if again have to add something again i have to rename the sheet. May be my browser refers to the old copy of css.and if i change in to that it still refers old copy. Solution please

Nitin Rathod
  • 155
  • 1
  • 10

5 Answers5

2

While working on such changes that can be cached by your browser, keep the developer tools window open in chrome and check "Disable cache" checkbox in Network tab of developer console. Now after refreshing chrome will always load new changes.

Reference: https://stackoverflow.com/a/7000899/3896470

Adding a version parameter to CSS file URL will help you avoid such issues in the production environment because if something is cached in your browser then it will get cached in your customer's browser too.

Example: link/to/css-file.css?ver=1.0.1 (as answered by @Marek in https://stackoverflow.com/a/35251312/3896470)

I can't add comments so added as answer.

Community
  • 1
  • 1
saurav
  • 872
  • 11
  • 20
  • agreed, if the CSS is linked properly and not updated then definitely a cache issue – Aziz Feb 07 '16 at 08:20
2

You can prevent caching by adding a timestamp to the end of the src attribute:

<link rel="stylesheet" type="text/css" href="style.css?<?php echo date('l jS \of F Y h:i:s A'); ?>" />
Shipow
  • 2,381
  • 1
  • 20
  • 28
0

Browser gets old version of CSS file from cache.

To see your changes you can:

  1. Clear browser cache
  2. Change URL to your CSS file

You can just add 'ver' parametr to your url:

link/to/css-file.css?ver=1.0.1

@Shipow solution is good but only if you making changes locally. Don't use this solution on your production server because when you add current timestamp to URL, your CSS file URL will change on every page reload. And your customer's browser will always download this file because URL to this file is every time different.

saurav
  • 872
  • 11
  • 20
Marek Skrzyniarz
  • 56
  • 5
0

A good way to force your CSS to reload is to:

<link href='styles.css?version=1' rel='stylesheet'></link>

And then just increment the version number as you change your CSS. The browser will then obey. I believe StackOverflow uses this technique.

V.Raval
  • 54
  • 5
0

You have a cache issue. You may disable cache on your apache server configuration.

Antonio Viola
  • 61
  • 6