CODEWITHSUNDEEP
htmlcss
Nitin Rathod
Nitin Rathod

Reputation: 163

CSS not reflecting

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

Upvotes: 2

Views: 427

Answers (5)

Antonio Viola
Antonio Viola

Reputation: 61

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

Upvotes: 0

Marek Skrzyniarz
Marek Skrzyniarz

Reputation: 56

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.

Upvotes: 0

saurav
saurav

Reputation: 1002

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.

Upvotes: 2

V.Raval
V.Raval

Reputation: 64

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.

Upvotes: 0

Shipow
Shipow

Reputation: 2447

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'); ?>" />

Upvotes: 2

Related Questions