Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

CSS changes not reflecting on site

Tags:

css

asp.net

Whenever we make changes to the CSS, it generally takes 24 hours to reflect those changes on my site. I have tried clearing the server cache and browser cache but it doesn't help too. Is there any other way to make the CSS changes reflect immediately after updation?

it happens in all the browsers... when i check it in the browser , i can access my css file with two paths eg : i store my css in folder named "Cssfolder" and my css name is say 135.css So when i access the folder paths, Cssfolder/135.css & cssfolder/135.css, one of the path shows me latest css whereas other one shows me old css.Notice the "c" is captital in one path whereas small in other path.

Thanks.

like image 805
Samiksha Avatar asked Dec 21 '08 08:12

Samiksha


People also ask

Why are my CSS changes not reflecting?

Force the refresh of the browser-cached resource by pressing CTRL F5 . HINT: This Q&A explores the subject. Force the refresh of the server-cached resource by entering the URL of the static resources in the Address Bar and pressing CTRL F5 on that page (that is the CSS file).

How do I fix CSS not working on my website?

Regenerating CSS: This can easily be fixed by going to WP admin > Elementor > Tools > Regenerate CSS. Then, you can clear the cache (WP cache and browser cache) and refresh the page. Clearing Site Cache: Check if you have any caching plugins on your site or any server level caching enabled. Clear those caches.

Why is my CSS style not being applied?

Make sure that you add the rel attribute to the link tag When you add an external CSS file to your HTML document, you need to add the rel="stylesheet" attribute to the <link> tag to make it work. If you omit the rel attribute from the <link> tag then the style won't be applied to the page.

Why are my HTML changes not reflecting in browser?

Browser Caching The problem that occurs is that sometimes you visit a page where a change has occurred and it does not appear because you're seeing the old cached version that your browser stored. This can be easily fixed by simply clearing the browser cache.


2 Answers

I've found this to be a pretty common problem in a lot of my projects. I would suggest two things...

  1. If it's just an app that you are working on you can use the CSS Cachebuster during development.

  2. Following the idea behind the Cachebuster I have found that often adding the timestamp of the CSS file as a query string off of the CSS link will help in telling the browser that the file is different... something like... whatever.css?12212009035543

like image 102
Tim Knight Avatar answered Sep 23 '22 13:09

Tim Knight


You might want to use a monitoring tool, like Live Http Headers for Firefox, to see the requests and responses to and from the server. This usually solves a lot of problems for me. Take a look at the "Expire" headers and conditional requests (like: "If-modified-since"). This said, take a look at server and client local times and timezones - it might be that they differ significantly and conditional GET requests "seem to be" handled correctly, because of future or otherwise mangled timestamps.

You can force to load the current css directly from the server with appending a random unique value to the url, like http://example.com/Cssfolder/135.css?983274928374 and http://example.com/cssfolder/134.css?08973249827. There's no way that this would ever get cached unless you use the same random value twice.

This way you learn where to look further for the solution to your problem: At the server, the ISP/a proxy or your browser.

like image 29
Olaf Kock Avatar answered Sep 22 '22 13:09

Olaf Kock