So when editing my website I noticed that sometimes the CSS would not update when I would look at it in the browser. For instance, I would change the font size from 5 to 15 on my hosting company but it would still display as 5 in the browser, but when I changed browsers OR added "www." to the front of the URL it would show up as 15. This has been happening for a while and I can't seem to find a fix. It seems to happen when I view the CSS in the browser debug window. Does anyone have a fix for this?
Yes, chrome is caching your files. You can disable it (at least when the dev tools are open) by going to the network tab and then checking "Disable cache"
Related
I don't know if it's happened to someone else, but I have a django application that only shows the styles created in css only when it's in incognito mode, when the browser is in normal mode you can't see the changes created in css.
what would cause the problem? and how can i fix it?
Try to clear your browser cache, I think that should help you.
Steps to clear cache and hard reload on chrome:
1. open the website
2. Inspect the page
3. Right-click on the refresh button near the URL bar
4. Click on 'Empty Cache and Hard Reload'
It may be due to caching. The incognito mode is not cached and hence you can see the changes. One of the ways could be is to use version as a query param in your CSS URL to bluff the browser and ask them to fetch each time you change the number. Like
<link rel="stylesheet" type="text/css" href="/site_media/css/style.css?version=1" />
you can change the number of version after each edit
Sometimes browsers cache your website. But in incognito mode, the browser doesn't cache your history and searches.
To remove your cache, follow these steps:
Right click and inspect
Hover over the reload button near the url box
Right click on reload button
Click on "Empty cache and hard reload"
This is most likely due to Cache. Due to caching, you're seeing an old version of your styles (CSS).
In incognito mode, this is not a problem because Chrome uses a fresh cache when you start a session and removes that cache when you end the session.
You can solve your problem by clearing your cache.
OR
Disable cache in your browser.
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"
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
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'm trying to work in my local server but I have to clear my cache every time if I want to see changes on the css rules.
There is any way to control Google Chrome cache?
Open DevTools
Open Settings (bottom right or use F1 shortcut)
Check Disable cache (while DevTools is open)
https://developers.google.com/chrome-developer-tools/docs/settings#general
CTRL+F5 : to refresh the page by clearing GG chrome cache.
Open up your Developer Tools then click the icon on the top right
In settings --> preferences scroll down to find "Disable cache (while DevTools is open)" and click on the box to select the option.
If you are still having the problem, and the page works on other browsers, then the easy fix could be to just uninstall Google Chrome and do a fresh install of the latest version. I ran into this problem and it was the best fix instead of the headache of tracking down a complicated fix or outdated posts that no longer work. After you have Chrome reinstalled, repeat the steps above to disable cache.
Following this solution here helped me reloading the css : https://wpreset.com/force-reload-cached-css/
Instead of requesting the file doing the following :
<link rel="stylesheet" href="~/css/variabledocument.css" type="text/css" />
Request id by adding a parameter (the name of the parameter doesn't matter) at the end of the file :
<link rel="stylesheet" href="~/css/variabledocument.css?refreshcss=1" type="text/css" />
This will request the new css file. Whenever you make a change to your css file, you just have to change either the parameter name, value or both and the server will request it again.
This is very useful when you have no control over the browsers of your clients and it requests no action on their part.
You can do any of the following options:-
Install a Chrome Extension like Clear Cache to clear cache by clicking on icon.
Use Incognito Mode and browser your website in incognito mode. Incognito mode won't disable cache clearly. Disabling cache completely may slow down your browsing experience.
Use chrome's features like Hard Reload (Clear cache and hard reload). Read this stackoverflow post
As #Vitaly mentioned, Use Developer Tool settings to disable cache completely.
Choose what fits you :)
More tools > Developer Tools
Then right click the refresh button on the browser.
You will get three options. Select "Empty Cache and Hard Reload".
This will only impact the active tab.
Shift-F5 to reload the page worked for me on Chrome 61.0.3163.100
To Control Google Chrome Cache you can do following steps:
Disable the cache (while DevTools is open)
Close the Chrome Browser
Clear the Cache with a cleaner software (such as CC Cleaner)
Open Chrome browser
Just to elaborate on JGallardo's answer above in 2022
In Chrome version 100.0.4896.88 in order to Disable the cache (while DevTools is open) the setting looks like this:
I like the solution of SylvainB2347 with adding some parameter to the include statement. This really makes Chrome to reload the resource as it assumes it must have changed.
I just wanted to optimize this solution a little, to make it automatic but not breaking the caching principle.
My solution is to use the PHP function filemtime(filename) which returns the timestamp of last content modification. I use it as:
<link rel="stylesheet" href="/index.css?foo=<?php echo filemtime("index.css"); ?>">
which produces this in HTML:
<link rel="stylesheet" href="/index.css?foo=1673508035">
When I modify index.css, the timestamp changes. This way the browser is forced to reload the resource only if it's been modified since the last visit. And I don't have to rewrite anything manually.