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
Related
I am making a website using PHP. While completing it I tested it on Firefox only. Today when I tried to test it on other browsers (Opera, Chrome & Internet Explorer) I found some problems in my CSS. When I made changes to my CSS file, none of these browsers except Firefox is showing changes made in the CSS file.
<link rel="stylesheet" type="text/css" href="style.css" media="screen">
So far what I have tried after Googling for a long time is
Cleared Cache memory of browser
Put "?v='+1 everytime'" at end of style.css
Refresh the webpage using 'ctrl+f5', 'ctrl+r' etc.
Any help ? Thanks in advance....
This is intended behaviour by most browsers. Whenever you try to load a page, if any resources are already present in browsers' cache, they will be loaded from there.
You have two options:
disable browser cache for your preferred browser (some browsers allow you to disable cache for specific domains)
make your HTML always refresh the resource, by appending a non-repeating parameter to the requested resource file name. I personally use: ?v=1482939287 (where 1482939287 is the timestamp). This will make the browser always refresh the resource, as it will ask for a version that's not existing in browser cache.
Example: <link rel="stylesheet" type="text/css" href="/css/style.css?v=1482939287">
Update: You can flush the cache for a webpage by opening Dev Console (Ctrl+Shift +I), right-click-ing on refresh page arrow (while Dev Console is open) and selecting Empty Cache and Hard Reload. That is emptying the cache.
You can also disable it, as suggested above, by opening Dev Console, going to Network tab and checking "Disable Cache" checkbox right under it. Please note that cache is only disabled while your developer console is open.
There are several solutions for this. I will list you some of my options below.
Unique identifiers to files though parameters
Adding a parameter behind the file as a kind of a version number may help.
In php you can use time() to get the current timestamp or unique() to get a unique string.
Cache settings server side
You can also find some .htaccess settings for caching specific file types on the server side. For performance reasons you should do this for production, too.
Browser Dev Tools
Another way is to open your Browser Dev Tools (mostly F12) while developing. Most browsers like Chrome and FF provides a cacheless enviroment when your Browser Dev Tools are open. As a example in chrome you can disable caching explicit.
My suggestion
Or even better use Task Runner to accomplish this. The keyword to search for is 'cache bust'. As example you can run gulp for concat, versioning, and let it connect the right css files you want to. This is specially suggested for development phase.
regards
Gkiokan
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.
So I'm having this really weird bug with my new server where the CSS won't update in the browser. Refreshing and clearing the cache doesn't work. I then opened up FileZilla to see if the updated CSS file is actually being uploaded to server using FTP, which it is, and then when I drag a copy of the css file to my desktop, the css file magically updates. The PHP file updates just fine.
Here's how I include the css: <link rel="stylesheet" type="text/css" href="css/stylesheet.css">
I have no idea what is happening and how to fix this so any help would be greatly appreciated!
You could have any number of issues, but I'd like to point out a cool tip when using Chrome.
On your page, with the developer tools open if you press and hold the reload button you get a great option to clear the cache and hard reload!
This is very handy to make sure you have the "freshest" copy while developing.
Update:
As for your scenario (after reading updates) it sounds like an HTTP header issue with your CSS file.
Check what HTTP headers are being sent with your CSS file response. If you are not specifying a cache header it will likely try to cache for you. Set an expires header (in the past) when in development, but far in the future when in production. In the Network tab of your developer tools (most browsers) you should be able to see these headers, or you can use a too like Fiddler that will let you deeply inspect your network traffic.
Alternatively if you can't easily tweak the HTTP Headers, then set a far expires header, but ensure the path to the file changes whenever you make a code change. Options include:
adding a time() stamp (always changes (yeah!) but doesn't cache (boo))
add the version control # to the file URL (works great, but you need to manage the updates properly within your tooling)
something fancier that creates a generated "fake" path to the file that auto changes on any modification to the file... but also loads the URL as expected, and sets the cache to "forever" (max 365 days according to the HTTP specs)
You may try queries to force the browser to load fresh CSS when it loads. To do this
<link rel="stylesheet" type="text/css" href="css-file-name.css?v=1.1">
If you are comfortable with php you may try below code to force the browser to load most updated CSS to load. To do this
<link rel="stylesheet" type="text/css" href="http://example.com/style.css?d=<?php echo time(); ?>" />
This will ensure browsers always load fresh CSS with last modified time stamp.
Hope this help you.
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 had this problem for a while now. There are times when I am working on a CSS file and I overwrite it by FTP-ing via FileZilla. When I reload the page to check my new changes, it doesn't load my new file. I can clear cache, reload, reset, etc, nothing will reload it. It happens the same accross IE, FF, Chrome, Safari, etc. If I delete the CSS file from the server, it is still being loaded up, but I don't know from where. The website is WordPress based but has no cache plugins. After a while, it will load the new file, but a while has to pass.
http://skyhangout.com/bellavistadental/
What in the world is causing this?
I had the same problem a few times! I can be obvius, but do you delete the cash from the dashboard? It is the only thing thats works to me (sometimes).
A common and effective method of cache busting is to append a query string ?example to the end of the stylesheet link:
<link rel="stylesheet" type="text/css" media="all" href="http://skyhangout.com/bellavistadental/wp-content/themes/tOrange/style.css?v=1.0" />
Then you just change ?v=1.0 to ?v=1.1 or something similar each time you update the CSS file.
This makes the browser think it's a new file, so any previously cached version is ignored and the new CSS file is downloaded.
If this doesn't fix it, it's not a browser cache issue, and is probably server-side caching (on the server level, not the Wordpress level), which you'd need to speak with your webhost about.