CSS file changes are not reflected in browser

Question

I have the following function inside of a css file.

#portfolio .portfolio-box .portfolio-box-caption {
  display: block;
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 100%;
  text-align: center;
  color: #fff;
 opacity: 0;
  background: rgba(13, 13, 13, 0.1);
  -moz-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

I've changed the parameters values of the rgba function to something like:

background: rgba(255, 255, 132, 0.1);

but the changes are not visible in my browser. I have also deleted the cached browser's data but didn't get any result.

Please help me with that ! Thanks in advance.

Have you inspected the element to see the updated values for the `background` property to ensure that the cache was properly cleared? — hungerstar, May 09 '17 at 18:58
I did it. The values are not updated when I'm inspecting them (the old values are shown). I've tried another browser and seems to work as expected. (why does the problem still persist in Google Chrome ?) — Ovidiu, May 09 '17 at 19:06

score 2 · Answer 1 · answered May 09 '17 at 19:26

2

I think the problem is that you are setting the property opacity to zero. Try to remove the line 'opacity: 0' or change it to a higher value.

answered May 09 '17 at 19:26

Lin Kassem

25
7

score 1 · Answer 2 · answered May 09 '17 at 20:36

1

Try opening Developer Tools in Chrome, then on the Network tab you can disable caching for your website.

answered May 09 '17 at 20:36

Kriszta

575
5
19

score 0 · Answer 3 · answered May 09 '17 at 19:13

You should implement fingerprinting of your assets (CSS, JS, perhaps even images in case you often change them). As long as you're developing on your localhost, caching and clearing the cache is easy, but as soon as you get live users, you can't make them clear cache and the only way to propagate changes in assets (CSS, JS, images, fonts) to all users is via fingerprinting. How that is done, exactly, depends largely on your build process and your entire stack. In essence, fingerprinting just adds a version query to your asset links. Eg., your CSS style won't be linked as style.css but it'll be linked as style.css?v=1 and then at next change, v=2, etc. Or it could have a random query based on last change timestamp or some other way.

score 0 · Answer 4 · edited May 23 '17 at 12:02

0

Change opacity from 0 to 0.5:

opacity: 0.5;

Change "a" in rgba from 0.1 to 0.8

background: rgba(13, 255, 13, 0.8);

Or disabling chrome cache like it is explain here Disabling Chrome cache for website development

edited May 23 '17 at 12:02

Community

1
1

answered May 09 '17 at 19:15

b2ok

552
6
13

Opacity should be a value between 0.0 and 1.0 – keithjgrant May 09 '17 at 20:03
Yes. I just want to test with opacity greater than 0. I say 50 only like example different from 0. – b2ok May 09 '17 at 21:05
Uh uh, thank you @keithjgrant, I just see my fault '50'. I edited it. – b2ok May 09 '17 at 21:07

CSS file changes are not reflected in browser

4 Answers4