Django web app css not being refreshed in browser - css

I'm having some issue with a django app and it's CSS file refreshing. Basically I can see that the changes I make in my file are identified and copied in the root folder of my website, however when I open up the web browser that change is not being displayed at all:
I am using Firefox as a browser however this issue happens also on Chromium browser

If you have setup everything well in your settings.py file then your best option is to disable caching form your developer panel.
I had similar issues when I make changes in css and they are not updated when i refresh my browser. This is because the browser is keeping a cache of the css file and its not being updated for some reason.
So according to this post,you can disable caching

Related

How do I get a css file to be reflect any updates in localhost on xampp?

I have an index.html and a CSS file that are part of a wider project I am working on and it appears that any amendments I make to the CSS file is not reflected in the localhost server. Does anyone know why this might be?
Your browser will request the html files and won't always load the newest files because they are being pulled out of the cache. The best way to reset the cache is to do ctrl + shift + r.
I would guess this is a cache issue. Simple test:
Reload the page using ctrl+f5 on your keyboard. If the css updates, then your browser is (correctly, usually) caching the css file.
If this is the case, you can set up xampp to send a no cache header always or disable caching on your browser. Depending on your browser, you may be able to disable the cache on a specific domain, so all files served by localhost are not cached.

Force browser cache to clear

After deploying a new release of an ASP.NET website, is there a way to force clients' browsers to refresh cached items, especially for images, CSS, and Javascript files?
The problem is that I can’t go around telling everybody that uses the site to hit CTRL+F5. How can I force the browsers to do it?
Nada,
I have faced this issue on sites in the past, mainly FireFox and Chrome.
For each CSS and Javascript file I append a parameter ?1d= to the URL. When I deploy a change to the site that includes CSS or JavaScript it will pickup the new ID# and the end user will get the current CSS and JavaScript without the need of the hard CTRL+F5 Reset.
src="/Scripts/myJavaScript.js?id=71.11"
href="/Styles/MyStyles.css?id=71.11"

Chrome and Firefox displaying different stylesheets

When I make an edit to the stylesheet of my site, the change appears in Chrome (I load the CSS file in the browser, so I can see the edit is there). When I open the CSS file in Firefox, the edit is not there. I understand browsers will render code differently, but how is it possible that two browsers can open the same CSS file and display two different sets of code?
I tried:
deleting Firefox's cache and restarting the program
deleting the old stylesheet via FTP and uploading an edited one
I checked if the site had a CDN that was perhaps serving the old
file, but the site has no CDN.

CSS changes automatically applied on local IIS pages

I'm hosting an ASP.NET website on Local IIS (not IIS Express), and as soon as I save a change to a .css file in Visual Studio, the change immediately appears in browser windows that use that file (or after mousing over the window in Chrome), without clearing caches and refreshing.
Why do the changes appear immediately?
Opening the .css file itself (not a page using the file) in the browser shows a more expected result: saving the file in Visual Studio does not change what I see in the browser until I refresh the .css file.
As it turns out, I had Browser Link enabled in Visual Studio, and with it, CSS Auto-Sync. This opens up a port on the local machine and uses SignalR to communicate with the browser window about 400 times per second, including any CSS changes needed.
For more information, see these topics:
.net localhost website consistently making get arterySignalR/poll?transport=longPolling&connectionToken= calls
How can I disable __vwd/js/artery in VS.NET 2013?
This probably happens due to caching. when you open the css itself, it retrieves a new copy from the server, but when you open a page that uses the css file, the css file is being cached as the page's resource and the browser just shows the cached resources until you force it to reload them.
a trick i learned to fix the issue, is to link the css file to the aspx page and include a random query string to the linking, that way it tricks the browser to think that its a new resource and reload it from the server anyway.
like this:
<link href="../stylesheets/MyCSS.css?<%=DateTime.Now%>"
rel="stylesheet" type="text/css" />
we use the aspx preprocessor directive <%=DateTime.Now%> to append the current time as a query string, to ensure the link is always different.
Dont forget the question mark between the css filename and the preprocessor directive

Style rule in chrome debugger

Here is picture in chrome:
I just woder what does user stylesheet mean here. The case is that I am 100% sure that these classes does not exists in my stylesheets (it was before). I thought It comes from cache but it remains even after cache is cleared. Any ideas? Thanks.
First of all, read this definition of what a user style sheet is. It is an extra stylesheet to help you (the user) browse the web. Hence if you prefer certain CSS settings over what the web page designer intended, you can overrule those settings with your own.
This user stylesheet that you found, may therefore just be a local CSS file on your pc.
Therefore we need to know: where did you find that .CSS file?
If the same file is in this location:
PC: C:UsersYourUsernameAppDataLocalGoogleChromeUser DataDefaultUser StyleSheetsCustom.css
MAC: ~/Library/Application Support/Google/Chrome/Default/User StyleSheets/Custom.css
Then the answer is:
The file above is, as it sounds, a CSS file that you can modify and add your own custom styles to, to change the look and feel of your Google Chrome Web Inspector.
Which means that with that specific stylesheet you can change the look of your Google Chrome Web Inspector.
So it has nothing to do with the website you are inspecting, only with how your web inspector looks (it is built with HTML, CSS and JavaScript).
You can read about it here. (Google Chrome version 33 does not feature custom stylesheets)
It could also very well be the case that Google Chrome implements some other user stylesheet that is stored somewhere else on your pc (but I wouldn't know where exactly).
Note that the inspector also shows user agent stylesheets which is the default stylesheet that your browser implements. You can read about those in this question: What is user agent stylesheet
It is possible that the http server itself has cached the previous version of the file and is serving it.
Reload and check the headers in the Network tab, so you can get the full picture. Or if you are using development environment, you can restart the server - just to be sure.

Resources