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.
Related
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
I'm building a site in Chrome 74 using Notepad++ and XAMPP on localhost.
I have an index.php main file and an external style sheet index.css.
It is connected to the main file like so: <link rel="stylesheet" type="text/css" href="index.css">
After making a few updates to index.css I couldn't get Chrome to view them. Originally I thought my css was wrong. But after pressing F12 in Chrome and looking at Sources and checking the index.css file I saw that the changes I had written weren't there.
The changes have been saved in Notepad++, browser page has been refreshed. I even looked at index.css using good old regular notepad just to be sure.
I have also tried restarting the browser, restarting XAMPP and then restarting my computer. Still the same.
The interesting thing is, changes made to index.php are being updated successfully. It's solely the changes to index.css that aren't. It's as if Chrome does not reload index.css but keeps an old version of it.
It has happened to me before, but last time the problem sort of just went away after a while and Chrome started updating index.css. Now I want to know why it happens.
Does anyone know why Chrome does this? Help much appreciated :)
To be clear: As of the moment, no changes made to index.css is being loaded by Chrome. Even stuff like body { background-color:red; }
The file is being cached: https://developer.mozilla.org/en-US/docs/Web/HTTP/Caching
Usually, with the default configurations, dynamic pages (.php) are not cached and static files (.css, .js, etc.) are cached.
You can:
Reload the page while pressing the shift ( ⇧ ) key
Clear caché and then reload
Implement a caché strategy for development
I work on a local web site project and i use google chrome for testing my css.
So i want to know how can I save the changes I make in chrome css tool to my project, because i have always to copy and paste the css i put to google chrome in my file .css.
Navigate to this stylesheet in the Sources panel of the Developer
Tools, Right-click it, and Save-As this file to your computer
see here for more info
You can use special tools like Emmet LiveStyle http://livestyle.emmet.io/ so that you can edit code in Chrome and it will be automatically saved to your css files (There are more than one of them)
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.
I have a django site running locally. Everything seems ok except the CSS files that can not be loaded by Chrome. I can see a Failed to load resource error in the console.
The site is ok in firefox
The site is ok if I get the css not from the local server but from the production server
The css source can be viewed correctly
I have no special blocker plugin install
The css is rather big but I still have the issue if I use a very short file
I have similar issues with some js files (ckeditor)
It works of with some other css and js (admin css for example)
The django app has been developped with 1.0 and I am in the process of moving it to 1.4. The css and js files are served as media
Any idea?
Didn't find the real cause but the problem is solved. Maybe because it was served as media and now it is served as a static.