I've been using S3 to host static websites and I've made changes to the HTML & CSS files and have seen those changes reflected in the past. For some reason I go to do the exact same thing I've done before, change the style of one of my sites, and no change would take place. In-fact after deleting all previous files, the old build was still rendering. I had no version control on that particular bucket.
Content-type is set to 'text/css'. My file structure is normal with index.html being in the root. My normal steps of creating or updating new or existing sites has not changed, but S3 has for some reason.
When I click on the index.html file and go to the public url link, it reflects all my changes.
My only fix is to add the full url to the style link.
<link href="https://s3.amazonaws.com/{bucket-name}/css/style.css">
Does anyone know why this is happening or how to fix it other than adding the http link? If not, I hope my solution helps others for this weird S3 issue. Normally you can just upload your files to a bucket, set the policy and finally enable hosting after stating the root html file.
It might be due to your browser caching, where it's loading locally stored assets (CSS stylesheet) from a previous time you've visited the URL rather than fetching the new resources in an attempt to speed up load times. There are settings you can change in your browser to determine how long your browser will hold onto cached resources before fetching new ones.
By setting the stylesheet link directly to the s3 bucket URL, it will cause it to fetch the new stylesheet every time the page is loaded, which leads me to believe that caching is the issue here.
Try clearing your cache and see if it solves the problem.
Here is a deeper explanation of the concept with respect to browsers, and a list of commands to perform a cache refresh depending on what browser/OS you have!
I think it's the CSS folder's doesn't allow you to access the files inside. If you make the folder public, it will work.
Select all your files and folders, go to actions tab and then select make public to allow objects to access one another.
I'm working on a Wordpress website and I have styles loaded from two stylesheets - original style.css and style-custom.css for additional style.
Unfortunately whatever I do, the styles do not refresh. I already tried to press Shift+F5 without success.
I've purged the server and browser cache entirely several times (even though it's actually permanently turned off via WP Engine). I've removed appended ?ver numbers to force the update of the file content.
Right now I've even deleted the file and it is still loading in the browser! Even worse - it's loading in all browsers that I have not even ever used on the damn site.
I don't know what else to do. The file is gone and the cache has been purged.
There is definitely some sort of caching mechanism still. Are you developing on your own server? If you try to refresh on somebody else's computer are they able to see the file?
If yes - then you need to contact the servers' administrator, or you hosting provider with clarification.
You should be developing your websites locally though, and once they are ready publish them on the web.
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.
I have change a bit of code in my CSS from Magento for my header logo but Magento doesn't load my new CSS update and still shows the old one.
I have already refresh the cache in Magento
Flush Magento Cache
Flush Cache storage
Flush Javascript/CSS Cache
At System - Cache Management
I have a folder var/cache and in here folders like mage--0, mage--1
i have tried to back-up them so i can restore it when i delete them and something won't wrong but i cant back-up it.
Hello first of all you can always safely delete the contents of var/cache you do not need to back it up. I konw it might sound silly but did you clear browser cache? Also make shure you changed the correct css file, use Firebug to see if your changes are not overwritten by other rules. A link to the project and more information will be helpful.
It may be that the browser is caching your files, not the server. To check, try either merging your files or unmerging your files and refresh the page. If you see the changes, then it is indeed your browser that is caching the files.
In that case, we've developed a handy little extension that automatically refreshes the merged JS + CSS static files. http://extensions.activo.com/css-and-javascript-versioning.html
you may be using different theme. check in system config design section what package and theme you are using and then check for that folder in skin and change. delete the var cache and changes will show. you do not need to back up var cache
Its also important to check System -> Design, where design overrides are located. Recently we've had a problem with this, someone (we are not sure who, hacker?) added override without dates, and whole shop become broken (we have pretty sophisticated package with lots of modifications). It took us about 30 minutes to figure out what was going on.
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");