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.
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
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.
I'm just starting to play with Durandal, using the starter kit. I've added a very simple new view/viewmodel combination (essentially a copy/paste of an existing one from the sample) and mapNav()'d the route.
The problem is happening when I try to refresh my browser...the new view simply does not appear. It's not in the nav bar, nor can I navigate directly to the view by typing in the address bar. I know the code is (or should be?!) correct because if I go to the page in a different browser, everything appears as it should.
Is there some browser caching that Durandal is doing somehow? Sometimes F5 or Ctrl+F5 works to refresh, sometimes it doesn't. I also can't deep-link to a specific 'page'. Ie:
http://localhost:52625/#/newpage just gives me a blank
What am I missing?
The option that I use in Chrome is to open developer tools and right-click on the refresh button. There is an option for 'Empty Cache and Hard Reload' which always fixes this issue for me. I don't know the equivalent in IE but try this and see if it fixes your issue.
Most browsers will cache modules returned via RequireJS, which is how Durandal obtains its modules and view models.
CTRL+F5 doesn't help because that just refreshes the initial page - all the modules are still requested using javascript (RequireJS), so they are usually pulled from cache first.
I've found it's best to disable caching in your browser's developer tools. Doing so will ensure that all network requests are loaded directly from the source and not from cache.
See this question for additional information: Debugging when using require.js cache
Another solution is configure RequireJS to set its urlArgs property: https://stackoverflow.com/a/8479953/91189
This solution works ok, but makes it harder to debug, at least in Chrome, because breakpoints are lost every time the module is loaded, since it's technically a different file being requested each time.
I am creating a website, but when I made changes to the stylesheet on my site, and I refreshed the site, none of the changes were there.
I tried to use the view source tool to check the stylesheet.css and it isn’t updated either. But when I go to the root of my system it is.
I have to wait at least 20 minutes before I see the update on my site, can anyone tell me why I don’t see changes right away? Is something wrong with my browser, computer, or server?
I also tried deleting my cookies, cache, and history but it still didn’t work.
If your site is not live yet, and you just want to update the stylesheet at your pleased intervals, then use this: Ctrl + F5.
On Mac OS (in Chrome) use: Cmd + Shift + R.
This will force your browser to reload and refresh all the resources related to the website's page.
So every time you change something in your stylesheet and you wanna view the new results, use this.
Most probably the file is just being cached by the server. You could either disable cache (but remember to enable it when the site goes live), or modify href of your link tag, so the server will not load it from cache.
If your page is created dynamically by some language like php, you could add some variable at the end of the href value, like:
<link rel="stylesheet" type="text/css" href="css/yourStyles.css?<?php echo time(); ?>" />
That will add the current timestamp on the end of a file path, so it will always be unique and never loaded from cache.
If your page is static, you have to manage those variables yourself, so use something like:
<link rel="stylesheet" type="text/css" href="css/yourStyles.css?version=1" />
after doing some changes in the file content, change version=1 to version=2 and so on.
If you wish to disable the cache from caching css files, refer to your server type documentation (it's done differently on apache, IIS, nginx etc.) or ask/search for a question on https://serverfault.com/
Assuming IIS - adding the key under <system.webServer> with the right settings in the root or the relevant folder does the trick.
<?xml version="1.0" encoding="UTF-8"?>
<configuration>
<system.webServer>
<caching enabled="false" enableKernelCache="false" /> <!-- This one -->
</system.webServer>
</configuration>
That said sometimes one still has to recycle the Application Pool to "bump" the CSS. Therefore: Disabling IIS caching alone is not a 100% guaranteed solution.
For the browser: There are some notes on fine-grain controlling the local cache on FF over on SuperUser for the interested.
Easiest way to see if the file is being cached is to append a query string to the <link /> element so that the browser will re-load it.
To do this you can change your stylesheet reference to something like
<link rel="stylesheet" type="text/css" href="/css/stylesheet.css?v=1" />
Note the v=1 part. You can update this each time you make a new version to see if it is indeed being cached.
This may not have been the OP's problem, but I had the same problem and solved it by flushing then disabling Supercache on my cpanel. Perhaps some other newbies like myself won't know that many hosting providers cache CSS and some other static files, and these cached old versions of CSS files will persist in the cloud for hours after you edit the file on your server. If your site serves up old versions of CSS files after you edit them, and you're certain you've cleared your browser cache, and you don't know whether your host is caching stuff, check that first before you try any other more complicated suggestions.
I had a similar problem, made all the more infuriating by simply being very SLOW to update. I couldn't get my changes to take effect while working on the site to save my life (trying all manner of clearing my browser cache and cookies), but if I came back to the site later in the day or opened another browser, there they were.
I also solved the problem by disabling the Supercacher software at my host's cpanel (Siteground). You can also use the "flush" button for individual directories to test if that's it before disabling.
In my case, since I could not append a cache busting timestamp to the css url it turned out that I had to manually refresh the application pool in IIS 7.5.7600.
Every other avenue was pursued, right down to disabling the caching entirely for the site and also for the local browser (like ENTIRELY disabled for both), still didn't do the trick. Also "restarting" the website did nothing.
Same position as me?
[Site Name] > "Application Pool" > "Recycle" is your last resort...
If it is cached on the server, there is nothing you can do in the browser to fix this. You have to wait for the server to reload the file. You can't even delete the file and re-upload it. This could take even longer if you are using a caching server like Cloudflare (it will even survive a server reboot). You could rename it and load a copy.
i had the same problem, I use 000webhost to host my site and i also use cloudflare. I'd already disabled all my cache setting from my browser then tried to change some css and reload the page with hard refresh (shift + click refresh button, ctrl + f5, etc) nothing had changed.
It turns out the issue was coming from cloudflare cache. If you are using cloudflare, you can enable development mode in cloudflare it will temporarily bypass your cache allowing you to see changes to your origin server in realtime.
For someone who still encounter this problem, i hope this can help you
This may be a result of your server config, some hosting providers enable "Varnish" on your domain. This caching HTTP reverse proxy, is used to speed up delivery. One could try to disable varnish on the cpanel (assuming that you have one) and check if it was that.
For reference, I'm developing on a Windows 11 machine ,first run below 2 command
$env:NODE_ENV="development"
$env:TAILWIND_MODE="watch"
now run your application
for reference follow : https://github.com/tailwindlabs/tailwindcss/issues/4081
Same problem happened with me I am cleared my browser cash and cookies then automatically running properly
![Clear Cache] Ctrl+Shift+Delete
http://i.stack.imgur.com/QpqhJ.jpg
Sometimes it’s necessary to do a hard refresh to see the updates take effect. But it’s unlikely that average web users know what a hard refresh is, nor can you expect them to keep refreshing the page until things straighten out.
Here’s one way to do it:<link rel="stylesheet" href="style.css?v=1.1">
I ran into this problem too, a lot of people seem to recommend force reloading your page, which won't fix the issue in cases such as if you're running it on a server. I believe the optimal solution in this scenario is to timestamp your css.
This is how I do it in my Django template:
<link rel="stylesheet" href="{% static 'home/radioStyles.css' %}?{% now 'U' %}" type="text/css"/>
Where adding ?{% now 'U' %} to the end of your css file would fix this issue.
Where ?Wednesday 2nd February 2020 12PM (current date) seems to fix the issue, I also noticed just putting the time fixes it too.
I had same issue. One of the reasons was, my application was cached and I was performing local build.
I would prefer deleting the css file and re-adding it again with changes if none of the above comments work.
First, try to Force reload or Clear cache and Empty chase and hard reload. You can do it by pressing F12 and then by right-clicking on it.
2nd Solution: Check your HTML base tag. You can learn more about it from here.
Don't update the styles in style.css, instead create a new stylesheet of your own and import in style.css
your-own-style.css
.body{
/*any updates*/
}
import your-own-style.css in style.css
#import url("your-own-style.css");